Question

我在文件选择上有这个功能：

uploadFile(e) {
   var ctx = this.refs.canvas.getContext('2d');
   var url = URL.createObjectURL(e.target.files[0]);
   var img = new Image();

   img.src = url;
   img.onload = function () {    
       ctx.drawImage(img, 0, 0, 600, 600,
            0, 0, 200, 200);    
   }

   var dataImg = this.refs.canvas.toDataURL();
   console.log(dataImg);
}


render() {
  return (
    <div>
      <canvas ref="canvas" width={200} height={200}> </canvas>
    </div>
  );
}

它实际上将图像转换为画布，但toDataURL生成空白数据图像。我想将生成的画布转换为base64数据图像。知道为什么吗？

Answer 1

只需移动toDataURL()处理程序中的onload即可。现在toDataURL()在绘制图像之前执行，因此是空白图像。

您还需要考虑在获取data-url后使用回调/保证，因为调用是异步的，并且您打算将data-url传递给其他函数。

此外，您需要跟踪范围，如下所示，在调用之前引用this，或者您可以在回调处理程序上使用bind()。

var me = this; // keep reference for inner call
img.onload = function () {
    ctx.drawImage(this, 0, 0, 600, 600,       // `this` is now image
                        0, 0, 200, 200);
    // this line needs to go here
    var dataImg = me.refs.canvas.toDataURL(); // note `me` being used here
    console.log(dataImg);
    // consider a callback to pass result to next function in chain
};
// set src last
img.src = url;

将图像文件映射到画布，然后转换为base64

1 个答案: