Cannot read property 'width' of undefined whille converting image into base64?

Question

I want to convert my image into base64 format and send to server .I tried to convert my image base64 but getting error this Cannot read property 'width' of undefined function

getBase64Image(img) {
            // Create an empty canvas element
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;

            // Copy the image contents to the canvas
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);

            // Get the data-URL formatted image
            // Firefox supports PNG and JPEG. You could check img.src to
            // guess the original format, but be aware the using "image/jpg"
            // will re-encode the image.
            var dataURL = canvas.toDataURL("image/png");

            return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
        }

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(){
 // alert()
  $('#fileId').on('change', function (e) {
            console.log('ddd');
            var file = e.target.files[0];
            console.log(getBase64Image(handleImage(e)))
        })
})

here is my code

https://jsbin.com/zagagivuje/edit?html,js,console,output

I attached one image and try to get base64 string then I am getting this error

You're defining `canvas` in `getBase64Image`, but you are trying to use it in `handleImage` where it doesn't seem to be in scope. — Mark, Aug 17 '18 at 04:46
can you please suggest the best way actually I want to convert my image into `base64` and send to server to that they will save on `db` — user5711656, Aug 17 '18 at 04:50
Follow this link https://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript — DHARMENDRA SINGH, Aug 17 '18 at 04:56

UtkarshPramodGupta · Answer 1 · 2018-08-17T04:51:14.840

0

Return some value from your handleImage() function.

Your function handleImage() does not return any value. So, when you are doing console.log(getBase64Image(handleImage(e))) in the last lines of your code, nothing would get passed in as a parameter for the function getBase64Image(). Thus, the value of img in the function getBase64Image() is undefined and so you get the error Cannot read property 'width' of undefined when you try to read img.width on the third line of your code where img is undefined.

edited Aug 17 '18 at 04:51

answered Aug 17 '18 at 04:50

UtkarshPramodGupta

7,486
7
30
54

can you please suggest how I will get `base64` string – user5711656 Aug 17 '18 at 04:51
Well, I have no idea about that. You should create another post to get the answer to this question of you. But, the bug you are getting is because of the reason I told you. :) – UtkarshPramodGupta Aug 17 '18 at 04:52

score 0 · Accepted Answer · answered Aug 17 '18 at 05:08

Checkout this link

What I'm doing here is basically create an image from file url and draw that image on canvas and rest is your code.

function getBase64Image(img) {
  // Create an empty canvas element
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  // Copy the image contents to the canvas
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, img.width, img.height);

  // Get the data-URL formatted image
  // Firefox supports PNG and JPEG. You could check img.src to
  // guess the original format, but be aware the using "image/jpg"
  // will re-encode the image.
  var dataURL = canvas.toDataURL("image/png");

  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

function handleImage(e, callback) {
  var img = new Image();
  img.onload = function(event) {
    let r = getBase64Image(img);
    callback(r);
  };
  img.src = URL.createObjectURL(e.target.files[0]);
}


$(function() {
  // alert()
  $('#fileId').on('change', function(e) {
    var file = e.target.files[0];
    handleImage(e, function(r) {
      console.log(r);
    });
  })
})

Cannot read property 'width' of undefined whille converting image into base64?

2 Answers2