putImageDataは画像を「暗くする」

私は2つのキャンバスを持っています。最初のキャンバスでイメージと2番目のキャンバスを描画する最初のキャンバスからイメージをコピーし、 "getImageData" e "putImageData"を使用して2番目のキャンバスに貼り付けますputImageDataは画像を「暗くする」

次のコードはコードの一部です私は自分のアプリケーション上にある。私は問題の原因ではなかった部分を切り取り、コンパクトにしました。 [javascriptに存在する画像が存在する必要があることに注意してください "image3.jpg"]。

var canvasLocal = document.getElementById('c'), 
 
\t context = canvasLocal.getContext('2d'), 
 
\t canvasToRender1 = document.getElementById('c2'), 
 
\t ctx = canvasLocal.getContext("2d"), 
 
\t canvasToRender1Ctx = canvasToRender1.getContext('2d'), 
 
\t base_image = new Image(); 
 

 
base_image.src = 'imagem3.jpg'; 
 
base_image.onload = function() { 
 
\t canvasLocal.width = canvasToRender1.width = base_image.width; 
 
\t canvasLocal.height = canvasToRender1.height = base_image.height; 
 
\t 
 
\t context.drawImage(base_image, 0, 0); 
 
\t \t 
 
\t var imgData = ctx.getImageData(0, 0, base_image.width, base_image.height); 
 

 
\t 
 
\t canvasToRender1Ctx.putImageData(imgData,0,0); 
 
}

<html> 
 
<head> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
\t 
 
</head> 
 
<body> 
 
\t 
 
<canvas id="c"></canvas> 
 
<canvas id="c2"></canvas> 
 
<script src="javascript.js"></script> 
 
</body> 
 
</html>

問題は二キャンバス上の画像は元のことを暗く見えることである。

私はいくつかのブラウザでテストが、私だけ1問題がアンドロイドバージョンが6.0.1以上のアンドロイドのクロムであることがわかりました。（クロムのバージョンは、テストしたすべての携帯電話の57.0.2987.132でした）。

更新：すでにこの問題をクロムに報告しています。 このリンクで確認してください：https://bugs.chromium.org/p/chromium/issues/detail?id=713632#

出典

2017-04-20 Ricardo Rocha

私は、Wで始まり、Fで終わり、中間にTである3文字のコメントがあります。私はあなたが回避策を持っていることを知っていますが、単に好奇心で、あなたはどんなイメージでも再現できますか？元の画像にカラープロファイルが埋め込まれていますか？ – Kaiido

はいできます。そして、私はさまざまなサイズのキャンバスの異なるサイズのさまざまな画像でテストしました。それは本当に奇妙です。 google chrome guysがこれに言っているものを見てみましょう –

今のところ解決策は、putImageDataの代わりにdrawImageを使用することです。画素を変更する必要がある場合の

var canvasLocal = document.getElementById('c'), 
context = canvasLocal.getContext('2d'), 
canvasToRender1 = document.getElementById('c2'), 
ctx = canvasLocal.getContext("2d"), 
canvasToRender1Ctx = canvasToRender1.getContext('2d'), 
base_image = new Image(); 

base_image.src = 'imagem3.jpg'; 
base_image.onload = function() { 
    canvasLocal.width = canvasToRender1.width = base_image.width; 
    canvasLocal.height = canvasToRender1.height = base_image.height; 

    context.drawImage(base_image, 0, 0); 

}

出典

2017-04-20 10:06:08

画像データを取得していればそれを修正してdrawImageを使用することはできませんが、クロムが問題を解決するまで待つ必要がありますか？おそらく、 –

。私の場合、これはうまくいった。あなたのケースについては、別の解決策があるかどうかわからない場合は、クロム修正を待つ –

@RicardoRochaあなたは少し多くのコードを投稿できますか？私にとってcanvasToRender1は何もしません。 – soenke

実測解像度：

は解決される問題のあるコードの後に続きます。 ImageBitmapを使用できます。

return createImageBitmap(imageData).then(function(bitmap){ 
    var canvas = document.createElement('canvas'); 
    canvas.width = bitmap.width; 
    canvas.height = bitmap.height; 
    canvas.getContext('2d').drawImage(bitmap, 0, 0); 
});

出典

2017-05-31 11:06:42

putImageDataは画像を「暗くする」

答えて

関連する問題