0

キャンバスを使ってグレースケールの画像を作りたいです。いくつかの例があります。しかし、それは私の最新のChromeとFirefoxに問題があります。驚いたことに、IE9は優れています。それは私のコードの問題ですか？

そしてここに私のコードがあります：

function draw() {
canvas = document.getElementById('canvas')
ctx = canvas.getContext('2d');
image = new Image();
image.src = 'ichiro.jpg';
ctx.drawImage(image, 0, 0);
imgd = ctx.getImageData(0, 0, 480, 400);
for (i=0; i<imgd.data.length; i+=4) {
    grays = imgd.data[i]*.3 + imgd.data[i+1]*.6 + imgd.data[i+2]*.1;
    imgd.data[i  ] = grays;   // red
    imgd.data[i+1] = grays;   // green
    imgd.data[i+2] = grays;   // blue
}
ctx.putImageData(imgd, 0, 0);

imggray = new Image();
imggray.src = canvas.toDataURL();
imggray.onload = function() {
    ctx.drawImage(imggray, 0, 0);
}

}

HTML5とjavascriptは初めてです。だからどんな助けもいただければ幸いです。

4

1 に答える 1

0

編集：

申し訳ありませんが、あなたの質問を読み間違えました。ほぼ確実にセキュリティエラーが原因です。getImageData別の「オリジン」（別のドメインまたはローカルファイルシステム）からの画像をキャンバスに描画した場合は、使用できません。ローカルのChromeでは、次のようにすれば回避できます。

C:\Users\root\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files

オリジンクリーンフラグと呼ばれるものがあり、別のオリジンから画像を描画すると削除されます。（適切な）セキュリティ上の理由から、すべてのファイルの出所は異なります。

元の答え：

画像が読み込まれるのを待つ必要があります。

実例： http： //jsfiddle.net/SYLW2/1107/

...
// this now happens only after the image is loaded:
image.onload = function() {
ctx.drawImage(image, 0, 0);
imgd = ctx.getImageData(0, 0, 480, 400);
for (i=0; i<imgd.data.length; i+=4) {
    grays = imgd.data[i]*.3 + imgd.data[i+1]*.6 + imgd.data[i+2]*.1;
    imgd.data[i  ] = grays;   // red
    imgd.data[i+1] = grays;   // green
    imgd.data[i+2] = grays;   // blue
}
ctx.putImageData(imgd, 0, 0);

imggray = new Image();
imggray.src = canvas.toDataURL();
imggray.onload = function() {
    ctx.drawImage(imggray, 0, 0);
}
}
image.src = 'http://placekitten.com/400/400';
于 2011-10-21T00:37:54.700 に答える