添加新图层后保存 camanjs 图像

Saving camanjs image after adding new layer

本文关键字:保存 camanjs 图像 图层 新图层 添加      更新时间:2023-09-26

我正在尝试下载在应用新图层后使用 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();
    });
});

尝试以下代码片段,将具有多个图层的画布图像转换为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
    }