CODEWITHSUNDEEP
javascripthtml5-canvas
farhat
farhat

Reputation: 25

draw image (in canvas) in black and white on-upload the image

I have two code :

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

Upvotes: 1

Views: 1344

Answers (1)

enxaneta
enxaneta

Reputation: 33044

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

Upvotes: 1

Related Questions