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以适应我的需要。

我意识到我可以在POST /上传之后调整图像服务器端的大小，但这是不可取的，因为目标是自动调整拖入编辑器窗口的非常大的图像，使其更易于管理。使用编辑器窗口但未向所有方向填充整个编辑器窗口的最终用户。

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

Answer 1

我最近做了一个类似的侧面项目（kropimg.com） - 使用canvas完全调整了客户端图像的大小。

你有更多选择：

仅限客户端

如果您坚持在客户端执行所有操作，则需要使用画布调整图像大小 - 因为您怀疑使用{{3的函数调用替换$.when部分}}。 （您可能需要先通过img = readFileIntoDataUrl(fileInfo);）

传递

仅服务器端

我不知道你是否知道这一点，但你不能直接用文件对象进行ajax调用。您应该首先使用FileReader接口来读取内容是异步的。请参阅this answer。完成服务器上的调整大小后，您可以将图像的URL返回到前面。同时你可以展示一个微调器（就像Gmail一样）。

编辑：意识到您不想要服务器端方法

混合方式

另一种方法是使用CSS / JS调整图像大小，然后在上传时，将新维度发送到服务器并在那里调整大小（使用GD或ImageMagik）。只需使用jQuery在该图像上设置一些CSS。如果我是你，我会选择这种方法。虽然你说你不关心质量，但将大图像调整到25％以下可能看起来很丑陋（很多混淆）。这种方法的缺点是上传大图片需要一段时间。

希望这有帮助。

Answer 2

我选择使用纯粹的客户端选项作为我的问题的解决方案。这主要是由于我的用例的特殊性质。这不仅允许我在将图像插入＆＃34; bootstrap-wysiwg编辑器之前缩小图像，这也会在图像上传到服务器之前减小图像的大小。我们的上传带宽非常低，因此这一点非常重要。遗留浏览器支持和客户端资源使用不是我用例的问题。

我能够使用此answer提供的调整大小功能，我在下面复制了该功能以方便访问：

// resize function
function imageToDataUri(img, width, height) {

    // create an off-screen canvas
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');

    // set its dimension to target size
    canvas.width = width;
    canvas.height = height;

    // draw source image into the off-screen canvas:
    ctx.drawImage(img, 0, 0, width, height);

    // encode image to data-uri with base64 version of compressed image
    return canvas.toDataURL();
}

然后我能够对现有的＆＃34; bootstrap-wysiwyg.js＆＃34;进行一些细微的修改。集成调整大小功能：

insertFiles = function (files) {
  editor.focus();
  $.each(files, function (idx, fileInfo) {
    if (/^image\//.test(fileInfo.type)) {
      // resize
      var img = new Image();

      img.onload = function() {
        // TODO: add some error checking and gracefully handle errors
        var dataUrl = imageToDataUri(img, 300, 200);

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

        URL.revokeObjectURL(img.src)
      }
      img.src = URL.createObjectURL(fileInfo);
    } else {
      options.fileUploadError("unsupported-file-type", fileInfo.type);
    }
  });

这对我的目的很有用，虽然我可能会对其进行修改，以便它只调整大于某个阈值的图像并更改它，以便保留原始图像的纵横比。

使用JS，JQuery或HTML5调整图像大小

2 个答案:

仅限客户端

仅服务器端

混合方式