2

純粋な JavaScript を使用して、画像からピクセルの色を取得したいと考えています。

私はこのスクリプトを書きましたが、うまくいきませんでした:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Get Pixel</title>

<script type='text/javascript'>
window.onload = function() {
var canvas = document.createElement("canvas");

var pic = new Image(); 
pic.src = 'http://i.imgur.com/hvGAPwJ.png'; 
pic.onload = function() {

canvas.width = pic.width;
canvas.height = pic.height;
var ctx = canvas.getContext("2d");

ctx.drawImage(pic, 0, 0);}

var c = canvas.getContext('2d');
var p = c.getImageData(7, 7, 1, 1).data;
var hex = "RGB = " + p[0]+", "+p[1]+", "+p[2];

document.getElementById("output").innerHTML = hex; 
}
</script>

</head>
<body>
<div id="output"></div>
</body>
</html>

コードを変更する方法、彼は何を正しく機能させますか?

たとえば、「http://i.imgur.com/hvGAPwJ.png」という画像の場合、結果は RGB = 255, 255, 255 になります。

4

3 に答える 3

0

クロス オリジンの制限を解決するには、次の行を追加します。

pic.crossOrigin = "Anonymous";

pic var を定義した直後。

ただし、場合によっては機能しない場合があります。

于 2016-02-11T02:50:33.373 に答える