添加新圖層後保存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 
    }