javascript - getting object HTMLImageElement instead of base64 string

Question

This is a continuation to my previous question but the issue is new and the solution from that question didn't help. This is a new question.

Here's the link to my previous question where I asked how to convert canvas to an image: javascript- unable to convert canvas to image data

And I'm hoping to get the base64 encoded string of the image which I can send to a PHP service via AJAX call and PHP service is gonna convert it to image and move it to a specified directory.

Function that converts canvas to image

function convertCanvasToImage(canvas) 
{
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

This is the form I created:

var url = 'url to php service';
var file =  dataURL; //this is the image url that i'm sending
console.log(file);

var formdata = new FormData();
formdata.append("base64image", file);
formdata.append('csrf_test_name',csrf_token);
var ajax = new XMLHttpRequest();
ajax.addEventListener("load", function(event) {
    uploadcomplete(event);
}, false);
ajax.open("POST", url);
ajax.send(formdata);

I tried console.log() the image that canvas returned and this is what I obtained:

 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10dzkAAAgAElEQVR4nGzbZ3Mba5au6fqvJ2JiTs/pPtVV20j0sOm9T3iARqI3IOi9SIoGHqATJe29q/v8jXs+QMWeHT0fnkgGyUgCiRfIi2ut9y9OqYGZ3yKqHWHlttFiCz1nE8Q+XuDiuSb5XEBccYgrDv6si5ZTMOZMzHkLMS6gFspI8TxiOEfkfCS0P1AM1lmcPaJYPcbyNvDDHUqVU5zdTaS1j4hFm3Erg5bxCK0KxXiWUm6OcLaAW46xCzZBNcAOF3FzK8TBIoG7QC7v4AUalqdRquVQZxeQa/PYc2vYc2uUnWUCuYovR+TMEoEVY8oOnhES2jlKVo2au0DZXiVSF/DciDDMUyjOEuerGGqJYm6VaG6DhBahOyW8eB4rrBGVl5BmZ5FmZ1HyLlrJZ37ep1jUyXseOdel7FWpBrMUgwXy3ixGJGLlZLRIxipoh...Hd7sRkseD2ebFF/Bj9btUYEnDzGHRy57XgcDiw2WyYDPdYzFp0dgvXBh0XeiPmYBit2YzBbufR4uDR4kBrd3BtNHHvs6ty3HJru+beoUXn0vPgNaD1Gbl1udFYbWhMFlU2E7du+zTmRWt75MGqw+axYvNYebRpMbmNaF0OzEE/+nQAXcrHpeBAk7BzJTm4zXg4Kdq4afq4nGS4fslyO85x1IizEbWwJzo5Lzu4bfk560Y5agY57SfYawS57sS4akfRFJxc5B1cl7XcVh85Gfo47HvYaFvY6ds5Hvg5GQY4bUY5rofQtAUumgk0XVXXozSXQxX+rnsSt20nmrqFG+URbdHMVSOGphbmrCNw1hG46Dg4aaoxP0c1B0dVD7sFO0cFG0cFG+fKNSeyhjPhBI10zmnqnPP0xRQAD1Pqs7CSV7VV3mCztM5Rbpnz8joXHSPXfQuXPQ9XAy9noxgXE4HT/8pz8X/L/D+QyAVhXuteXgAAAABJRU5ErkJggg==">

It has image tag. Maybe it's because of that; when I pass it to PHP service, it's not able to convert it. This is what it returned me when I debugged

object HTMLImageElement

I tried to convert the above mentioned image tag to base64 using a function like given below but it failed.

function encodeImageFileAsURL(cb) {
    return function(){
        var file = this.files[0];
        var reader  = new FileReader();
        reader.onloadend = function () {
            cb(reader.result);
        }
        reader.readAsDataURL(file);
    }
}

Can anyone help me understand what i am missing here? Thanks a lot!

Reference: https://davidwalsh.name/browser-camera

https://davidwalsh.name/convert-canvas-image

Note, the src of <img> at Question is a valid data URI, though does not properly encode the file. Are you sure that the original image has MIME type "image/png"? How do you draw the image to <canvas> element? Is the original image requested from a different origin? Is the canvas tainted? See CanvasContext2D drawImage() issue [onload and CORS] — guest271314
– guest271314, Commented Dec 15, 2016 at 19:39
You should post the image as a file/blob and not as base64 (it will be ~3x larger upload) — Endless
– Endless, Commented Dec 15, 2016 at 20:36

guest271314 · Accepted Answer · 2016-12-15 19:30:55Z

3

You already have a data URI at the src of the <img> element at variable image. Pass the value of the src of the <img> element to php, not the html <img> element.

var file = image.src; //this is the image url that i'm sending

answered Dec 15, 2016 at 19:30

guest271314

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

javascript - getting object HTMLImageElement instead of base64 string

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related