saving an image that has been manipulated with caman.js

Question

guys im really struggling with this ive been trying for days but no luck, I have manipulated an image with camanjs and then save it to disk with canvas.toblob(), here is the code

Caman("#theCanvas", "images/1.jpg", function () {

    this.greyscale()
        .noise(33.3)
        .render(function(){
            for(i=1;i<=3;i++){
                draw(2);
                draw(3);
                draw(4);
                draw(8);
            }
            for(i=1;i<=29;i++){
                draw(1);
                draw(5);
                draw(6);
                draw(7);
            }
            var canvas = document.getElementById("theCanvas");
            canvas.toBlob(function(blob) {
                saveAs(blob, "image.jpg");
            });
        });
});

when the image is saved, it is saved with the .greyscale effects and the .noise() effects, but the changes i make to the image inside the render() function are not present in the image, and I am not sure how to get over this, I have tried using .reloadCanvasData() but it didnt work i think I am not using it properly, anyone with a solution?

Answer 1

Maybe you can try

.render(function(){
  var base64 = this.toBase64()
  download(base64, 'image.jpg', 'image/jpeg')
})

The download function comes from http://danml.com/download.html

Answer 2

I have solved this problem with my following trick. You can use it

 Caman("#canvas", function() {
          //console.log(this.toBase64());
        let a  = document.createElement('a');
            a.href = this.toBase64();
            a.download = Date() +'_image.png';
            a.click();
        });