イメージから色を取得するのにhtml5 Canvas
を使用しています。このために私はJavaScriptで次のコードを書いた:キャンバスがクロスオリジンデータによって汚染されているため、キャンバスからイメージデータを取得できません
http://jsfiddle.net/8dQSS/1/(Plsの例外を確認するために、コンソールをチェックしてください)上記のコードは、次の例外をスローして
function getImageColor() {
var colors = [];
var image = new Image();
image.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
// Draw the image in canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
// Get the pixel data
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// Loop through imageData.data - an array with 4 values per pixel: red, green, blue, and alpha
for (var x = 0; x < imageData.width; x++) {
for (var y = 0; y < imageData.height; y++) {
var index = 4 * (y * imageData.width + x);
var r = imageData.data[index];
var g = imageData.data[index + 1];
var b = imageData.data[index + 2];
var a = imageData.data[index + 3];
colors.push("rgb(" + r + "," + g + "," + b + ")");
}
}
};
image.src = "http://www.xxxxxxxxxxxx.com/demos/assets/image.jpg";
}
:
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18
は誰でもできこの問題の解決方法を教えてください。
を固定していましたか? – Bergi
多分、それは診断するのに役立つでしょう(これは古い投稿です)。私はキャンバスから、私はSVG要素から作成されたデータURIから自分自身を生成しました。 FFとSafariでうまく動作します。 – LeeGee
SVG要素からJavaScriptを使って動的に作成した画像からこれを取得し、データURIとして渡します。それは苦痛で、「Uncaught SecurityError:ユーザエージェントのセキュリティポリシーを突破しようとしました」と言っています。クロムも賢明にしようとしていますか? – LeeGee