无法将画布保存到图像 - 受污染的画布 - 反应应用程序

Question

在canvas.toDataURL() 行后，我收到一个错误

无法在“HTMLCanvasElement”上执行“toDataURL”：受污染的画布 不能导出

我尝试自己搜索解决方案，具有交叉来源，但这对我没有帮助。有没有可能下载在画布上创建的图像？我看到了toDataURL() 的例子，但不幸的是这些对我不起作用。我会考虑其他解决方案。

   _handleSaveButton(){
    var canvas = document.getElementById('memesCanvas');
    console.log(canvas);
    
    var canvasimage=document.createElement("img");
    canvasimage.setAttribute('crossOrigin','anonymous');
    canvasimage = canvas.toDataURL('image/png');
    canvasimage.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
    alert(canvasimage);
  }
 
 <ReactButton onClick={() => this._handleSaveButton()} styleName={'generate-meme'} name='generate meme'/>

Answer 1

我在不久前的一次代码挑战中这样做了。不确定这是否正是您所需要的，但我希望它有所帮助。

import React, { Component } from "react";

class Save extends Component{
  saveCanvas() {
    const canvasSave = document.getElementById('resetCanvas');
    const d = canvasSave.toDataURL('image/png');
    const w = window.open('about:blank', 'image from canvas');
    w.document.write("<img src='"+d+"' alt='from canvas'/>");
    console.log('Saved!');
  }

  render(){
    return(
      <div>
        <button onClick={ this.saveCanvas }>Save</button>
      </div>
    )
  }
}

export default Save;