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

在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'/>

最佳答案

不久前，我这样做是为了应对代码挑战。不知道这是否正是您所需要的，但希望对您有所帮助。

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;

关于javascript - 无法将 Canvas 保存到图像-受污染的 Canvas - react 应用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47189065/