如何将动态图片和文字转为一张图片

原创于 2019-04-26 13:37:08 发布 · 559 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue中dom转为图片

Vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用html2canvas库将网页元素转化为图片，并利用qrcanvas将链接转换成二维码。详细步骤包括npm安装库、在页面中引入库、创建自定义id的div元素，以及在created钩子中调用组件生成二维码。

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

npm install html2canvas --save

data() {
return {
dataURL: ‘’
}
},
dataURL是最后转化出来的图片base64地址，放在img标签中即可展示。?
methods: {
toImage() {
html2canvas(this.$refs.imageWrapper,{
backgroundColor: null
}).then((canvas) => {
let dataURL = canvas.toDataURL(“image/png”);
this.dataURL = dataURL;
});
}
}
//将链接图片转化为本地图片

1.npm安装：npm install qrcanvas2.页面引入：import { qrcanvas } from ‘qrcanvas’;3.html：写一个带id(id自定义)的div

created() {
let that = this;
that.

KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsComponent(that.

route.query.url), //分享链接（根据需求来）
size:128 //二维码大小
});
document.getElementById(“qrcode”).innerHTML = ‘’;
document.getElementById(‘qrcode’).appendChild(canvas1);
})
},
注意对于线上图片不能转换，只能有后台将图片转为base64s所以它支持图片转换为（本地图片和base64,链接图片不支持）