Question

使用以下代码保存或打印时，如何从最终结果中排除画布背景图像？旁注：保存/打印似乎不是在小提琴中工作，而是在我的机器/服务器上工作。希望代码足以让您指出正确的方向！

＆＃13;

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);
}

＆＃13;

canvas {
  border: 1px solid #dddddd;
  margin-top: 10px;
}

＆＃13;

<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>

＆＃13;

Answer 1

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>

Answer 2

我最后做的是使用CSS设置我的背景图片：

canvas { background-image: url("https://i.imgur.com/4yOoOzl.jpg"); }

使用fabricjs（1.7.20）从保存/打印中排除背景图像？

2 个答案: