以黑白方式绘制图像（在画布中）上传图像

Question

I have two code :

• 1st : Allows me to draw the picture as soon as it is uploaded.
• 2nd : Drawing the picture in black and white using canvas.

I want to draw the image when it is uploaded in black and white, thanks :)

1st code

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

2nd code

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

Answer 1

This is how I would do it:

I don't know how do you want to set the width and the height of your canvas. In my code I have:

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

which makes the canvas the same size as the image uploaded. Alternatively you may do:

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

Where x and y represent the offset you defined at the beginning.

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

I hope it helps