"src"가 아닌 "content"또는 "background-image"로 지정된 drawImage를 사용할 수 없습니다.

Question

src DOM 속성을 사용하여 이미지 세트를 지정할 수 없기 때문에 -webkit-image-set을 사용하여 이미지 내용을 지정합니다. :

<img id="imgTest" /> 
... 
#imgTest { 
    background-image: -webkit-image-set(url(icon1x.jpg) 1x,url(icon2x.jpg) 2x); 
} 

장치 픽셀 비율에 따라 이미지 내용이 잘로드됩니다. 이제 이미지를 캔버스에 덤프해야합니다. 여기에 내 코드입니다 :이 시점에서

var c = document.createElement("canvas"); 
var ctx = c.getContext("2d"); 
c.width = 20; 
c.height = 20; 
ctx.drawImage(document.getElementById("imgTest"), 0, 0); 

// Let's see what we've got in the canvas. 
var data = ctx.getImageData(0, 0, 2, 2).data; 

, data가 0으로 채워진 배열입니다 (실제 이미지가 명확하게 비어 있지 않습니다). #imgTest의 src 속성을 예 : icon2x.png, data 내용은 실제 이미지를 반영합니다.

-webkit-image-set을 포함하는 이미지의 내용을 cavas에 덤프 할 수 있다면 어떤 생각이 들겠습니까?

Answer 1

저는 -webkit-image-set이나 코드에 익숙하지 않아 여러분이 제안한 것을 다시 만들 수 없습니다. 그래서 궁극적으로 나는 잘 모른다.

그러나 이미지 요소가 아직로드되지 않았거나 배경과 실제 이미지에 다른 데이터 공간이 있고 drawImage()가 실제 이미지를 사용한다는 것을 추측하기에 HTML과 javascript에 익숙합니다. 데이터. 그래서 src 속성을 사용하고, 또는 onload 핸들러를 사용하여 이미지가 그려 지거나 몸체가 로딩을 끝내면 이미지를 그릴 것을 제안합니다.

또 다른 옵션은 src 속성이 설정된 숨겨진 이미지 요소를 만들고로드 한 후에 해당 데이터를 사용하는 것입니다.