canvas.drawImage가 React에서 작동하지 않습니까?

Question

캔버스를 사용하여 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> 

자바 스크립트 코드 : 사전에 감사는

코드 반작용

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"; 

문자열의 대소 문자가 중요한 경우 잘 모르겠습니다.