javascript - HTML 5 Canvas : Uploaded image colour picker

Question

我正在使用 html canvas 和 javascript 创建一个应用程序。您上传并从中选择图像和颜色，但是我遇到了一个问题，我只能从上传图像的一小部分中选择颜色。我已经尝试了一些方法来修复它，但我有点难过。有人有主意吗？我用这个来帮助我:http://www.webdesignerdepot.com/2013/03/how-to-create-a-color-picker-with-html5-canvas/

<canvas width="600" height="300" id="canvas_picker"></canvas>
<div id="hex">HEX: <input type="text"></input></div>
<div id="rgb">RGB: <input type="text"></input></div>

var $files = document.getElementById('file_upload').files[0];
var reader = new FileReader();
reader.onload = imageIsLoaded;

function imageIsLoaded(e) {
    // canvas
    var canvas = document.getElementById('canvas_picker');
    var context = canvas.getContext('2d');
    var $img = $('<img>', { src: e.target.result });

    // Draws Image
    $img.load(function() {
        context.drawImage(this,10, 10);
        $("#loader").hide();
    }); 
}

$('#canvas_picker').click(function(event){
    // getting user coordinates
    var x = event.pageX;
    var y = event.pageY;

    // getting image data and RGB values
    var img_data = canvas.getImageData(x,y , 1, 1).data;
    var R = img_data[0];
    var G = img_data[1];
    var B = img_data[2]; 
    var rgb = R + ',' + G + ',' + B;
    // convert RGB to HEX
    var hex = rgbToHex(R,G,B);
    // making the color the value of the input
    console.log(R);
    console.log(B);
    console.log(G);

    $('#rgb input').val(rgb);
    console.log(rgb);
    $('#hex input').val('#' + hex);
});

function rgbToHex(R, G, B) {
    return toHex(R) + toHex(G) + toHex(B)
}

function toHex(n) {
    n = parseInt(n, 10);
    if (isNaN(n)) 
        return "00";

    n = Math.max(0, Math.min(n, 255));
    return "0123456789ABCDEF".charAt((n - n % 16) / 16)  + "0123456789ABCDEF".charAt(n % 16);
}
reader.readAsDataURL($files);

当我点击小区域外的像素时，它返回为 0。

Answer 1

jsBin demo

修复了一些问题，例如 getImageData 尝试读取 canvas 而不是 context，以及在 XY 10,10 而不是绘制图像0,0.
此外，您可能希望调整 Canvas 大小以适应上传的图像 W/H。

为了防止坐标计算错误(因为您获得的是相对于页面边缘的点击坐标)并获得鼠标在 Canvas 内的精确位置，您可能需要从结果坐标 x, y

中减去 Canvas 左/上偏移量

var $picked = $("#picked"); // Just to preview picked colors
var canvas = $('#canvas_picker')[0];
var context = canvas.getContext('2d');


$("#file_upload").change(function (e) {
  var F = this.files[0];
  var reader = new FileReader();
  reader.onload = imageIsLoaded;
  reader.readAsDataURL(F);  
});

function imageIsLoaded(e) {
  var img = new Image();
  img.onload = function(){
    canvas.width  = this.width;    // If needed? adjust canvas size
    canvas.height = this.height;   // respective to image size
    context.drawImage(this, 0, 0); // Draw image at 0, 0, not at 10, 10
  };
  img.src = e.target.result;
}

$('#canvas_picker').click(function(event){
  var x = event.pageX - $(this).offset().left; // Fixed coordinates
  var y = event.pageY - $(this).offset().top; // respective to canvas offs.
  var img_data = context.getImageData(x,y , 1, 1).data;
  var R = img_data[0];
  var G = img_data[1];
  var B = img_data[2]; 
  var rgb = R + ',' + G + ',' + B ;
  var hex = rgbToHex(R,G,B);
  $('#rgb input').val( rgb );
  $('#hex input').val('#' + hex);
  $picked.append("<span style='background:#"+hex+"'>#"+hex+"</span>");
});

function rgbToHex(R, G, B) {
  return toHex(R) + toHex(G) + toHex(B);
}

function toHex(n) {
  n = parseInt(n, 10);
  if (isNaN(n))  return "00";
  n = Math.max(0, Math.min(n, 255));
  return "0123456789ABCDEF".charAt((n - n % 16) / 16)  + "0123456789ABCDEF".charAt(n % 16);
}

*{margin:0;}
canvas{background:#ddd;}
#picked span{
  display:inline-block;
  width:50px;
  height:50px;
  margin:3px;
  text-align:center;
  text-shadow:1px 1px 1px #000;
  font:8px/50px Arial;
  color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas width="600" height="300" id="canvas_picker"></canvas><br>
<input type="file" id="file_upload"><br>
<div id="hex">HEX: <input type="text"></div>
<div id="rgb">RGB: <input type="text"></div>

<div id="picked"></div>