小程序的页面生成图片分享朋友圈

网上的经验其实挺多。我是按照这个

https://www.jianshu.com/p/01f526a4f948

https://github.com/JaimeCheng/canvasShareImg

主要的坑：

1.网络图片要下载到本地，就是getimginfo和promise，具体技术细节我也不晓得。然后就是本地图片的地址和网络图片的地址不同。本地的要加../../images/+res[0].path，而网络的直接是res[0].path。本机调试看不出来，用真机调试比较容易发现问题。

2.画布的位置，文字的位置，要慢慢调到合适。https://www.ifanr.com/minapp/925253

3.最关键的是，目前有极少的在小程序里用html2canvas的，都是直接把图片啊，文章里的文字啊，取过来，再画到画布上。这点看了很久才明白。比如这里https://blog.csdn.net/sufei_web/article/details/81736101

4.清晰度的问题。保存图片的时候，长度和高度乘以2就行了。https://www.csweigou.com/article/2209.html

//获取应用实例
const app = getApp()let wxparse = require("../../wxParse/wxParse.js");
Page({data: {dkheight: 300,dkcontent: "",leassonTilte: '',time: '',id: '',inputVal: '',msgData: [{msg: '极好的',index: 1,id: 1,name: "自强不息",likes: {num: 1},textareaValue: "输入留言"}],hidden: true,//画布canvasHidden: true, //设置画板的显示与隐藏，画板不隐藏会影响页面正常显示shareImgPath: '' //用于储存canvas生成的图片},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {// console.log(options)this.setData({id: options.id})// 获得高度let winPage = this;wx.getSystemInfo({success: function(res) {let winHeight = res.windowHeight;// console.log(winHeight);winPage.setData({dkheight: winHeight - winHeight * 0.05 - 80})}});var that = this;//获取用户设备信息，屏幕宽度wx.getSystemInfo({success: res => {that.setData({screenWidth: res.screenWidth})// console.log(that.data.screenWidth)}})var getData = wx.request({url: 'https://zsj.itdos.com/v1/wx/getwxarticle/' + options.id,// data: {// x: '',// y: ''// id: options.id// },header: {'content-type': 'application/json' // 默认值},success: function(res) {// console.log(res.data)that.setData({dkcontent: res.data.html,leassonTilte: res.data.title,time: res.data.time,author: res.data.author,//画布上的图片和文字，文字要控制字数// photo:res.data.imgUrl,// word:res.data.wordviews: res.data.Views,})wxparse.wxParse('dkcontent', 'html', that.data.dkcontent, that, 5)// 生成画布let promise1 = new Promise(function(resolve, reject) {wx.getImageInfo({src: res.data.imgUrl,success: function(res1) {// console.log(res1)resolve(res1);}})});let promise2 = new Promise(function(resolve, reject) {wx.getImageInfo({src: '../../images/qrcode.jpg',success: function(res1) {// console.log(res1)resolve(res1);}})});Promise.all([promise1, promise2]).then(res1 => {// console.log(res1)const ctx = wx.createCanvasContext('shareImg')//主要就是计算好各个图文的位置// var unit = that.data.screenWidth / 375ctx.setFillStyle('white');ctx.fillRect(0, 0, 600, 880);ctx.drawImage(res1[0].path, 50, 200, 400, 400)ctx.drawImage('../../' + res1[1].path, 350, 610, 160, 160)// ctx.drawImage(imgurl, 50, 200, 400, 400)// ctx.drawImage(bgImgPath, 350, 610, 160, 160)ctx.setFontSize(28)ctx.setFillStyle('#6F6F6F')ctx.fillText('来自小程序 - 青少儿书画', 30, 660)ctx.setFontSize(30)ctx.setFillStyle('#111111')ctx.fillText('快来围观作品', 30, 710)ctx.setFontSize(22)ctx.fillText('长按扫码进入小程序查看', 30, 750)ctx.setFillStyle('#6F6F6F')ctx.fillText('Author:' + res.data.author, 545 / 2, 100)ctx.setTextAlign('center')ctx.setFontSize(24)ctx.setFillStyle('#111111')ctx.fillText(res.data.title, 545 / 2, 50)ctx.fillText(res.data.word, 545 / 2, 160)ctx.fillText('……', 60, 190)ctx.stroke()ctx.draw()})}})},// 同时获取留言即可// var that = this;// wx.getStorage({//   key: 'info',//   success: function (res) {//     //msgData还是空的//     var list = that.data.msgData;//     var a = list ? list : []//     var apple = res.data//     //将数据加入到msgData//     a = apple//     that.setData({//       msgData: a//     })//   }// })onShareAppMessage: function() {// console.log(this.data.id)return {title: '青少儿书画●内容',path: 'pages/detail/detail?id=' + this.data.id}},// 删除留言del(e) {var that = thisvar n = e.target.dataset.index;var list = that.data.msgDatawx.showModal({title: '提示',content: '是否删除该条数据',success: function(res) {// console.log(res.confirm)if (res.confirm) {list.splice(n, 1);that.setData({msgData: list})wx.showToast({title: '删除成功',})}}})},// 添加留言add(e) {if (this.data.inputVal == '') {wx.showToast({title: '请留言',})return false;}var list = this.data.msgData;var a = list ? list : []a.push({msg: this.data.inputVal})wx.setStorage({key: 'info',data: a,})this.setData({msgData: a,inputVal: ''})},changeinputVal(e) {this.setData({inputVal: e.detail.value})},/*** 生成分享图*/share: function() {var that = this//获取用户设备信息设备像素比// wx.getSystemInfo({//   success: res => {//     that.setData({//       pixelRatio: res.pixelRatio//     })//     console.log(that.data.pixelRatio)//   }// })// 本质上就是生成一个更大的图片，因为手机的屏幕设备的像素比现在一般都是超过2的。实际上我们只需要在使用wx.canvasToTempFilePath的时候，设置参数destWidth和destHeight(输出的宽度和高度)为width和height的2倍以上即可。wx.showLoading({title: '努力生成中...'})wx.canvasToTempFilePath({x: 0,y: 0,width: 545,height: 771,destWidth: 545 * 2,destHeight: 771 * 2,canvasId: 'shareImg',success: function(res) {// console.log(res.tempFilePath);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})}}})}})},})

小程序的页面生成图片分享朋友圈相关推荐

微信小程序转发好友和分享朋友圈
onLoad: function (options) {//修改当前页面标题wx.setNavigationBarTitle({title: "会员中心"}); //用户点击右上角 ...
uniapp(HBuilder X)实现微信小程序转发好友和分享朋友圈(携带多个参数)
1.转发好友 onShareAppMessage() {let that=this;var url="/pages/xxxx/xxxx?id=123&type=goods" ...
小程序canvas实现（分享朋友圈生成图片）
业务场景:生成一个浮层图片实现思路: 设置一个盒子,将canvas生成的图片和保存图片的按钮放里边,当有canvas生成图片的时候这个盒子显示,否则隐藏. 这里需要注意的是,canvas画图片的时候 ...
小程序如何生成海报分享朋友圈，android移动开发技术与应用
openStatus = false console.log('请设置允许访问相册') wx.showToast({ title: '请设置允许访问相册', icon: 'none' }) } }) ...
小程序生成二维码分享朋友圈的功能
一.如何生成小程序分享页面的二维码? 通过后台接口可以获取小程序任意页面的二维码,具体可以参考https://developers.weixin.qq.com/miniprogram/dev/api/ ...
小程序生成图片分享朋友圈
小程序生成图片分享朋友圈小程序开发者都希望自己的小程序得以广泛传播,因为不少小程序都设计了很多转发激励行为,但分享小程序到朋友圈(或其他外部平台)一直是一个难题.一个常见但方案就是生成分享海报.分享 ...
微信小程序生成图片分享朋友圈
前言 ** 目前小程序只支持卡片方式分享到聊天页面,官方不知道何时会新增分享朋友圈方式.最近有个需求要分享到朋友圈,现在大家的通用做法就是通过Canvas生成一张图片后进行保存,然后自行转发朋友圈.最 ...
微信小程序之生成图片分享朋友圈
通过社交软件分享的方式来进行营销小程序,是一个常用的运营途径.小程序本身支持直接将一个小程序的链接卡片分享至微信好友或微信群,然后别人就可以通过点击该卡片进入该小程序页面.但是小程序目前不支持直接分享 ...
【小程序】728- 小程序如何生成海报分享朋友圈
作者:小白 https://segmentfault.com/a/1190000019083548 项目需求写完有一段时间了,但是还是想回过来总结一下,一是对项目的回顾优化等,二是对坑的地方做个记录, ...

小程序的页面生成图片分享朋友圈

小程序的页面生成图片分享朋友圈相关推荐

最新文章

热门文章