Question

我从输入元素中获取一个图像文件，然后通过e.target.files[0]将其捕获到一个vanilla javascript片段中。接下来，我试图通过在下面的函数中将e.target.files[0]传递给source_img来标准化此图像的尺寸（如果它超出了基准）：

function process_img(source_img,new_width, new_height, mime_type, quality){
    var canvas = document.createElement('canvas');
    canvas.width = new_width;
    canvas.height = new_height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(source_img, 0, 0, new_width, new_height);
    return dataURItoBlob(canvas.toDataURL(mime_type,quality/100),mime_type);
}

function dataURItoBlob(dataURI,mime_type) {
  var byteString = atob(dataURI.split(',')[1]);
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); }
  return new Blob([ab], { type: mime_type });
}

目前这给我以下错误：

TypeError：CanvasRenderingContext2D.drawImage的参数1不能转换为以下任意一个：HTMLImageElement，HTMLCanvasElement， HTMLVideoElement，ImageBitmap。

我的问题是双重的：

1）为什么我得到错误以及解决它的最有效方法是什么？

2）完成此图像大小调整/处理的最有效方法是什么？例如。规避base64字符串的方法（同时确保跨浏览器兼容性）？基本上我想知道行业专业人士如何为可扩展项目做到这一点。

我更喜欢带有说明性示例的答案（以及解释）。

注意：这里的专业服务器端开发者是JS新手。让我们坚持使用纯JS来解决这个问题的范围。 JQuery在我的雷达上，但在学习JS基础知识之前我不会触及它。

Answer 1

问题1：将您的process_img函数更改为：

 function process_img(source_img, new_width, new_height, mime_type, quality) {
     var canvas = document.createElement('canvas');
     canvas.width = new_width;
     canvas.height = new_height;
     var ctx = canvas.getContext("2d");

     var reader = new FileReader();
     var img = document.createElement('img');

     reader.onload = function() {
         img.src = this.result;
         document.body.appendChild(img); //maybe
         img.style.display = 'none'; //maybe
         img.onload = function() {//better
             ctx.drawImage(img, 0, 0, new_width, new_height);
             return dataURItoBlob(canvas.toDataURL(mime_type, quality / 100), mime_type);
         };
     };

     reader.readAsDataURL(source_img);
 }

原则是通过FileReader将您的imageFile转换为带有src的HTMLimgElement;

使用CanvasRenderingContext2D的drawImage方法时的TypeError（纯Javascript）

1 个答案: