console
var img = new Image();
img.src = getData();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
img.onload = function() {
ctx.drawImage(img, 0, 0);
img.style.display = 'none';
};
var color = document.getElementById('color');
var bg = document.getElementById('bg');
function pick(event) {
var x = event.layerX;
var y = event.layerY;
var pixel = ctx.getImageData(x, y, 1, 1);
var data = pixel.data;
var rgba = 'rgba(' + data[0] + ',' + data[1] +
',' + data[2] + ',' + (data[3] / 255) + ')';
bg.style.background = rgba;
color.textContent = rgba;
}
canvas.addEventListener('mousemove', pick);
function getData(){
return 'data:image/png;base64,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';
}
<html>
<body>
<canvas id="canvas" width="150" height="150"></canvas>
<p id="bg">背景色</p>
<div id="color">色值</div>
</body>
</html>