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

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

从阅读其他stackoverflow文章来看，这样做的首选方式似乎是使用HTML5的画布功能。我也有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);
    }
  });
},

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);
    }
  });

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

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

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

我曾尝试集成StackExchange中的其他示例，这一点特别有希望，但我必须对JS理解得不够透彻，才能使其适合我的需要

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

结果图像的质量并不那么重要，所以我不关心其他地方提到的优化类型

---

我最近做了一个侧面项目（），做了类似的事情-完全使用

画布调整客户端图像的大小

不过，您还有更多选择：

客户端是唯一的方法
若您坚持在客户端执行所有操作，您将需要使用画布来调整图像的大小—正如您所怀疑的那个样，当使用来自的函数调用替换
$部分时。（您可能需要首先通过
img=readFileIntoDataUrl（fileInfo）；
传递它）

服务器端是唯一的方法
我不知道您是否知道这一点，但您不能直接使用file对象进行ajax调用。您应该使用FileReader接口来读取内容，首先要做的是异步。提到
在服务器上调整大小后，可以将图像的url返回到前端。同时你可以展示一个旋转器（就像Gmail一样）

编辑：您不需要服务器端方法

混合方式
另一种方法是使用CSS/JS调整图像大小，然后在上传时，将新的维度发送到服务器并在那里调整大小（使用GD或ImageMagik）。只需使用jQuery在该图像上设置一些CSS。如果我是你，我会用这种方法。虽然你说你不在乎质量，但是把大图像的大小调整到25%以下看起来很难看（有很多别名）。这种方法的缺点是上传一个巨大的图像需要一段时间

希望这有帮助。
我选择使用纯客户端选项作为解决问题的方法。这主要是由于我的用例的特殊性质。这不仅使我能够在将图像插入“bootstrap wysiwg编辑器”之前缩小图像，还可以在将图像上载到服务器之前减小图像的大小。我们的上传带宽很低，所以这是一个非常重要的问题。旧式浏览器支持和客户端资源使用不是我的用例关注的问题

我能够使用此工具提供的调整大小功能，为了便于访问，我在下面复制了该功能：

// 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();
}

然后，我对现有的“bootstrap wysiwyg.js”进行了一些细微的更改，以集成调整大小功能：

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);
    }
  });
},

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);
    }
  });

这对我来说非常有用，不过我可能会修改它，使其只调整大于某个阈值的图像大小，并对其进行更改，以便保留原始图像的纵横比。
感谢您的回复。我决定使用客户端专用选项。这是最适合我的解决方案，因为它一举两得：1）更小的图像大小为用户提供更易于管理的编辑器窗口。2） 上传前较小的图像大小会导致所需的上传带宽减少。这不是一个商业项目，所以对于我的用例来说，客户端机器上的资源负载并不重要。我将在下面发布我的最终解决方案，但是，我觉得我应该接受你的回答，因为它提供了信息，并引导我找到我的解决方案？这是正确的做法吗？