如何将画布内容导出为图片？
要获得使用 Konva 的舞台数据 URL，我们可以使用 toDataURL() 方法，该方法需要 Stage 的回调函数（对于其他节点不需要回调）。
此外，我们还可以传入一个 MIME 类型，例如 image/jpeg，以及一个介于 0 和 1 之间的质量值。
我们还可以获取特定节点的数据 URL，包括图层、组和形状。
注意：toDataURL() 方法要求绘制到画布上的任何图像都托管在与执行代码的同一域的 web 服务器上。
如果不满足此条件，将抛出 SECURITY_ERR 异常。
说明：拖动并放置矩形，然后单击保存按钮以获取复合数据 URL，并在新窗口中打开生成的图像
Konva Stage Data URL Demoview raw<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@9.3.18/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Stage Data URL Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
#buttons {
position: absolute;
top: 5px;
left: 10px;
}
#buttons > input {
padding: 10px;
display: block;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="buttons">
<button id="save">Save as image</button>
</div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
var rectX = stage.width() / 2 - 50;
var rectY = stage.height() / 2 - 25;
var box = new Konva.Rect({
x: rectX,
y: rectY,
width: 100,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true,
});
box.on('mouseover', function () {
document.body.style.cursor = 'pointer';
});
box.on('mouseout', function () {
document.body.style.cursor = 'default';
});
layer.add(box);
stage.add(layer);
function downloadURI(uri, name) {
var link = document.createElement('a');
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
}
document.getElementById('save').addEventListener(
'click',
function () {
var dataURL = stage.toDataURL();
downloadURI(dataURL, 'stage.png');
},
false
);
</script>
</body>
</html>
|