Question

98

Save fabricjs canvas as image on the pc

rated 0 times [ 99] [ 1] / answers: 1 / hits: 19280 / 9 Years ago, thu, november 19, 2015, 12:00:00

I want to save the Fabric canvas as an image (jpg or png is the same) on the pc, by clicking on a button in my html page. I tried a solution but doesn't work:

function saveF(canvF) {

var imageCanv = canvF.toDataURL('png');

var myBlob = new Blob(['imageCanv'], { type: image/png });

var reader = new FileReader();

reader.onload = function (event) {

    var URL = canvF.toDataURL('png');

    document.getElementById(lnkDownload).href = URL;

};



reader.readAsDataURL(myBlob);}

This is the html tag :

<a class=icon fb href= id=lnkDownload download=canvas.png style=float:left; background-color:red><i class=fa fa-save></i></a>

i founded other solutions but they didn't work

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dominics

Add To Favorites

Follow

Total Points: 424

Total Questions: 99

Total Answers: 107

Location: South Korea

Member since Fri, Sep 11, 2020

4 Years ago

answered 9 Years ago jennie · Accepted Answer

Here is my solution, download the blob (sort of a hack), you can generate text files, or whatever, that a bit more complex.

function saveImage(e) {

    this.href = canvas.toDataURL({

        format: 'jpeg',

        quality: 0.8

    });

    this.download = 'canvas.png'

}

var canvas = new fabric.Canvas('imageCanvas', {

    backgroundColor: 'rgb(240,240,240)'

});

canvas.setWidth(300);

canvas.setHeight(300);







var imageLoader = document.getElementById('imageLoader');

imageLoader.addEventListener('change', handleImage, false);



function handleImage(e) {

    var objects = canvas.getObjects();

    for (var i in objects) {

       objects[i].remove();

    }

    var reader = new FileReader();

    reader.onload = function (event) {

        var img = new Image();

        img.onload = function () {

            var imgInstance = new fabric.Image(img, {

               selectable: 1

            })

            canvas.add(imgInstance);

            canvas.deactivateAll().renderAll();

        }

        img.src = event.target.result;

    }

    reader.readAsDataURL(e.target.files[0]);

}







var imageSaver = document.getElementById('lnkDownload');

imageSaver.addEventListener('click', saveImage, false);



function saveImage(e) {

    this.href = canvas.toDataURL({

        format: 'png',

        quality: 0.8

    });

    this.download = 'canvas.png'

}

div#container {

    padding: 30px;

    font-family: 'verdana', lucida;

}

input {

    background-color: #ccc;

    padding: 0;

    width: 300px;

    color: #777;

}

a{

    color: #777;

    display: block;

    background-color: #ccc; 

    width: 300px;

    padding: 0;

    margin-top: 2px;

    text-decoration:none;

}

<script src=https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js></script>



<div id=container>

    <input type=file id=imageLoader name=imageLoader />

    <canvas id=imageCanvas width=300 height=300></canvas> 

    <a id=lnkDownload href=#>Save image</a>

</div>