Question

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

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

这个在DOM中使用了错误的img维度和不需要的画布：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 = ....

Answer 1

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

    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>

Answer 2

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

HTML5画布无法应用sw滤镜

2 个答案: