uniapp 使用html2canvas将指定dom内容写入Canvas生成图片并下载

53 阅读 0 评论 35 点赞

我是靠谱客的博主开放电话，最近开发中收集的这篇文章主要介绍uniapp 使用html2canvas将指定dom内容写入Canvas生成图片并下载，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

uniapp 使用html2canvas将指定dom内容写入Canvas生成图片并下载
注：
1、下载图片但是只支持app
2、可以切换背景图
3、图片和html2canvas.min.js，请自行更换

<template>
<view class="createIDcard">
<view class="contid">
<view class="idPositive pubtml renderjs" :change:msg="renderScript.idPositive"
id="idPositive" :style="[{backgroundImage:'url('+tmpImg+')'},{color:tmpColor}]">
<image src="../../../static/images/login/login.png" mode="" class="attra"></image>
<view class="pertsInfo">
<view>名字</view>
<view>性别</view>
<view>性格</view>
<view>身份证号：CW202010101099</view>
</view>
</view>
<view class="idBack pubtml" id="idBack" :change:msg="renderScript.idPositive"
:style="[{backgroundImage:'url('+tmpImg+')'},{color:tmpColor}]">
<view class="idBackTitle">身份卡</view>
<view class="idBackIssued ">发证机关：江苏</view>
<view class="idBackValidity">有效期：2021-03-05-永久</view>
</view>
<view class="poster-view">
<image :src="base64" mode=""></image>
</view>
<view class="switchTemplate">
<view class="tmpTitle">更换模板</view>
<view class="tmpLKist">
<image :src="item.url" mode="" v-for="(item,index) in tmpKist" :key='index' @click="selectTmpl(item)"></image>
<!--
<image src="../../../static/images/bronze.jpg" mode=""></image>
<image src="../../../static/images/diamonds.jpg" mode=""></image>
<image src="../../../static/images/writeOffBg.jpg" mode=""></image>
<image src="../../../static/images/value.jpg" mode=""></image> -->
</view>
</view>
</view>
<view class="idCardBtn">
<view class="saveIdcard" @click="renderScript.html2can">保存图片</view>
<view class="saveIdcard shared">我要分享</view>
</view>
</view>
</template>
<script>
export default {
components: {},
name: "createIDcard",
data() {
return {
base64: '',
base641: '',
tmpImg: '',
tmpColor: '',
tmpKist: [{
url: '../../../static/images/gold.jpg',
color: '#fff',
},
{
url: '../../../static/images/bronze.jpg',
color: '#f66',
},
{
url: '../../../static/images/diamonds.jpg',
color: '#f33',
},
{
url: '../../../static/images/writeOffBg.jpg',
color: 'blue',
},
{
url: '../../../static/images/writeOffBg.jpg',
color: 'yellow',
},
{
url: '../../../static/images/value.jpg',
color: '#000',
},
]
};
},
onLoad(options) {
this.tmpImg = this.tmpKist[0].url;
this.tmpColor = this.tmpKist[0].color;
},
methods: {
selectTmpl(item) {
this.tmpImg = item.url;
this.tmpColor = item.color;
},
// 接收renderjs发回的数据
receiveRenderData(val) {
this.base64 = val
console.log(val.length)
},
// 保存图片
saveHeadImgFile(base64) {
this.base64 = base64
// #ifdef H5
// #endif
// #ifdef APP-PLUS
const bitmap = new plus.nativeObj.Bitmap("test");
bitmap.loadBase64Data(base64, function() {
const url = "_doc/" + new Date().getTime() + ".png"; // url为时间戳命名方式
console.log('saveHeadImgFile', url)
bitmap.save(url, {
overwrite: true, // 是否覆盖
// quality: 'quality'
// 图片清晰度
}, (i) => {
uni.saveImageToPhotosAlbum({
filePath: url,
success: function() {
uni.showToast({
title: '图片保存成功',
icon: 'none'
})
bitmap.clear()
}
});
}, (e) => {
uni.showToast({
title: '图片保存失败',
icon: 'none'
})
bitmap.clear()
});
}, (e) => {
uni.showToast({
title: '图片保存失败',
icon: 'none'
})
bitmap.clear()
});
// #endif
}
},
}
</script>
<script module="renderScript" lang="renderjs">
import html2canvas from '../../../utils/html2canvas.min.js';
export default {
data() {
return {
}
},
mounted() {},
methods: {
html2can(e, ownerVm,callBack) {
this.emitData(e, ownerVm,1, (url) => {
ownerVm.callMethod('saveHeadImgFile', url)
this.emitData(e, ownerVm,2, (url) => {
ownerVm.callMethod('saveHeadImgFile', url)
})
})
},
// 渲染到canvas并转图片
emitData(e, ownerVm,index, callBack) {
var dom;
if (index == 1) {
dom = document.getElementById('idPositive')
} else if (index == 2) {
dom = document.getElementById('idBack')
}
html2canvas(dom, {
width: dom.clientWidth, //dom 原始宽度
height: dom.clientHeight,
scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
scrollX: 0,
useCORS: true, //支持跨域，但好像没什么用
}).then((canvas) => {
// 将生产的canvas转为base64图片3
let base64 = canvas.toDataURL('image/png')
callBack && callBack(base64)
});
}
}
};
</script>
<style lang="less" scoped>
.createIDcard {
width: 100%;
overflow: hidden;
.poster-view {
background: #007AFF;
width: 614rpx;
height: 332rpx;
image {
width: 100%;
height: 100%;
}
}
.idCardBtn {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
bottom: 40rpx;
z-index: 999s;
.saveIdcard {
width: 305rpx;
height: 94rpx;
background: #FFFFFF;
box-shadow: 0px 14rpx 24rpx 0rpx rgba(214, 214, 214, 0.31);
border-radius: 32rpx;
border: 2px solid #DC5F45;
line-height: 94rpx;
text-align: center;
font-size: 36rpx;
font-weight: 400;
color: #DC5F45;
}
.shared {
background: #DC5F45;
box-shadow: 0px 14rpx 24rpx 0px rgba(220, 95, 69, 0.31);
margin-left: 24rpx;
color: #FFFFFF;
}
}
.tmpLKist {
width: 100%;
overflow-y: hidden;
overflow-x: auto;
height: 132rpx;
white-space: nowrap;
&::-webkit-scrollbar {
display: none
}
image {
width: 192rpx;
height: 132rpx;
border-radius: 6rpx;
margin-left: 19rpx;
}
}
.switchTemplate {
width: 100%;
color: #000;
font-weight: 500;
font-size: 34rpx;
overflow: hidden;
.tmpTitle {
margin-bottom: 32rpx;
}
}
.contid {
width: calc(100% - 96rpx);
margin: 48rpx 48rpx 0 48rpx;
padding: 20rpx;
background-color: #fff;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.pubtml {
width: 614rpx;
height: 332rpx;
border-radius: 14rpx;
display: flex;
margin-bottom: 32rpx;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.idPositive {
justify-content: flex-start;
align-items: flex-start;
.attra {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
margin: 48rpx 18rpx 0 32rpx;
}
.pertsInfo {
font-size: 30rpx;
font-weight: 400;
// color: #FFFFFF;
margin-bottom: 10rpx;
margin-top: 48rpx;
}
}
.idBack {
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 28rpx;
font-weight: 400;
// color: rgba(255, 255, 255, 0.85);
.idBackTitle {
font-size: 38rpx;
font-weight: 500;
// color: #FFFFFF;
margin: 77rpx 0 70rpx 0;
}
}
}
</style>