图像输入到画布和颜色选择器答案

【问题标题】：Image input to canvas and color picker图像输入到画布和颜色选择器
【发布时间】：2023-04-06 13:44:01
【问题描述】：

我找到了 2 个脚本，一个用于将文件输入中的图像加载到画布中，另一个脚本是画布中图像的颜色选择器，但找不到将它们融合到一个脚本中的方法，我是 javascript 新手。

我的目标是让脚本从输入中获取文件，将其放入画布中，然后以图像上的 x=10,y=10 坐标为目标，并在不提交表单的情况下计算其 rgb 和 hex 代码。

html

<label>Image File:</label><br/>
<input type="file" id="uploadImage" name="uploadImage"/>
<canvas id="cvs" ></canvas>
<div id="hex">HEX: <input type="text"></input></div>
<div id="rgb">RGB: <input type="text"></input></div>

文件到画布而不提交代码

  var imageLoader = document.getElementById('uploadFile');
        imageLoader.addEventListener('change', handleImage, false);
        var canvas = document.getElementById('cvs');
        var ctx = canvas.getContext('2d');


        function handleImage(e) {
            var reader = new FileReader();
            reader.onload = function (event) {
                var img = new Image();
                img.onload = function () {
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.drawImage(img, 0, 0);
                }
                img.src = event.target.result;
            }
            reader.readAsDataURL(e.target.files[0]);
        }

我想和上面的工作脚本一起做这样的事情。

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);
        }
        $('#cvs').click(function(event){
          // getting image data and RGB values
          var img_data = ctx.getImageData(10, 10, 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
          $('#rgb input').val(rgb);
          $('#hex input').val('#' + hex);
        });

【问题讨论】：

</input> ?这不是必需的，input 是一个 Void 元素，它会自动关闭。

标签： javascript jquery html

【解决方案1】：

创建一个带有两个参数的函数，而不是 $('#cvs').click(function(event){：

function getColorAt(x, y) { // <<<<<< INSTEAD OF CLICK

比在你的函数中使用x, y 参数：

var img_data = ctx.getImageData(x, y, 1, 1).data; // <<<<< USE PARAMS

当图像被加载并绘制到你的画布时，只需调用你的函数：

getColorAt(10, 10); // <<<<<<<<<<<<<< GET COLOR!

var imageLoader = document.getElementById('uploadImage');
imageLoader.addEventListener('change', handleImage);

var canvas = document.getElementById('cvs');
var ctx = canvas.getContext('2d');

function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function(event) {
    var img = new Image();
    img.onload = function() {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      getColorAt(10, 10); // <<<<<<<<<<<<<< GET COLOR!
    }
    img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);
}

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

function getColorAt(x, y) { // <<<<<< INSTEAD OF CLICK
  // getting image data and RGB values
  var img_data = ctx.getImageData(x, y, 1, 1).data; // <<<<< USE PARAMS
  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
  $('#rgb input').val(rgb);
  $('#hex input').val('#' + hex);
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>Image File:</label><br>
<input type="file" id="uploadImage" name="uploadImage">
<canvas id="cvs"></canvas>
<div id="hex">HEX: <input type="text"></div>
<div id="rgb">RGB: <input type="text"></div>

【讨论】：