canvas 生成图片,js canvas生成图片并保存
这篇文章主要介绍了vue3实现将超文本标记语言元素变成画布（海报生成),进行图片保存/截图，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
将超文本标记语言元素变成画布（海报生成),进行图片保存/截图使用html2canvas将页面转化为图片
将html元素变成canvas(海报生成),进行图片保存/截图
//网页上只有一张图片我们可以直接就进行图片保存
//但是你想保存这张图片的时候顺便把下面的字也带上相当于截图那请你像我这样做
div id= capture style= padding:10px；背景：#fff
img:src= whoImg style= width:300 px alt= /
你好，世界！/h4
/div
//触发按钮
button @click=isShow()生成海报/按钮
//这里是创建一个容器存放你待会想保存的图片也就是你想要的截图
div ref= wrapper id= wrapper v-show= show @ click= remove()/div
//引入插件没有就直接下新公共管理安装html2canvas文件保存器-保存
从" html2canvas "导入html 2可以vas
setup() {
//随便搞张图
让whoImg=require(./资产/1。png’).违约；
//绑定你的容器
let wrapper=ref()；
//控制容器显示
let show=ref(false)；
//锁防止多次生成
设lock=ref(1)；
//触发
const isShow=()={
显示值=真
//html2canvas的方法传你要截图的盒子会把盒子内的所有元素都变成一张帆布图片
html 2可以vas(文档。查询选择器(“# capture”).然后((画布)={
if (lock.value) {
//给容器加入这个帆布
包装纸。价值。appendchild(画布)；
锁定。值=0；
}
});
};
//移除这个容器内容
const remove=()={
show.value=false
如果(!lock.value) {
锁定。值=1；
包装纸。价值。innerhtml=
}
};
}
//图片大小
img {
宽度：300像素
}
//放帆布这个容器的大小
#包装器{
宽度：500像素
高度：500像素
位置：固定；
top:0；
左：0;
//这下面是栈自定义的组件样式用的不打紧
z指数：var( - van-overlay-z指数);
背景色：var(-van-overlay-background-color)；
}
使用html2canvas将页面转化为图片
微信端将页面截屏之后保存到本地，使用了html2canvas插加粗样式
install
新公共管理安装-保存html2canvas
在所需页面引入
从" html2canvas "导入html2canvas
use
div ref=imageWrapper
div class="成功"
div class=img
img class=img-icon src=./assets/success.png/
p style= font-weight:600；字体大小：18px 支付成功/p
/div
/div
div class=成功-详细信息
El-row style= margin-top:10px；
El-col:span= 5 class= col-left-suc 收款商家/el-col
El-col:span= 16 class= col-right { merchant } }/El-col
/el-row
El-row style= margin-top:10px；
El-col:span= 5 class= col-left-suc 费用名称/el-col
El-col:span= 16 class= col-right { contName } }/El-col
/el-row
El-row style= margin-top:10px；
El-col:span= 5 class= col-left-suc 缴费金额/el-col
El-col:span= 16 class= col-right {收费价格} }元/el-col
/el-row
/div
/div
div class=button
El-button style= width:70%； type= success size= small @ click= to image 生成截图/el-button
/div
vue中用ref来指定你需要截屏的dom
toImage() {
html2canvas(这个. refs.imageWrapper).然后(canvas={
让数据URL=canvas。toda taurl( image/png )；
this.imgUrl=dataURL
如果(this.imgUrl！==) {
this.dialogTableVisible=true
}
});
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。