[英]html5: canvas.getImageData not working correctly - Why?
我嘗試從我的畫布背景圖像中獲取所選像素的顏色,但我得到的(作為顏色)是0000.你能幫助我嗎? 我的錯誤在哪里?
我的代碼(js):
var canvas;
var mouse_position = [];
var color;
$(document).ready(function(){
canvas_element = $('<canvas></canvas>');
canvas = canvas_element.get(0).getContext("2d");
canvas_element.appendTo('body');
init_canvas();
});
function init_canvas(){
var img = new Image();
img.src = 'static/img/albatros.jpg';
img.width = 600;
img.height = 800;
canvas.drawImage(img, 0, 0);
$(document).mousemove(function(e){
if(e.offsetX){
mouse_position.x = e.offsetX;
mouse_position.y = e.offsetY;
}else if(e.layerY){
mouse_position.x = e.layerX;
mouse_position.y = e.layerY;
}
show_color();
});
}
function show_color(){
color = canvas.getImageData(mouse_position.x,mouse_position.y,1,1).data;
console.info("red: " + color[0] + " green: " + color[1] + " blue: " + color[2] + "alpha: " +color[3]);
}
我寫了一個新版本的腳本,現在,它正在工作。 我誤解了getImageData參數。 這是新版本:
var path = 'static/img/albatros.jpg',
color = new Array();
img = new Image();
img.src=path;
canvas = document.createElement('canvas');
canvas.id = 'canvas';
canvas.width = img.width;
canvas.height = img.height;
ccontext = null;
$(document).ready(function(){
$('body').prepend(canvas);
init_canvas();
});
function init_canvas(){
ccontext = canvas.getContext("2d");
ccontext.drawImage(img, 0, 0);
imgData = ccontext.getImageData(0, 0, $('#canvas').width(), $('#canvas').height());
for(i = imgData.data.length; i--;){
color[i] = imgData.data[i];
}
}
$('#canvas').live('mousemove', function (e) {
var offset = $('#canvas').offset();
var eX = e.pageX - this.offsetLeft;
var eY = e.pageY - this.offsetTop;
var z = eY * this.width * 4;
var s = eX * 4;
console.info("red: " + imgData.data[z+s] + " green: " + imgData.data[z+s+1] + " blue: "+ imgData.data[z+s+2] + ' alpha: ' +imgData.data[z+s+3]);
});
我知道這是一個老問題,只是遇到了同樣的問題,但你可以這樣做:
//Get the mouse position IN canvas
rect = canvas_element.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top
//Get the data of the 1x1 px
imageData = canvas.getImageData(x, y, 1, 1).data;
函數getImageData()
通過畫布中的位置獲取數據, 而不是整個頁面 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.