<!-- 海报 影藏位置 -->
<div class="canDiv" ref="canDiv" v-show="haiBa">
<view class="canDiv1">
<!-- crossorigin ="anonymous" -->
<img ref="imhBx" :src="canvasImg.img" mode=""></img>
</view>
<view class="canDiv2">{{canvasImg.name}}</view>
<view class="canDiv3">
<image :src="canvasImg.erWeima" mode=""></image>
</view>
<view class="canDiv4">长按图片保存到手机</view>
</div>
<view class="pl1" @click="shareBtn">
<span class="iconfont foSiz20"></span>分享
</view>
弹出层位置
<uni-popup ref="popupCan" type="center">
<!-- <view class="" :style="{width:imgWidth,height:imgHeight}"> -->
<view class="popImg">
<!-- <view class="popImg" @click.stop="closeBtn"> -->
<image class="imgPop" :src="imgsBox" mode="aspectFit" style="z-index: 1000;"></image>
</view>
<!-- </view> -->
</uni-popup>
//官网地址
http://html2canvas.hertzen.com/
//微信小程序基于base64生成二维码插件地址
https://github.com/Pudon/weapp-qrcode
//安装
Install NPM
npm install --save html2canvas
Install Yarn
yarn add html2canvas
//页面引入
import html2canvas from 'html2canvas';
// 本页面二维码生成方法
import qrcode from '../../utils/weapp-qrcode.js'
//data数据
data() {
return {
haiBa:false,
canvasImg: {
img: '',
name: '',
erWeima: ''
}
}
}
onLoad(e) {
// 生成二维码
let erCode = window.location.href
let params = erCode // 二维码参数
var imgData = qrcode.drawImg(params, {
typeNumber: 4, // 密度
errorCorrectLevel: 'L', // 纠错等级
size: 800, // 白色边框
})
this.canvasImg.erWeima = imgData
}，
methods: {
// canvas海报
generatorImage() {
html2canvas(this.$refs.canDiv).then(canvas => {
// uni.showLoading({
// title: '生成中...'
// })
// console.log("canvas", canvas.toDataURL());
this.imgsBox = canvas.toDataURL() //base64字符串 放到图片标签上
// uni.hideLoading()
});
},
// 生成分享
shareBtn() {
this.haiBa = true
uni.showLoading({
title: '生成中...'
})
setTimeout(() => {
uni.hideLoading()
this.generatorImage()
this.$refs.popupCan.open()
this.haiBa = false
}, 500)
},
}版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/144806.html
