Question

我想使用canvas在React中制作一张卡片，但它不起作用，我没有发现任何问题！提前致谢

反应代码：

<div>
    <canvas id="myCanvas" ref="canvas" width="750" height="1000">您的浏览器不支持canvas</canvas>
    <img src={cardModel1} ref="backImg" style={{display: 'none'}} crossOrigin="anonymous"/>
    <img ref="showImg" className="showImg" crossOrigin="anonymous" style={showImgStyle}/>
    <div style={loadingStyleV2}>
        <LoadingTip />
    </div>
</div>

Javascript代码：

const canvas = this.refs.canvas;
const ctx = canvas.getContext('2d');
let codeUrl = new Image;
codeUrl.src = this.props.codeUrl; // a http url
// codeUrl.crossOrigin = "Anonymous";
if (codeUrl.complete) {
    console.log("complete");
    ctx.drawImage(codeUrl, 298, 764, 156, 156);
} else {
    codeUrl.onload = function (res) {
    console.log(res,codeUrl);
    ctx.drawImage(codeUrl, 298, 764, 156, 156);
};
    codeUrl.onerror = function (res) {
    console.log(res);
    alert("二维码插入失败！");
   }

}

jsfiddle：https://jsfiddle.net/HaiSheng/69z2wepo/75587/

Answer 1

除了评论中的内容之外，您还可以取消注释此行，即使它是交叉原点，您也可以从画布中读取。

codeUrl.crossOrigin = "anonymous";

我不确定字符串是否重要。

canvas.drawImage在React中不起作用？

1 个答案: