HTML5预先调整大小的图片，然后再上传

小编典典

HTML5预先调整大小的图片，然后再上传

html

这是面条擦。

请记住，我们有HTML5本地存储和xhr v2，而没有。我想知道是否有人可以找到一个可行的例子，甚至只是对这个问题给我一个是或否：

是否可以使用新的本地存储（或其他方式）对图像进行预调整大小，以便对重新调整图像大小不了解的用户可以将其10mb图像拖到我的网站中，然后使用新的本地存储来调整其大小并然后以较小的尺寸上传。

我非常了解您可以使用Flash，Java applet，活动X来实现它。问题是您是否可以使用Javascript + HTML5。

期待对此做出回应。

暂时

阅读 297

2020-05-10

共1个答案

小编典典

是的，使用FileAPI，然后您可以使用canvas元素处理图像。

供参考，汇编源代码：

// from an input element
var filesToUpload = input.files;
var file = filesToUpload[0];

var img = document.createElement("img");
var reader = new FileReader();  
reader.onload = function(e) {img.src = e.target.result}
reader.readAsDataURL(file);

var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;

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;
  }
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);

var dataurl = canvas.toDataURL("image/png");

//Post dataurl to the server with AJAX

2020-05-10