HTML5画布不能应用sw滤镜

我想要编写的代码可以过滤图像的来源并返回可用作DOM中图像标记源的数据。因此，我创建了一个虚拟画布。目前它只能在DOM中使用真正的画布，即使尺寸是错误的。我只想要转换的图像源和DOM中没有画布。HTML5画布不能应用sw滤镜

这是我需要它，但它不工作：js fiddle2

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

我想使用像这样的[jsfiddle]（http://jsfiddle.net/NEF8n/9/）但ctx.putImageData（imageData，0，0）不起作用 – daisy

与错IMG尺寸和不必要的画布在DOM js fiddle

这一个工程在您的演示代码中，您应该更改临时画布宽度/高度，而不是上下文的。

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

这是带有测试过滤器的代码，它只是将所有非透明像素变成红色。

它还将过滤后的画布图像呈现在页面上的图像上。

BTW，创建图像对象时，也可避免新的Chrome漏洞，如果你创建这样的：必须在浏览器或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

谢谢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画布不能应用sw滤镜

回答

相关问题