javascript - 使用 JS、JQuery 或 HTML5 调整图像大小

Question

我目前正在使用 bootstrap-wysiwyg富文本编辑器。这允许用户将图像文件拖到编辑器中，这很棒，但是我想即时调整此图像的大小。我相信我已经在 bootstrap-wysiwyg.js 中找到了我应该在图像显示在编辑器中并随后在用户单击提交时将其发布到 PHP 页面之前尝试调整图像大小的位置。

通过阅读其他 stackoverflow 帖子，似乎首选的方法是使用 HTML5 的 Canvas 功能。我也有 jQuery 可用。该解决方案必须支持的唯一浏览器是当前版本的 Chrome 或 Firefox。

我相信我已经找到了这个调整大小功能的一个很好的切入点:

function (files) {
  editor.focus();
  $.each(files, function (idx, fileInfo) {
    if (/^image\//.test(fileInfo.type)) {

      // ENTRYPOINT: attempt to resize

      $.when(readFileIntoDataUrl(fileInfo)).done(function (dataUrl) {
        execCommand('insertimage', dataUrl);
        editor.trigger('image-inserted');
      }).fail(function (e) {
        options.fileUploadError("file-reader", e);
      });
    } else {
      options.fileUploadError("unsupported-file-type", fileInfo.type);
    }
  });
},

上述代码预先存在于 bootstrap-wysiwg 库中。我想我可以以某种方式获取 fileInfo 对象，将其转换为 Image 对象，调整大小，生成图像的 dataurl 版本，然后调用:

execCommand('insertimage', dataUrl);
editor.trigger('image-inserted');

我觉得这将消除对当前包含这两个函数调用的 $.when 函数的需要。

我尝试整合来自 StackExchange 的其他示例，this one特别有前途，但我一定对 JS 的理解不够好，无法适本地适应我的需要。

我意识到我可以在服务器端调整图片的大小，但这是不可取的，因为目标是自动调整被拖到编辑器窗口中的非常大的图片的大小，使其更易于管理正在使用编辑器窗口并且没有在所有方向填满整个编辑器窗口的最终用户。

生成图像的质量并不是那么重要，所以我不关心其他地方提到的那些类型的优化。

Answer 1

我最近做了一个副项目 ( kropimg.com )，它做了类似的事情——完全使用 canvas 在客户端调整图像大小。

不过你还有更多选择:

仅客户端方式

如果你坚持在客户端做所有事情，你需要使用 Canvas 来调整图像的大小——因为你怀疑用来自的函数调用替换 $.when 部分this answer . (您可能需要先通过 img = readFileIntoDataUrl(fileInfo); 传递它)

服务器端唯一方式

我不知道你是否知道这个但是你不能直接用文件对象进行ajax调用。您应该使用 FileReader 接口(interface)读取内容，首先要做的是异步。引用this answer . 在服务器上完成调整大小后，您可以将图像的 url 返回到前面。同时，您可以显示一个微调器(就像 Gmail 那样)。

编辑:意识到您不需要服务器端方法

混合方式

另一种方法是使用 CSS/JS 调整图像大小，然后在上传时将新尺寸发送到服务器并在那里调整大小(使用 GD 或 ImageMagik)。只需使用 jQuery 在该图像上设置一些 CSS。如果我是你，我会采用这种方法。尽管您说您不关心质量，但将大图像的大小调整到 25% 以下可能看起来非常难看(很多锯齿)。这种方法的缺点是上传一个巨大的图像需要一段时间。

希望这对您有所帮助。