0

画像のソースをフィルタリングして、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 = ....
4

2 に答える 2

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
    }
于 2013-06-11T21:00:05.177 に答える
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>
于 2013-06-11T20:56:54.567 に答える