Question

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

我的目标是让脚本从输入中获取文件，将其放入画布，然后将图像放在x = 10，y = 10坐标图像上，并计算它的rgb和十六进制代码而不提交表单。

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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: