HTML5 canvas не может применяться sw filter

Я хочу написать код, который может фильтровать источник изображения и возвращать данные, которые он может использовать в качестве источника для тега изображения в DOM. Поэтому я создал виртуальный холст. На данный момент он работает только с реальным холстом внутри DOM, хотя измерение ошибочно. Мне нужен только преобразованный источник изображения и не холст в DOM.HTML5 canvas не может применяться sw filter

это, как мне это нужно, но это не работает: js fiddle

это один работает с неправильным измерением IMG и нежелательным холстом в DOM: js fiddle2

ЯШИ:

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 this [jsfiddle] (http://jsfiddle.net/NEF8n/9/), но ctx.putImageData (imageData, 0, 0) не работает – daisy

В вашем демо-коде вы должны изменить временную ширину холста/высоту, а не контекст.

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

Вот код с тестовым фильтром, который просто превращает все непрозрачные пиксели в красный цвет.

Он также отображает отфильтрованное изображение холста на изображение на странице.

Кстати, при создании объекта изображения, есть новый Chrome ошибка, которую можно избежать, если создать так:

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

скрипку, которая должна рассматриваться в Chrome или FF (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

спасибо 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 filter

ответ

Смежные вопросы