使用Paper.js将带有光栅图像的画布导出为png

Question

我是Paper.js的新手，我正在使用Paper.js创建一个简单的绘图工具，并下载带有背景图像的画布。我正在尝试filesaver.js和blob，但是，我在下载以光栅图像为背景的画布时遇到了问题。如有任何帮助或建议，我们将不胜感激。

我试过了：

''

HTML:

//button to download
<button href="#" class="btn btn-primary" id="save-canvas" 
onclick="exportPNG()">Save</button>
//canvas
<canvas class="canvas" resize id="canvas"></canvas>
//image
<img src="image/image.jpg" id="image">

JS:

function exportPNG() {
var canvas = document.getElementById('canvas');
canvas.toBlob(function (blob) {
saveAs(blob, 'paper.png');
});
}

// Setup Paper
paper.setup(document.querySelector('canvas'));
//Image Layer
var imageLayer = new Layer({insert: false});
var image = new Raster('image');
image.position = view.center;
project.layers.push(imageLayer);
imageLayer.addChild(image);
imageLayer.activate();

''

Answer 1

如果我理解你的请求，你可以简单地完成
不过也有一些问题，比如在将画布内容导出为图像之前，需要等待加载图像并绘制场景。。。

这是一个演示一种方法的草图。

// Create a raster that will be used as background.
const raster = new Raster({
crossOrigin: 'anonymous',
source: 'http://assets.paperjs.org/images/marilyn.jpg',
position: view.center
});
// Wait for the raster to be loaded...
raster.onLoad = () => {
// ...and center it.
raster.position = view.center;
// Draw a circle over it.
new Path.Circle({
center: view.center,
radius: 50,
fillColor: 'blue'
});
// Make sure that the scene is drawn on the canvas.
view.update();
// Create a blob from the canvas...
view.element.toBlob((blob) => {
// ...and get it as a URL.
const url = URL.createObjectURL(blob);
// Open it in a new tab.
window.open(url, '_blank');
});
};