0

这是我的用例：

我的应用程序允许用户配置具有多种选项的产品。其中一些选项是用户可以为产品的许多区域选择的颜色。我正在使用 imagemapster 显示产品的“空白”图像（即...无颜色），并允许他们单击图像的不同区域（或从下拉列表中选择）以选择他们认为合适的颜色选项。

用户完成后，我希望能够将生成的图像（使用所选颜色）保存为 jpg 或 png 文件，以便存储回服务器上。然后，该图像文件将被应用程序的其他区域使用，在这些区域我无法使用 imagemapster 加载“空白”图像并使用 imagemapster 重新选择颜色选择。

这可行吗？如果是这样，谁能指出我如何实现这一目标的正确方向？

谢谢！

4

1 回答 1

0

我不确定它是否与 imagemapster 兼容，因为我从未使用过这个。

但是，由于 imagemapster 似乎使用常规img元素，并且在 JavaScript 中可以将 a 的内容转换为canvasbase64 字符串，我认为您可以找到一种解决方法。

所以你可以做的是创建一个canvas与你的图像元素大小相同的：

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/

然后使用提交的 HTML 表单将其上传到您的服务器，您可以将此 base64 字符串作为hidden input示例传递给该表单：

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

base64Input.value = dataURL;

form.submit();

或使用 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);
于 2015-07-16T15:55:29.167 回答