时间戳

首页 > 解决方案 > Fabric.js：如何保存没有背景图像的画布图像

javascript - Fabric.js：如何保存没有背景图像的画布图像

问题描述

我是织物帆布的新手。我想将画布保存为没有背景图像的 png 文件。我尝试按照下面的代码保存画布，它保存了背景图像。

在我的代码中

<template>
    <canvas
        ref="can"
        id="canvas"
        width="500"
        height="500"
    ></canvas>
    <button @click="saveImage">save</button>
</template>
<script>
    import { fabric } from 'fabric'
    let canvas = new fabric.Canvas('c')
     mounted() {
         const ref = this.$refs.can
         canvas = new fabric.Canvas(ref)
         canvas.setBackgroundImage("https://www.test.com/background.png", canvas.renderAll.bind(canvas))
         fabric.Image.fromURL("https://www.test.com/pattern.png, function (patternImage) {
             patternImage.set({
                 selectable: true,
                 lockScalingFlip: true,
                 editable: true,
             })
             patternImage.scaleToHeight(120)
             patternImage.scaleToWidth(120)
             canvas.add(patternImage)
         }) 
     },
     method: {
         saveImage() {
             let dataURL = canvas.toDataURL({
                 format: 'png',
                 multiplier: 2,
              })
              let file = new File([dataURL], "canvas.png")      
              saveAs(dataURL, "pretty image.png")
         }
     }
</script>

我尝试这样编码，但它错误canvas._objects.toDataURL({...}) is not a function我这样编码，因为我将只选择画布中没有背景图像的对象

saveImage() {
    let dataURL = canvas._objects.toDataURL({
        format: 'png',
        multiplier: 2,
    })
    let file = new File([dataURL], "canvas.png")      
    saveAs(dataURL, "pretty image.png")
}

如何解决这个问题。感谢

标签： javascriptcanvashtml5-canvasfabricjs

解决方案

您可以在保存画布之前删除背景图像，然后在保存后显示它，不会有人注意到。

canvas.setBackgroundImage(null);
canvas.renderAll();

// ... save your canvas here

canvas.setBackgroundImage(myBgImage)
canvas.renderAll()

由于 iframe 限制，下载无法在此处进行，这是一个工作小提琴

const c = document.querySelector('canvas');
let bg;

const canvas = new fabric.Canvas(c);
canvas.setHeight(window.innerHeight);
canvas.setWidth(window.innerWidth);

var bgImg = new Image();
bgImg.onload = function (img) {
    bg = new fabric.Image(bgImg, {
        width: 500,
        height: 500,
    });
        canvas.setBackgroundImage(bg)
        canvas.renderAll()
};
bgImg.src = "https://i.imgur.com/8rmMZI3.jpg"; 

var object1 = new fabric.Rect({
    fill: '#1565c0',
    left: 150,
    top: 150,
    width: 50,
    height: 50
});

var object2 = new fabric.Circle({
    radius: 15,
    fill: '#990000',
    left: 100,
    top: 100
});

canvas.add(object1, object2); 
canvas.renderAll();

const exportbutton = document.querySelector('button');
exportbutton.onclick = () => {

    canvas.setBackgroundImage(null);
    canvas.renderAll();

    let dataURL = canvas.toDataURL({
        format: 'png',
        multiplier: 2,
    })

    downloadDataUrl(dataURL);   

    canvas.setBackgroundImage(bg)
    canvas.renderAll()
    
}

async function downloadDataUrl(dataURL) {
    const blob = await fetch(dataURL).then(r => r.blob());
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.download = "my_image.png"
    a.href = url;
    a.click();
    URL.revokeObjectURL(url);
    a.remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
<button>Export</button>
<canvas id="c"></canvas>

推荐阅读