javascript - 添加新图层后保存 camanjs 图像

Question

我正在尝试在应用新图层后下载使用 camanjs 创建的画布（使用 canvas.toBlob()）。我只能让它下载没有应用层的图像。我可以右键单击并“另存为...”以获取正确的图像，但下载的文件不正确。

Caman("#myImage", function() {

    var canvas = document.getElementById('myImage');
    var context = canvas.getContext('2d');

    this.newLayer(function() {

        var imageObj = new Image();
        imageObj.src = "some_image.png";

        imageObj.onload = function() {
            context.drawImage(imageObj);
        };
    });
    this.render(function() {
        saveCanvas();
    });
});

Answer 1

试试下面的代码片段，它将具有多个图层的画布图像转换为 base64 并保存为 JPEG。如果您想以“png”等其他格式保存，只需在下面的代码中给出“download.download = 'image.png'”

saveCanvas(){
        var download = document.createElement('a');//Create <a> tag
        download.href = document.getElementById('myImage').toDataURL(); //convert canvas image with multiple layers to base64
        download.download = 'image.jpeg'; // Mention the file name and format to be downloaded
        download.click();// Trigger click event to downkload the image
    }