uni-app app生成带二维码海报保存图片 + 分享到微信

远远落后 發表於 2022-3-3 15:30:00

uni-app app生成带二维码海报保存图片 + 分享到微信

<div class="cnblogs_code">
<pre>html代码 　　　　<view style="padding-top: 100rpx;">
 
 <view class="posterImgBox">
 <view id="poster">
 <img class="image" :src="imageUrl" mode=""></img>
 <uqrcode v-if="!posterImgType" class="qrCodeImg" ref="uQRCode" :text="'https://www.wm319.com?page=/pages/wcatLoin/wcatLoin@userId=' + userData.id" :size="42" />
 </view>
 </view>
 <view class="btns">

 <view class="shareBtn" @click="renderScript.emitData">
 <text>保存到相册</text>
 </view>
 <view class="shareBtn" @click="shareBtn">
 <image src="../static/weixin.png" mode=""></image>
 <text>分享到微信</text>
 </view>
 </view>
 </view></pre>
</div>
注： uqrcode插件在uni-app插件市场导入项目即可直接用标签方式使用
<div class="cnblogs_code">
<pre>JS代码（逻辑层）// 保存图片到本地
downLoadImage(){
let base64 = this.imageUrl;
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: 10// 图片清晰度
 }, (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()
 });
},
// 点击分享到微信
shareReachWeiXin(){
uni.share({
 provider: "weixin",
 scene: "WXSceneSession",
 type: 0,
 href: "", // 跳转的地址
 title: "XXXX", // 分享的标题
 summary: "邀请你和我一起成长",
 imageUrl: "logo.png",
 success: function (res) {
 console.log("success:" + JSON.stringify(res));
 },
 fail: function (err) {
 console.log("fail:" + JSON.stringify(err));
 }
});
}, </pre>
　　// 接收生成的图片 　　receiveRenderData(val){ 　　　　this.imageUrl = val; 　　　　this.posterImgType = true; 　　　　this.downLoadImage();
 　　},
<pre> </pre>
</div>
<div class="cnblogs_code">
<pre>注：额外创建script建立renderjs <script module="renderScript" lang="renderjs">
import html2canvas from '../../utils/html2canvas.min.js';
export default {
 data() {
 return {

 }
 },
 mounted() {},
 methods: {
 // 发送数据到逻辑层
 emitData(e, ownerVm) {
 const dom = document.getElementById('poster')
 html2canvas(dom, {
 width: dom.clientWidth, //dom 原始宽度
 height: dom.clientHeight,
 scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
 scrollX: 0,
 foreignObjectRendering: true, // 是否在浏览器支持的情况下使用ForeignObject渲染
 useCORS: true, // 是否尝试使用CORS从服务器加载图像
 async: false, // 是否异步解析和呈现元素
 background: "#ffffff",
 dpi: 300
 }).then((canvas) => {
 // console.log(e, ownerVm);
 // console.log(canvas)
 // 将生产的canvas转为base64图片3
 ownerVm.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
 });

 }
 }
};
</script></pre>
</div>
  
来源：https://www.cnblogs.com/wtwebskill/p/15960091.html

頁: [1]

琼殿技术论坛's Archiver

uni-app app生成带二维码海报保存图片 + 分享到微信