HTML5 画布无法应用 sw 过滤器答案

【问题标题】：HTML5 canvas can't apply sw filterHTML5 画布无法应用 sw 过滤器
【发布时间】：2013-06-07 20:04:33
【问题描述】：

我想编写可以过滤图像源并返回可用作 DOM 中图像标记源的数据的代码。因此，我创建了一个虚拟画布。目前它只适用于 DOM 中的真实画布，即使尺寸错误。我只想要转换后的图像源，DOM 中没有画布。

这是我需要的，但它不起作用：js fiddle

这适用于错误的 img 尺寸和 DOM 中不需要的画布：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 = ....

【问题讨论】：

我在显示的代码中没有看到“DOM 中的画布”...此外，如果没有画布，您将如何获取像素数据？
我想使用类似 int 这个jsfiddle 但 ctx.putImageData(imageData, 0, 0) 不起作用

标签： javascript html canvas filter

【解决方案1】：

您的 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
    }

【讨论】：

【解决方案2】：

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

    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>

【讨论】：