Question

这是我的用例：

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

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

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

谢谢！

Answer 1

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

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

所以你可以做的是创建一个与你的图像元素大小相同的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();

OR与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);

如何将最终图像的快照保存到图像文件（jpg，png等）

1 个答案: