データurl/uri画像からピクセルカラーを抽出する

Question

これは基本的に、私がこのスクリーンショットをdataURLまたはdataURI変換（どちらが正しいかわからない）で直接ウェブサイトにアップロードしたプロジェクトです。スクリーンショットからピクセルの相対的な情報を得ることができるようにしています。

私はバックグラウンドイメージのプロパティにデータURLを挿入していますが、私のプロジェクトの他の機能にはキャンバスを使用できませんでした。

特定のピクセルの特定の色を特定の位置に取得したいと考えています。私はdataURLを含む文字列を持っています。そこからピクセルの色を抽出する方法はありますか？データURLに精通していないものについては

は、ここに私のjavascriptのが私のスクリーンショットの1のために作成したものです：

pastebin.com/NRad8nQr

私はこの結果に多くのことを発見しましたしかし、私はキャンバスを使用しない単一のものを見つけることができません。

Answer 1

残念ながら、ピクセルアクセスのための唯一の組み込み方法はキャンバスを使用することです。

DataURL自体はBase64でデコードできますが、圧縮されたバイナリデータが得られます。

を：あなたは、たとえば、あなたがして https://github.com/gchudnov/jpeg-asm/blob/master/README.mdを使用してできJPEGすることを制限する場合など

JPEG、PNG、GIFので、あなたはすべてサポートしているフォーマットのデコード、実際の画像を再実装する必要があるピクセルデータを取得するには

// pseudo code 
var jpegData = atob(dataUrl) 
var pixels = decodeJPEG(jpegData) 
var color = pixels.slice((y * width + x) *4, 4) 

私はそれが唯一のPNGのためだa working example for PNG on Glitch