Save fabricjs canvas as image on the pc
14,292
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>
Comments
-
ghiltanas almost 2 years
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
-
ghiltanas over 8 yearsi tried the save function and it works, just a thing: the image backgroud is black why? The canvas container for me cover all the body(that is white),and so the canvas and the fabric canvas
-
SilentTremor over 8 yearsagain what's black? in my example on in your case?
-
ghiltanas over 8 yearsi just used your js function to save the canvas as image in my js file, but with my html and css. It works, in the canvas.png i see all the figure i drawed, but the backgroud is black.Maybe i have to set canvas.backgroundcolor property?
-
ghiltanas over 8 yearsEDIT: it's a windows foto problem sigh, with paint i see the image correctly. Thanks again
-
Kaiido over 8 yearsnote that
quality
parameter only works on'jpeg'
format -
SilentTremor over 8 years@Kaiido typo, indeed only jpeg has quality percent.