gpt4 book ai didi

javascript - 使用fabricjs(1.7.20)从保存/打印中排除背景图像?

转载 作者:行者123 更新时间:2023-12-03 02:44:32 32 4
gpt4 key购买 nike

使用以下代码保存或打印时,如何从最终结果中排除 Canvas 背景图像?旁注:保存/打印似乎在 fiddle 中不起作用,但在我的机器/服务器上起作用。希望这些代码足以让您为我指明正确的方向!

var canvas = new fabric.Canvas("c");
canvas.setHeight(616);
canvas.setWidth(446);
canvas.setBackgroundImage('https://i.imgur.com/4yOoOzl.jpg', canvas.renderAll.bind(canvas), {});

// Save
function download(url, name) {
// make the link. set the href and download. emulate dom click
$('<a>').attr({
href: url,
download: name
})[0].click();
}

function downloadFabric(canvas, name) {
// convert the canvas to a data url and download it.
download(canvas.toDataURL({
multiplier: 2
}), name + '.png');
}

// Print
function printCanvas() {
var dataUrl = document.getElementById('c').toDataURL( /* data multiplier?*/ ); //attempt to save base64 string to server using this var
var windowContent = '<!DOCTYPE html>';
windowContent += '<html>'
windowContent += '<head><title>Print canvas</title></head>';
windowContent += '<body>'
windowContent += '<img src="' + dataUrl + '" onload=window.print();window.close();>';
windowContent += '</body>';
windowContent += '</html>';
var printWin = window.open('', '', 'width=340,height=260');
printWin.document.open();
printWin.document.write(windowContent);
}
canvas {
border: 1px solid #dddddd;
margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<canvas id="c"></canvas><br>
<button onclick="downloadFabric(canvas,'canvasname');">Download</button>
<button onclick="printCanvas()">Print</button>

最佳答案

function downloadFabric(canvas, name) {
// convert the canvas to a data url and download it.
var bgImage = canvas.backgroundImage;
canvas.backgroundImage = null;
canvas.renderAll();
download(canvas.toDataURL({
multiplier: 2
}), name + '.png');
canvas.setBackgroundImage(bgImage, canvas.renderAll.bind(canvas))
}

或者在下载之前,您可以设置canvas.backgroundImage = null,并在下载后再次插入该图像。

演示

var canvas = new fabric.Canvas("c");
canvas.setHeight(616);
canvas.setWidth(446);
canvas.setBackgroundImage('https://i.imgur.com/4yOoOzl.jpg', canvas.renderAll.bind(canvas), {crossOrigin:"anonymous"});
canvas.add(new fabric.Circle({radius:50}))
// Save
function download(url, name) {
// make the link. set the href and download. emulate dom click
$('<a>').attr({
href: url,
download: name
})[0].click();
}

function downloadFabric(canvas, name) {
// convert the canvas to a data url and download it.
var bgImage = canvas.backgroundImage;
canvas.backgroundImage = null;
canvas.renderAll();
download(canvas.toDataURL({
multiplier: 2
}), name + '.png');
canvas.setBackgroundImage(bgImage, canvas.renderAll.bind(canvas))
}

// Print
function printCanvas() {
var dataUrl = canvas.toDataURL( /* data multiplier?*/ ); //attempt to save base64 string to server using this var
var windowContent = '<!DOCTYPE html>';
windowContent += '<html>'
windowContent += '<head><title>Print canvas</title></head>';
windowContent += '<body>'
windowContent += '<img src="' + dataUrl + '" onload=window.print();window.close();>';
windowContent += '</body>';
windowContent += '</html>';
var printWin = window.open('', '', 'width=340,height=260');
printWin.document.open();
printWin.document.write(windowContent);
}
canvas {
border: 1px solid #dddddd;
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<canvas id="c"></canvas><br>
<button onclick="downloadFabric(canvas,'canvasname');">Download</button>
<button onclick="printCanvas()">Print</button>

关于javascript - 使用fabricjs(1.7.20)从保存/打印中排除背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48155948/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com