javascript - 图像输入到 Canvas 和颜色选择器

Question

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

我的目标是让脚本从输入中获取文件，将其放入 Canvas ，然后以图像上的 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>

文件到 Canvas ，无需提交代码

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

Answer 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

当图像加载并绘制到 Canvas 时，只需调用您的函数:

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

const el = (sel, par) => (par || document).querySelector(sel);

const elRGB = el("#rgb");
const elHEX = el("#hex");
const elUpload = el("#uploadImage");
const ctx = el("#canvas").getContext `2d`;

const pos = {
  x: 10,
  y: 10
};

const handleImage = (ev) => {
  Object.assign(new FileReader(), {
    onload(evt) {
      Object.assign(new Image(), {
        src: evt.target.result,
        onload() {
          ctx.canvas.width = this.width;
          ctx.canvas.height = this.height;
          ctx.drawImage(this, 0, 0);
          getColorAt(pos.x, pos.y);
        }
      });
    }
  }).readAsDataURL(ev.target.files[0]);
};

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

const getColorAt = (x, y) => {
  const imgData = ctx.getImageData(x, y, 1, 1).data; // Get pixel data at X,Y
  const r = imgData[0];
  const g = imgData[1];
  const b = imgData[2];
  const hex = rgbToHex(r, g, b);
  // Send converted values to inputs
  el("#rgb").value = `rgb(${r},${g},${b})`;
  el("#hex").value = hex;
};

elUpload.addEventListener("change", handleImage);

#canvas {
  display: block;
  max-height: 150px;
}

Read image pixel color at position: x=10 y=10:<br>
<label>Image: <input type="file" id="uploadImage"></label>
<canvas id="canvas"></canvas>
<div>HEX: <input id="hex" type="text"></div>
<div>RGB: <input id="rgb" type="text"></div>