0

Here is my use case:

My application allows the user to configure products with numerous options. Some of those options are colors which can be selected by the user for numerous areas of the product. I am using imagemapster to display a "blank" image (ie...no colors) of the product and allow them to click on the different areas of the image (or select from dropdowns) to select the color options as they see fit.

When the user is finished, I would like to be able to save the resulting image (with the selected colors) to a jpg or png file for storage back on the server. This image file will then be used by other areas of the application where it isn't feasible for me to use imagemapster to load the "blank" image and re-select the color selections using imagemapster.

Is this feasible? And if so, can anyone point me in the right direction of how to accomplish this?

Thanks!

Scott Davis
  • 3
  • 2

1 Answers1

0

I am not sure if it would be compatible with imagemapster as I have never used this one.

However, as imagemapster seems to use regular img elements, and as it is possible in JavaScript to convert the content of a canvas in a base64 string, I think you could find a workaround.

So what you could do, is create a canvas of the same size as your image element:

var image = document.querySelector('#imagemapster-element');
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

canvas.height = image.height;
canvas.width = image.width;
context.drawImage(image, 0, 0);

var dataURL = canvas.toDataURL('image/png');
console.log('image size', dataURL.length);
canvas = null;

http://jsfiddle.net/FloSchieldBobby/0p7hd861/

Then upload it to your server using a submitted HTML form to which you would pass this base64 string as a hidden input for instance :

var form = document.querySelector('#submit-image-form');
var base64Input = document.querySelector('#image-data-field');

base64Input.value = dataURL;

form.submit();

OR with an XMLHttpRequest

var data = new FormData();
data.append('imageData', dataURL);

var request = new XMLHttpRequest();
request.open('POST', '/upload/image', true);

request.onreadystatechange = function() {            
    if (request.readyState == 4) {
        if (request.status >= 200 && request.status < 400) {
            console.log('Great! The image was successfully uploaded');
        } else {
            console.log('upload error', request.status, request.statusText, request);
        }
    }
};

request.send(data);
Flo Schild
  • 5,104
  • 4
  • 40
  • 55