使用上下文和drawImage在角度客户端图像压缩上获取黑色图像

Posted 2023-03-25

【中文标题】使用上下文和drawImage在角度客户端图像压缩上获取黑色图像

【英文标题】：Getting black image on angular client side image compression with context and drawImage

【发布时间】：2021-12-03 15:55:54

【问题描述】：

我正在尝试从客户端压缩图像，但出现错误 cvs = ctx.drawImage(file, 0, 0, 100, 100);

但是得到 1 kb 的黑色图像，需要帮助

selectImage(event: any)
if(event.target.files.length>0)  
    const file = event.target.files[0];
    this.reader_img(file);
 

reader_img(file:File)
let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () 
      if(!(reader.result))
        throw new Error(`error1`)
      
      var img1 = new Image(); 
      img1.src = reader.result.toString();
      var cvs = document.createElement('canvas');
      var ctx=cvs.getContext("2d");
      if (!(ctx)) 
        throw new Error(` error2`);
      
      ctx.drawImage(img1, 400, 400);
      console.log(cvs.toDataURL());
    ;
    reader.onerror = function (error) 
      console.log('Error: ', error);
    ;

【问题讨论】：

您声明了ctx，但没有为变量分配任何内容。因此，它是未定义的。

这能回答你的问题吗？ CanvasContext2D drawImage() issue [onload and CORS]

【参考方案1】：

您的 ctx 对象未分配，因为您没有在上面的行中分配任何内容（让 ctx: any;）。 drawImage 也返回 void。图像被绘制到 CanvasRenderingContext2D 绑定到的画布上。试试这个：

var cvs = document.createElement('canvas');
let ctx = cvs.getContext("2d");
ctx.drawImage(file, 0, 0, 100, 100);

【讨论】：

我在 "ctx.drawImage(file, 0, 0, 100, 100);" 处遇到错误“对象可能为空”