Dropzone。js客户端图像大小调整

Question

我想集成Dropzone。js具有客户端图像大小调整功能。我知道有一个函数可以调整缩略图的大小，但我想在上传之前创建一个函数来调整主图像的大小。有人能帮我吗？

Answer 1

Dropzone版本5是最近发布的，所以如果您升级到dropzone 5，那么您可以简单地使用resizeWidth和resizeHeigh来压缩您在客户端的图像。

如果您只提供其中之一，那么dropzone将尊重原始宽高比，例如，如果您只是添加选项：reszeWidth： 800，那么您的图像将被压缩到宽=800像素，并且您的原始图像的方面比例将被尊重。

Answer 2

关于预上传调整大小功能的Dropzone文档令人困惑。按照它的阅读方式，你可以限制宽度，限制高度，或者限制两者并牺牲纵横比，从而扭曲图像。事实并非如此。这是：

resizeWidth: 1000, resizeHeight: 1000,
resizeMethod: 'contain', resizeQuality: 1.0,

将宽度或高度限制在最大1000px以内——以较大者为准。另一个将根据宽高比缩小，而不会扭曲图像。例如，在我的测试中，我上传了一张2688x1512的图像。Dropzone裁剪了缩略图并将其大小调整为默认的120x120，但是发送到服务器的文件由Dropzone单独调整为1000x562，然后发送到服务器。

这里有一个有趣的警告。JPEG将被重新压缩，有损，所以即使是1.0的resizeQuality也会导致丢失。我认为这是一种防止文件过大的方法，但如果可以避免的话，应该小心调整两次大小（一次在服务器上，一次在客户端）。

如果这对你来说还不够——而且你真的想让transform方法过载——那么值得注意的是，在Dropzone中遵循代码路径有点让人困惑，因为每次上传都会使用createThumbnailcodepath两次，一次是按照你的预期创建一个缩略图，在将图像传递给服务器之前，再次在此处预调整图像大小。同样地，resize方法的名称也很混乱；resizeWidth etc指的是准备上传图像，resize指的是调整缩略图的大小，而对发送到服务器的图像不做任何处理。

Answer 3

下面介绍了如何在不从addedfile上传文件的情况下执行此操作。

重要的是将autoQueue选项设置为false，这样dropzone就不会自动上传用户选择的文件。

var dropzone = new Dropzone (".dropzone", {
  ...
  autoQueue: false,
  ...
});

下一步是在addedfile事件中调整大小并将调整大小的版本排队。

dropzone.on("addedfile", function(origFile) {
  var MAX_WIDTH  = 800;
  var MAX_HEIGHT = 600;

  var reader = new FileReader();

  // Convert file to img

  reader.addEventListener("load", function(event) {

    var origImg = new Image();
    origImg.src = event.target.result;

    origImg.addEventListener("load", function(event) {

      var width  = event.target.width;
      var height = event.target.height;


      // Don't resize if it's small enough

      if (width <= MAX_WIDTH && height <= MAX_HEIGHT) {
        dropzone.enqueueFile(origFile);
        return;
      }


      // Calc new dims otherwise

      if (width > height) {
        if (width > MAX_WIDTH) {
          height *= MAX_WIDTH / width;
          width = MAX_WIDTH;
        }
      } else {
        if (height > MAX_HEIGHT) {
          width *= MAX_HEIGHT / height;
          height = MAX_HEIGHT;
        }
      }


      // Resize

      var canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;

      var ctx = canvas.getContext("2d");
      ctx.drawImage(origImg, 0, 0, width, height);

      var resizedFile = base64ToFile(canvas.toDataURL(), origFile);


      // Replace original with resized

      var origFileIndex = dropzone.files.indexOf(origFile);
      dropzone.files[origFileIndex] = resizedFile;


      // Enqueue added file manually making it available for
      // further processing by dropzone

      dropzone.enqueueFile(resizedFile);
    });
  });

  reader.readAsDataURL(origFile);
});

下面是一个将dataURL转换为dropzone文件的函数。如果使用canvas，过程可能会更简单。toBlob（）而不是canvas。toDataURL（），以获取已调整大小的文件的内容，但并非所有浏览器都支持后者。

它只是这个函数的修改版本。

function base64ToFile(dataURI, origFile) {
  var byteString, mimestring;

  if(dataURI.split(',')[0].indexOf('base64') !== -1 ) {
    byteString = atob(dataURI.split(',')[1]);
  } else {
    byteString = decodeURI(dataURI.split(',')[1]);
  }

  mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0];

  var content = new Array();
  for (var i = 0; i < byteString.length; i++) {
    content[i] = byteString.charCodeAt(i);
  }

  var newFile = new File(
    [new Uint8Array(content)], origFile.name, {type: mimestring}
  );


  // Copy props set by the dropzone in the original file

  var origProps = [ 
    "upload", "status", "previewElement", "previewTemplate", "accepted" 
  ];

  $.each(origProps, function(i, p) {
    newFile[p] = origFile[p];
  });

  return newFile;
}