javascript调整大小图像[缩小大小]并上传

3 回答

• 4

  是的，可以在Flash Player 10及更高版本中使用 .

  这是一篇旧的博客文章，从2008年开始Flash Player 10和FileReference.load（）函数的新版本，并没有涵盖所有必需的步骤，但它是一个开始：

  http://www.mikechambers.com/blog/2008/08/20/reading-and-writing-local-files-in-flash-player-10/

  您可能还需要研究如何在ActionScript中调整位图大小，如何将位图编码为JPEG或PNG（使用as3corelib）以及如何将结果上载到服务器 .

  Edit ：http://www.plupload.com似乎支持调整大小 . 还有http://resize-before-upload.com/

  回复于 2024-04-19T09:06:49+08:00
• 5

  是的，可以使用HTML5 canvas API在javascript中调整图像大小 . 但是，您需要在调整大小后将其保存在某处 .

  • 您需要检查的第一个API是drawImage .

  • 第二个是toDataURL .

  根据您的要求，您可以：

  • 让用户使用client side script保存较小的图像 .

  • 使用服务器端语言自行存储，将 Base64 Encoded Image 转换为实际图像文件，并将其保存在服务器上 . 看看 Example 1 .

  Example 1: PHP5 based solution:

  <?php
      define('UPLOAD_DIR', 'images/');
      $img = $_POST['img'];
      $img = str_replace('data:image/png;base64,', '', $img);
      $img = str_replace(' ', '+', $img);
      $data = base64_decode($img);
      $file = UPLOAD_DIR . uniqid() . '.png';
      $success = file_put_contents($file, $data);
      print $success ? $file : 'Unable to save the file.';
  ?>
  

  UPDATE #2:

  如下面的评论中所述，此方法需要modern browser that supports File APIs才能工作 . 使用flash method代替支持现代和非html5浏览器 .

  回复于 2024-04-19T09:06:49+08:00
• 0

  如果您使用JSON上传，请使用以下代码

  function UploadPhoto(img) {
  
      var uri = "http://domain/App/AppService.svc/GetImg/New";
      var imgElem = document.getElementById(img);
      var imgData = JSON.stringify(getBase64Image(imgElem));
  
      alert(imgData);
      $.ajax({
          url: uri,
          contentType: 'application/json',
          dataType: 'json',
          type: 'POST',
          data: imgData,
          error: function () {
              alert('failed');
          },
          success: function () {
              alert('Sucess');
          }
      });
  
  
  }
  function getBase64Image(imgElem) {
      var width = 100;
      var height = 150;
  
      // imgElem must be on the same server otherwise a cross-origin error will be thrown "SECURITY_ERR: DOM Exception 18"
      var canvas = document.createElement("canvas");
      canvas.width = width;
      canvas.height = height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(imgElem, 0, 0, width, height);
      ctx.scale(width, height)
      var dataURL = canvas.toDataURL("image/png");
      return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
  }
  

  回复于 2024-04-19T09:06:49+08:00