图片合成网页保存图片，文件配合domtoimage 和 FileSaver.js使用

原创已于 2024-07-18 17:49:38 修改 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图片保存

于 2018-06-08 10:00:28 首次发布

js 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一种利用dom-to-image.js库将网页内容转换为SVG图像的方法。通过示例代码展示了如何将DOM元素转为SVG格式，并在页面上展示转换后的图像，为用户提供保存图像的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

FileSaver.js


<script src="js/dom-to-image.js"></script>


// 合成图片
function finish(){
// alert(save,111);
var node = document.getElementById('all');
var img = document.getElementById('niceImg');
console.log('save511合成图片',save);
if(save){ //编辑才可再保存

}else{
//png jpg tosvg
// toSvg
domtoimage.toSvg(node)
.then(function (dataUrl) {
img.src = dataUrl;
document.getElementById('niceImg').style.display='block';
document.getElementById('bianji').style.display='block';
document.getElementById('all').style.display='none';
document.getElementById('toast').innerHTML='可长按图片保存至本地哦';
document.getElementById('toast').style.display='block';
setTimeout(function(){
document.getElementById('toast').style.display='none';
},2000)
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
}
}