Javascript 无法从canvas getImageData获取正确的数据
这是问题的继续,源代码可以在这里找到 我在这里面临的问题是,我期望它输出的颜色是不正确的,似乎是相当随机的值。在此方面的任何帮助都将不胜感激Javascript 无法从canvas getImageData获取正确的数据,javascript,html,canvas,google-chrome-extension,html5-canvas,Javascript,Html,Canvas,Google Chrome Extension,Html5 Canvas,这是问题的继续,源代码可以在这里找到 我在这里面临的问题是,我期望它输出的颜色是不正确的,似乎是相当随机的值。在此方面的任何帮助都将不胜感激 active = false; imgData = canvas = canvasContext = pixelData = ""; chrome.extension.onMessage.addListener(function(request, sender, sendResponse) { if(request.action == '
active = false;
imgData = canvas = canvasContext = pixelData = "";
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if(request.action == 'toggle'){
if(active){
active = false;
$('#colorInfoContainer').remove();
console.log(active);
}else{
active = true;
$('body').prepend("<div id=\"colorInfoContainer\" style=\"color: #000; text-align: center; top:0; width: 200px; position: fixed; left: 60%; margin-left: -100px; height: 15px; margin-top: -5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fff; padding: 5px 5px 5px; font: bold 14px Arial; border: 3px solid; z-index: 999999999999;\"><div id=\"colorInfo\" style=\"display: block;\">Color Info</div></div>");
console.log(active);
fill_canvas();
}
}
});
function fill_canvas(){
if(active){
chrome.extension.sendMessage({action: 'capture'}, function(response) {
canvas = document.createElement('canvas');
canvas.width= document.documentElement.clientWidth;
canvas.height= document.documentElement.clientHeight;
canvasContext = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
canvasContext.drawImage(img, 0, 0);
}
img.src = response.imageUrl;
console.log(img.src);
});
}
}
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while(element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
$(document).ready(function(){
setInterval(fill_canvas,1000);
$(window).mousemove(function(e) {
if(active){
//cache the position of canvas:
var canvasPos = getPosition(canvas),
dx = canvasPos.x,
dy = canvasPos.y;
//getting the correct color from pixels
var x = e.clientX - dx,
y = e.clientY - dy;
//force x and y to stay within canvas:
x = (x < 0) ? 0 : (x > canvas.width - 1) ? canvas.width - 1 : x;
y = (y < 0) ? 0 : (y > canvas.height - 1) ? canvas.height - 1 : y;
pixelData = canvasContext.getImageData(x, y, 1, 1).data;
//console.log(canvasContext);
//pixelData = canvasContext.getImageData(e.clientX,e.clientY, 1, 1).data;
//console.log(x+','+y);
console.log(pixelData);
$('#colorInfoContainer').css('background-color','rgba('+pixelData[0]+', '+pixelData[1]+', '+pixelData[2]+', '+pixelData[3]+')')
}
});
});
上面提到的代码创建了一个div,它应该与鼠标下的div颜色相同
编辑:根据@Ken-Abdias软件的更新进行更新。但还是失败了。需要帮助强>
干杯 请将有问题的代码作为帖子的一部分发布。@Ken AbdiasSoftware就是这么做的@Ken Abdias软件根据您的更新进行了更新,但仍然失败。需要帮助!对不起,这件事我帮不了你。我没有chrome扩展环境设置来正确测试和检查。@Ken AbdiasSoftware感谢您的帮助。这是可行的,不是100%准确,但输出正确率为90%。因为我想通过名字来识别颜色。它也能做到这一点。谢谢
chrome.browserAction.onClicked.addListener(function(tab) {
console.log('button clicked');
chrome.tabs.sendMessage(tab.id, { action: 'toggle' });
});
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if (request.action == 'capture') {
chrome.tabs.captureVisibleTab(null, { 'format':'png' }, function(dataUrl) {
sendResponse({ imageUrl: dataUrl });
});
}
return true;
});