在上传图像时以黑白绘制图像（在画布中）答案

【问题标题】：draw image (in canvas) in black and white on-upload the image在上传图像时以黑白绘制图像（在画布中）
【发布时间】：2018-12-25 04:18:31
【问题描述】：

我有两个代码：

1st ：允许我在图片上传后立即绘制。
第二个：使用画布绘制黑白图片。

我想在上传图片时画黑白，谢谢:)

第一个代码

var dz_cart_f_photo = document.getElementById('dz_cart_f_photo');
dz_cart_f_photo.addEventListener('change', handleImage, false);
var canvas = document.getElementById('dz_fcart_f_canvas');
var ctx = canvas.getContext('2d');
function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function(event) {
    var img = new Image();
    img.onload = function(){ ctx.drawImage(img, 0, 0); }
    img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);     
}

第二个代码

function drawImage(imageObj) {
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var x = 69;
  var y = 50;

  context.drawImage(imageObj, x, y);

  var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
  var data = imageData.data;

  for(var i = 0; i < data.length; i += 4) {
    var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
    // red
    data[i] = brightness;
    // green
    data[i + 1] = brightness;
    // blue
    data[i + 2] = brightness;
  }

  // overwrite original image
  context.putImageData(imageData, x, y);
}

var imageObj = new Image();
imageObj.onload = function() {
  drawImage(this);
};
imageObj.src = '88bee903c59cb3eb1d42453f1eaa2ca2.png';

【问题讨论】：

标签： javascript html5-canvas

【解决方案1】：

我会这样做：

我不知道你想如何设置画布的宽度和高度。在我的代码中，我有：

canvas.width = img.width;
canvas.height = img.height;

这使得画布与上传的图像大小相同。或者你可以这样做：

canvas.width = img.width + x;
canvas.height = img.height + y;

其中x 和y 表示您在开始时定义的偏移量。

//the canvas
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = 69;
var y = 50;

// the input type="file" event listener
dz_cart_f_photo.addEventListener('change', handleImage, false);

function handleImage() {
  var file = dz_cart_f_photo.files[0];
  var reader = new FileReader();

  reader.addEventListener(
    "load",
    function() {
      var img = new Image();
      img.src = reader.result;
      img.onload = function() {
        // set the canvas.width and canvas.height
        canvas.width = img.width;
        canvas.height = img.height;
        drawImage(img);
      };
    },
    false
  );

  if (file) {
    reader.readAsDataURL(file);
  }
}

function drawImage(imageObj) {
  context.drawImage(imageObj, x, y);

  var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
  var data = imageData.data;

  for (var i = 0; i < data.length; i += 4) {
    var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
    // red
    data[i] = brightness;
    // green
    data[i + 1] = brightness;
    // blue
    data[i + 2] = brightness;
  }

  // overwrite original image
  context.putImageData(imageData, x, y);
}

<p><input type="file" id="dz_cart_f_photo"></p>
<canvas id="myCanvas"></canvas>

希望对你有帮助

【讨论】：