캔버스를 사용하여 이미지의 색조를 지정합니다. IE에서는 작동하지만 크롬에서는 작동하지 않습니다.

Question

function tintshift(ImgElement) 
{ 
    var canvas = document.createElement("canvas"); 
    canvas.width = ImgElement.width; 
    canvas.height = ImgElement.height; 

    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(ImgElement,0,0); 

    var im = ctx.getImageData(0,0,2600,1600); 
    var data = im.data; 

    for(var i = 0, len = data.length; i < len; i+=4) 
    { 
     data[i] = 255; 
     data[i+1] = 0; 
     data[i+2] = 0; 
    } 

    ctx.putImageData(im,0,0); 

    ImgElement.src = canvas.toDataURL(); 
} 

이 코드는 이미지 데이터를 가져 와서 색조를 다른 색으로 옮긴 다음 이미지를 새로 색칠 된 버전으로 바꿉니다. 그것은 Internet Explorer에서 잘 작동하지만, 크롬에서는 "getImageData"메소드에서 멈 춥니 다. 몇 가지 경고 호출로 테스트를했는데 그 메서드를 실행하면 아무 것도 실행되지 않습니다. 다소 예에 따라

이 크롬 보안 문제이며 내 로컬 컴퓨터의 이미지를 가지고 실현 http://jsfiddle.net/pHwmL/1/

Answer 1

context.getImageData() on localhost?

. Apache를 사용하여 페이지를 제공했습니다.