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绘制的。<登记/> 此外，您可能希望将画布大小调整为上传的图像W / H.

为了防止坐标错误计算（导致您获得与页面边缘相对应的点击坐标）并获得鼠标在画布中的准确位置，您可能希望从结果坐标x，y

中减去画布偏移左/上方

＆＃13;

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);
}

＆＃13;

*{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;
}

＆＃13;

<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>

＆＃13;

Answer 2

当我尝试你的代码时，它运行得很好，除了鼠标与选择器没有很好地对齐。这是因为您在（10,10）坐标处渲染图像，但是您得到鼠标位置（x，y）。

// I replaced the following code
var $img = $('<img>', { src: e.target.result });
$img.load(function() {
    context.drawImage(this,10, 10);
    $("#loader").hide();
}); 
// By this one
var img = new Image();
$img.load(function() {
    context.drawImage(this,10, 10);
    $("#loader").hide();
}); 
img.src = e.target.result;

避免创建未真正使用的HTML元素。我还将canvas_picker的click事件的设置放在DOM Ready中，但我认为这不是问题。我还修复了点击功能中的画布问题。

// getting image data and RGB values
var canvas = document.getElementById('canvas_picker');
var context = canvas.getContext('2d');
var img_data = context.getImageData(x,y , 1, 1).data;

HTML 5 Canvas：上传的图像颜色选择器

2 个答案: