HTML5 canvas가 sw 필터를 적용 할 수 없습니다.

이미지 원본을 필터링하고 DOM의 이미지 태그 원본으로 사용할 수있는 데이터를 반환 할 수있는 코드를 작성하고 싶습니다. Therfore 나는 가상 캔버스를 만들었습니다. 현재는 치수가 잘못 되었음에도 DOM 내의 실제 캔버스에서만 작동합니다. 난 단지 변환 된 이미지 소스와 DOM에 캔버스가 필요 없다. js fiddle2HTML5 canvas가 sw 필터를 적용 할 수 없습니다.

JS :

var image = new Image(); 
image.onload = function() { 

var helperCanvas = document.createElement('canvas'); 
var ctx = helperCanvas.getContext('2d'); 
ctx.width = image.width; 
ctx.height = image.height; 
ctx.drawImage(image, 0, 0, helperCanvas.width, helperCanvas.height); 
    var imageData = ctx.getImageData(0, 0, helperCanvas.width, helperCanvas.height); 

    filter(imageData); 

    data_as_source = ctx.putImageData(imageData, 0, 0).toURL(); 

    var img = new Image(); 
    img.src = data_as_source; 
    context.drawImage(img,0,0); 
} 

image.src = ....

출처

2013-06-11 daisy

표시된 코드에서 "DOM에 캔버스"가 표시되지 않고 캔버스가 없으면 어떻게 픽셀 데이터를 가져 옵니까? – dandavis

이 int [jsfiddle] (http://jsfiddle.net/NEF8n/9/)을 사용하려고하지만 ctx.putImageData (imageData, 0, 0)가 작동하지 않습니다. – daisy

js fiddle

이 하나가 DOM에서 잘못된 IMG 치수 및 원치 않는 캔버스와 함께 작동 :

이 나는 그것을 필요로하지만 작동하지 않습니다 어떻게 데모 코드에서 컨텍스트가 아닌 임시 캔버스 너비/높이를 변경해야합니다.

helperCanvas.width = image.width; 
    helperCanvas.height = image.height;

여기에는 모든 불투명 픽셀을 빨간색으로 만 바꾸는 테스트 필터가있는 코드가 있습니다.

또한 필터링 된 캔버스 이미지를 페이지의 이미지로 렌더링합니다. 이미지 객체를 생성 할 때이 같은 만들 경우 BTW

을 회피 할 수있는 새로운 크롬 버그가 : 크롬 또는 FF에서 볼 수 있어야합니다

var img=document.createElement("img");

바이올린을 (IE는 CORS 실패를 ==) : http://jsfiddle.net/m1erickson/LeGD5/ 여기

코드입니다 :

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.createElement("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var img=document.createElement("img"); 
    img.onload=function(){ 
     canvas.width=img.width; 
     canvas.height=img.height; 
     ctx.drawImage(img,0,0,img.width,img.height); 

     // test -- turn every non-transparent pixel red 
     var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
     var pixels = imgData.data; // get pixel data 
     for (var i = 0; i < pixels.length; i +=4) 
     { 
      // if this pixel is not transparent, 
      // mask it in pure red 
      if(pixels[i+3]>0){ 
       pixels[i]=255; // this is the red component of the pixel 
       pixels[i+1]=0; // this is the green component of the pixel 
       pixels[i+2]=0; // this is the blue component of the pixel 
       pixels[i+3]=255; // this is the alpha component of the pixel 
      } 
     } 
     ctx.putImageData(imgData, 0, 0);  

     var theImage=document.getElementById("theImage"); 
     theImage.src=canvas.toDataURL(); 
    } 
    img.crossOrigin="anonymous"; 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png"; 



}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <img id="theImage" width=300 height=300> 
</body> 
</html>

출처

2013-06-11 20:56:54 markE

감사합니다. – daisy

당신이 당신의 dataURL 부분에 몇 가지 버그가 있었다, 그러나 이것은 작동하는 것 같다 :

var image = new Image(); 
    image.onload = function() { 

    var helperCanvas = document.createElement('canvas'); 
    var ctx = helperCanvas.getContext('2d'); 
    ctx.width = image.width; 
    ctx.height = image.height; 
    ctx.drawImage(image, 0, 0, helperCanvas.width, helperCanvas.height); 
     var imageData = ctx.getImageData(0, 0, helperCanvas.width, helperCanvas.height); 

     filter(imageData); 
     ctx.putImageData(imageData, 0, 0); 
     //context.drawImage(img,0,0); 

     data_as_source = helperCanvas.toDataURL(); 

     var img = new Image(); 
     img.src = data_as_source; 
     img.style.border="3px solid red";// for demo sake 
     document.body.appendChild(img); // for demo sake 
    }

출처

2013-06-11 21:00:05 dandavis

HTML5 canvas가 sw 필터를 적용 할 수 없습니다.

답변

관련 문제