最近、ブラウザ上の特定の画像から画像データを抽出するために HTML Canvas 5 要素を使用していますが、少し問題が発生しました。getDataURL や getImageData() などの canvas 要素の関数を使用してこのデータを抽出すると、結果はブラウザー間で一貫性がなくなります。これは、ブラウザーのネイティブ コードがそれぞれ異なるため、レンダリング エンジンが画像を異なる方法でレンダリングするためです。ただし、たとえばサイズが 500kb-1mB の画像について、ブラウザー全体で一貫した画像結果を得る方法はありますか?
私はAJAXソリューションを認識しており、サーバーからその画像のdataURLのjsonオブジェクトを呼び出します。これは元のソースになるため、ブラウザ間で一貫しています。また、サーバーからブラウザーに dataURL をロードすることも、別の解決策になる可能性があります。これらの問題は、パフォーマンスと柔軟性です。他に実行可能な解決策はありますか？クライアント側でできることを調べましたか？
皆さんありがとう！
Ok, after continuing with my own project I discovered an answer which worked for me and would probably suit your purpose.
toDataURL was the mistake, because that reads the 'binary' data into the canvas and NOT the actual pixels. There are inconsistencies between browsers on interpreting that binary, and anyway that binary data is not giving you the pixel info which I assume you are looking for.
To preserve the data You need to take the image (keep original size) into the canvas then use getImageData(x,y,w,h) to load the RGBA pixel data into an array. You can then simply loop through the now 'real' pixel data and process that.
I tried scaling down the image into a manageable size but that wasn't always consistent across browsers. I only needed a section of the image anyway so this method served my purpose, perhaps you could hide the full scale canvas you are working on and present a representative scaled down canvas to the user.