保存图像标签中的图像不上传

Question

I have a google map on my site, I am taking screenshots of it, and storing that in image tags below the map for the user to see.

How can I get the images from those tags and pass them through the form to store them on the PHP Server?

Answer 1

Use a canvas to process the image and get it as a base64 dataurl in a text input of your form:

// img is your image tag
var processCanvas = document.createElement("canvas");
processCanvas.width = img.width;
processCanvas.height = img.height;
processCanvas.getContext("2d").drawImage(img, 0, 0);

// you need to have an <input id=textInput' /> in your form
var textInput = document.getElementById('textInput');
textInput.value = processCanvas.toDataURL('image/jpeg');

Submit your image by posting the form.

</div>