时间戳

首页 > 解决方案 > 使用上下文和drawImage在角度客户端图像压缩上获取黑色图像

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

问题描述

我正在尝试从客户端压缩图像，但在 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);
    };
}

标签： angularangularjshtml5-canvas

解决方案

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

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

推荐阅读