Reactjs canvas.drawImage在React中不工作？

我想用画布在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>

}

---

jsfiddle:

除了注释中的内容之外，您还可以取消注释这一行，这允许您从画布读取，尽管它是跨原点的

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("二维码插入失败！");
   }

---

我不确定字符串的大小写是否重要。

除了注释中的内容外，您还可以取消注释这一行，这允许您从画布上读取，尽管它是跨原点的

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("二维码插入失败！");
   }

---

我不确定字符串的大小写是否重要。

控制台的输出是什么？@kaido type:“load”@wubber您能做一个JSFIDLE吗？如果我们能运行代码，这将更容易弄清楚。@FakeRainBrigand稍等片刻moment@FakeRainBrigand.我重复这个问题您的控制台的输出是什么？@kaido type:“load”@wubber您能做一个JSFIDLE吗？如果我们能运行代码，这将更容易弄清楚。@FakeRainBrigand稍等片刻moment@FakeRainBrigand。我重复这个问题。它是不区分大小写的，但是除

'use-credentials'

（I）和

null

之外的任何其他值都将默认为匿名。但这是OP的问题中最小的一个，因为您可以从他的小提琴中看出，他的服务器没有正确配置，因此，此属性只会使映像加载失败。它不区分大小写，但无论如何，除了

'use-credentials'

（i）和

null

之外的任何其他值都将默认为匿名。但这是OP问题中最小的一个，因为您可以在他的小提琴中看出，他的服务器没有正确配置，因此，此属性只会使映像加载失败。