javascript - 如何打印或保存在线编辑的图像(使用javascript/jQuery)？

Question

我用 html、css 和 javascript/jquery 做了一个简单的图像处理实验。

我们可以从本地驱动器上传图片并在浏览器中显示。之后我们还可以编辑/标记显示的图像。我用 this jquery 图像标签插件。

然后我想，如何保存/打印编辑后的图像？

这是我的代码片段:

$(function () {
    $(":file").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
});

function imageIsLoaded(e) {
    $('#myImg').attr('src', e.target.result);
    $('#myImg').imageTag();
};

这是真正的实时应用程序:http://nanonimos.com/upload-tag-image/

和this is the source code .

任何线索/建议将不胜感激:)

Answer 1

您可以将整个 div 转换为 Canvas ，然后将 Canvas 转换为数据 uri(png,jpeg)。检查这个Fiddlecanvastoimage了解更多。