javascript - 无法将 Canvas 保存到图像 - 受污染的 Canvas - react 应用程序

Question

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

Failed to execute 'toDataURL' on 'HTMLCanvasElement': tainted canvas may no be exported

尝试自己搜索具有交叉来源的解决方案，但这对我没有帮助。有没有可能下载在 Canvas 上创建的图像？我看到了 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;