最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Save fabricjs canvas as image on the pc - Stack Overflow

programmeradmin3浏览0评论

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

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

Share Improve this question asked Nov 19, 2015 at 14:26 ghiltanasghiltanas 1571 gold badge2 silver badges14 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 12

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>

As a complete function

download_scan() {
      console.log('Downlaoding scan')
      let a = document.createElement('a')
      let dt = this.canvas.toDataURL({
        format: 'png',
        quality: 1,
      })
      dt = dt.replace(/^data:image\/[^;]*/, 'data:application/octet-stream')
      dt = dt.replace(
        /^data:application\/octet-stream/,
        'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=Canvas.png',
      )

      a.href = dt
      a.download = 'canvas.png'
      a.click()
    },
发布评论

评论列表(0)

  1. 暂无评论