微信小程序生成分享图然后保存图片分享朋友圈

微信小程序可以实现快速的转发好友实现分享，但是不能直接分享到朋友圈，但是有需要要这么做，要怎么实现呢？

查看文档之后，大概有了实现思路

1.使用微信小程序的wx.createCanvasContext（）方法，绘制图片；

2.使用wx.canvasToTempFilePath(）方法，把绘制出来的页面转成微信内的图片路径；

3.使用wx.saveImageToPhotosAlbum(）方法，把图片保存在手机相册；

4.就可以开开心心的发朋友圈拉。

然后主要代码如下

1.绘图，其中有一个要注意的就是不同手机的屏幕尺寸和像素是不一样的，所以这里引入了一个fixwidth，来实现尺寸的修正，方法比较笨，哈哈。

         varfixwidth= wx.getSystemInfoSync().windowWidth/720;let promise2 = new Promise(function (resolve, reject) {wx.getImageInfo({src: resre.data.data.headimgurl,success: function (res) {resolve(res);}})});let promise3 = new Promise(function (resolve, reject) {wx.getImageInfo({src: resre.data.data.image,success: function (res) {resolve(res);}})});let promise4 = new Promise(function (resolve, reject) {wx.getImageInfo({src: resre.data.data.share_img,success: function (res) {resolve(res);}})});let promise1 = new Promise(function (resolve, reject) {wx.getImageInfo({src: '../../images/qrbg.png',success: function (res) {resolve(res);}})});Promise.all([promise1, promise2, promise3, promise4]).then(res => {const ctx = wx.createCanvasContext('shareImg')//主要就是计算好各个图文的位置ctx.drawImage('../../' + res[0].path, 0, 0, 720 * fixwidth, 1080 * fixwidth)ctx.drawImage(res[1].path, 20 * fixwidth, 10 * fixwidth, 132 * fixwidth, 132 * fixwidth)ctx.drawImage(res[2].path, 20 * fixwidth, 160 * fixwidth, 610 * fixwidth, 610 * fixwidth)ctx.drawImage(res[3].path, 440 * fixwidth, 780 * fixwidth, 200 * fixwidth, 200 * fixwidth)ctx.setTextAlign('center')ctx.setFillStyle('#000')ctx.setFontSize(12)ctx.fillText(resre.data.data.nickname , 236 * fixwidth, 75 * fixwidth)ctx.fillText('精心为你准备了一款好物', 336 * fixwidth, 105 * fixwidth)ctx.fillText(resre.data.data.store_name.substring(0, 14), 190 * fixwidth, 930 * fixwidth)ctx.fillText(resre.data.data.store_name.substring(14, 28), 198 * fixwidth, 970 * fixwidth)ctx.setFillStyle('#F33953')ctx.setFontSize(24)ctx.fillText('￥' + resre.data.data.price, 120 * fixwidth, 880 * fixwidth)ctx.setFillStyle('#666')ctx.setFontSize(12)ctx.fillText('长按识别小程序码', 534 * fixwidth, 1000 * fixwidth)ctx.stroke()ctx.draw()})}

2.生成图片，因为这个默认生成的图片比较模糊，所以把生成出来的图片尺寸调到了很大，但是也有一个问题，就是一张图片占用的空间和内存也相应的大了，有将近1M大小，所以清晰度和大小怎么取舍，或者有更好的办法，欢迎留言。

    wx.canvasToTempFilePath({x: 0,y: 0,width: 720*that.data.fixwidth,height: 1080*that.data.fixwidth,destWidth: 1440,destHeight: 2160,canvasId: 'shareImg',success: function (res) {that.setData({prurl: res.tempFilePath,hidden: false})wx.hideLoading()},fail: function (res) {console.log(res)}})

3.保存生成好的图片

    wx.saveImageToPhotosAlbum({filePath: that.data.prurl,success(res) {wx.showModal({content: '图片已保存到相册，赶紧晒一下吧~',showCancel: false,confirmText: '好哒',confirmColor: '#72B9C3',success: function (res) {if (res.confirm) {console.log('用户点击确定');that.setData({hidden: true})setTimeout(function () {wx.navigateBack({});}, 1000)}}})}})

至此完活，剩下的分享朋友圈大家都会了。

整个页面完整代码如下

.js文件

var app = getApp();
Page({/*** 页面的初始数据*/data: {hidden: true,id:0,share_pintuan_productid:0,phonewidth:0,fixwidth:0},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that=this;that.setData({id:options.id,share_pintuan_productid: options.share_pintuan_productid,phonewidth: wx.getSystemInfoSync().windowWidth,fixwidth: wx.getSystemInfoSync().windowWidth/720,})var fixwidth = that.data.phonewidth/760;wx.request({url: app.globalData.url + '/routine/ydj/get_share_picture?uid=' + app.globalData.uid,method: 'GET',data: {id: options.id,share_pintuan_productid: options.share_pintuan_productid},success: function (resre) {if (resre.data.code==200){let promise2 = new Promise(function (resolve, reject) {wx.getImageInfo({src: resre.data.data.headimgurl,success: function (res) {resolve(res);}})});let promise3 = new Promise(function (resolve, reject) {wx.getImageInfo({src: resre.data.data.image,success: function (res) {resolve(res);}})});let promise4 = new Promise(function (resolve, reject) {wx.getImageInfo({src: resre.data.data.share_img,success: function (res) {resolve(res);}})});let promise1 = new Promise(function (resolve, reject) {wx.getImageInfo({src: '../../images/qrbg.png',success: function (res) {resolve(res);}})});Promise.all([promise1, promise2, promise3, promise4]).then(res => {const ctx = wx.createCanvasContext('shareImg')//主要就是计算好各个图文的位置ctx.drawImage('../../' + res[0].path, 0, 0, 720 * fixwidth, 1080 * fixwidth)ctx.drawImage(res[1].path, 20 * fixwidth, 10 * fixwidth, 132 * fixwidth, 132 * fixwidth)ctx.drawImage(res[2].path, 20 * fixwidth, 160 * fixwidth, 610 * fixwidth, 610 * fixwidth)ctx.drawImage(res[3].path, 440 * fixwidth, 780 * fixwidth, 200 * fixwidth, 200 * fixwidth)ctx.setTextAlign('center')ctx.setFillStyle('#000')ctx.setFontSize(12)ctx.fillText(resre.data.data.nickname , 236 * fixwidth, 75 * fixwidth)ctx.fillText('精心为你准备了一款好物', 336 * fixwidth, 105 * fixwidth)ctx.fillText(resre.data.data.store_name.substring(0, 14), 190 * fixwidth, 930 * fixwidth)ctx.fillText(resre.data.data.store_name.substring(14, 28), 198 * fixwidth, 970 * fixwidth)ctx.setFillStyle('#F33953')ctx.setFontSize(24)ctx.fillText('￥' + resre.data.data.price, 120 * fixwidth, 880 * fixwidth)ctx.setFillStyle('#666')ctx.setFontSize(12)ctx.fillText('长按识别小程序码', 534 * fixwidth, 1000 * fixwidth)ctx.stroke()ctx.draw()})}}})},/*** 生成分享图*/share: function () {var that = thiswx.showLoading({title: '努力生成中...'})wx.canvasToTempFilePath({x: 0,y: 0,width: 720*that.data.fixwidth,height: 1080*that.data.fixwidth,destWidth: 1440,destHeight: 2160,canvasId: 'shareImg',success: function (res) {that.setData({prurl: res.tempFilePath,hidden: false})wx.hideLoading()},fail: function (res) {console.log(res)}})},/*** 保存到相册*/save: function () {var that = this//生产环境时 记得这里要加入获取相册授权的代码wx.saveImageToPhotosAlbum({filePath: that.data.prurl,success(res) {wx.showModal({content: '图片已保存到相册，赶紧晒一下吧~',showCancel: false,confirmText: '好哒',confirmColor: '#72B9C3',success: function (res) {if (res.confirm) {console.log('用户点击确定');that.setData({hidden: true})setTimeout(function () {wx.navigateBack({});}, 1000)}}})}})}
})

.wxml文件

<!--pages/test/canvas.wxml--><!-- 画布大小按需定制 这里我按照背景图的尺寸定的  -->
<canvas canvas-id="shareImg" style="width:{{fixwidth*620}}px;height:{{fixwidth*980}}px;margin-left:6%"></canvas><!-- 预览区域  -->
<view hidden='{{hidden}}' class='preview'><image src='{{prurl}}' mode='widthFix'></image><button type='primary' size='mini' bindtap='save'>保存分享图</button>
</view><button class='share' type='primary' bindtap='share'>生成分享图</button>

.json文件

{"navigationBarTitleText": "生成海报"
}

.wxss文件

/* pages/canvas/canvas.wxss */
canvas{position: fixed;top: 0;
}
.share{position: fixed;bottom: 10rpx;width: 70%;left: 15%;height: 100rpx;line-height: 100rpx;
}
.preview {width: 100%;height: 100%;background: rgba(0,0,0,.9);position: absolute;z-index: 2;
}
.preview image{width: 70%;position: absolute;top: 10%;left: 15%;z-index: 3;border: 1px dashed #fff;
}
.preview button{width: 40%;position: absolute;bottom: 30rpx;left: 30%;}

代码写的比较丑，简单实现了功能还没来得及优化，仅供参考。

微信小程序生成分享图然后保存图片分享朋友圈相关推荐

【精】微信小程序生成二维码海报分享 [原理+源码]
关于海报分享的教程数不胜数, 但是我没能找到一个好用的, 为了实现这个功能结合了三篇教程耗时三天才把海报搞定; 首先网络上教程都是直接上教程代码, 然后代码加思路, 对小白我来说就是一头雾水, 只能边 ...
android分享分享到朋友圈图片,android app分享微信小程序(包含封面网络图片)+图片到朋友圈...
A 分享微信小程序效果: image.png 实现代码 //第一步通过url拿网络图片并生成bitmap val path = "分享小程序某个界面包含传参数" if (!Text ...
微信小程序实现转发给好友以及朋友圈
小趴菜上线!!!,想来想去还是记录一下这里吧,刚开始也是一脸懵. 这里的分享(转发)有两种途径: 1.通过button去触发: i: 通过给button 设置 open-type="shar ...
uniapp微信小程序生成分享海报(模板自取)
uniapp微信小程序生成分享海报模板 1.模板自取 2.可自行按需求更改调整 3.效果图如下: 生成前 -----> 生成后的图需知:博主的实现效果是先把需要生成的图片排版成静态页面,再点 ...
【微信小程序生成二维码并下载，分享】
微信小程序生成二维码并保存,分享,下载依赖工具使用weapp-qrcode-base64库生成二维码的base64编码链接:weapp-qrcode-base64 安装 npm install ...
微信小程序Excel生成下载浏览分享
微信小程序Excel生成下载浏览分享完整流程遇到的小问题完整流程主要是为了实现小程序前端从后端下载excel文件并浏览和分享excel文件给其他用户主要实现步骤:通过后端返回的字节流 : w ...
微信小程序生成自定义参数二维码
微信小程序生成自定义参数二维码前言实现尾巴前言最近项目中要用到二维码分享功能,需要封装一些自定义的参数通过二维码分享.查看官方文档,发现系统提供了生成二维码的功能,但是细看才发现官方提供的接 ...
微信小程序生成Excel
微信小程序生成Excel 一.问题描述最近一直在查找在微信小程序中生成Excel的办法.需求就是根据一个json数据或者对象数组,生成一个Excel文件,或者打开Excel文件.网上找了很久,没找到 ...
uni-app微信小程序生成自定义参数二维码，跳转小程序指定页面，获取参数；uni-app微信小程序获取二维码自定义参数；微信小程序生成动态参数二维码；uni-app微信小程序获取动态参数二维码；
一.场景需求: 在小程序个人名片页面A页面,生成用户的个人名片二维码(该二维码携带用户的唯一标识id):微信扫一扫或长按图片识别这个二维码,可以跳转到小程序的B页面,并且在B页面拿到二维码上的唯一标识 ...

微信小程序生成分享图然后保存图片分享朋友圈

微信小程序生成分享图然后保存图片分享朋友圈相关推荐

最新文章

热门文章