微信小程序生成海报图片小程序生成海报教程

1、考虑到组件复用，所以我把它做成一个自定义的组件

<my-posterid="getPoster"avater="{{imageUrl}}"knowledges="{{klPoster}}"scene="{{topicId}}">
</my-poster>

可以传图片avater、文字内容knowledges、页面参数scene

2、组件里面首先是得需要一个画布。

画布外可以正常写元素标签，定义样式

<view class="mask_screen" wx:if="{{showpost}}"><view class='poster_box'><view class='poster_content' id='canvas-container'><canvas canvas-id="myCanvas" style="width:100%;height:{{canvasHeight}}px;" /></view><view class='tips'>保存图片，分享给小伙伴吧</view><view class='save' bindtap='saveShareImg'><image class='down' mode='widthFix' src='../../assets/dbs/down.png'></image><text>保存</text></view><image class='close'  bindtap='closePoste' mode='widthFix' src='../../assets/dbs/close.png'></image></view>
</view>

3、画布准备好之后，就是需要准备画图的一些资源，比如图片之类的

网络图片需利用微信接口 wx.downloadFile 下载下来之后，获取图片的临时地址，根据该临时地址才可以画图；

如果是工程类图片，只需要写好路径，即可以画图。比如：

    // 网络图片if (topicImage) {wx.downloadFile({url: topicImage,success: function(res) {wx.hideLoading();if (res.statusCode === 200) {var productSrc = res.tempFilePath;that.calculateImg(productSrc, function(data) {that.getCode(productSrc, data)})}}})}// 工程内图片
let dbicon = '../../assets/dbs/' + item.type + '.png';
ctx.drawImage(dbicon, 15, offsetHeight + 10, 10, 10)

4、有些图片可能要计算宽高的，需要利用微信接口 wx.getImageInfo 获取图片宽高等信息，wx.getSystemInfo 获取手机屏幕宽高等信息，根据比例去计算绘制

//计算图片尺寸calculateImg: function(src, cb) {var that = this;wx.getImageInfo({src: src,success(res) {wx.getSystemInfo({success(res2) {var ratio = res.width / res.height;var imgHeight = res2.windowWidth * 0.6 / ratio;// var screeRratio = res2.screenWidth / res2.screenHeightthat.setData({canvasHeight: imgHeight + 280// canvasHeight: res2.windowWidth * 0.5 / screeRratio})cb(imgHeight);}})}})}

5、再就是获取页面的小程序码。

6、绘制文字换行问题。

7、图片生成之后，保存图片。主要利用微信接口 wx.canvasToTempFilePath 和 wx.saveImageToPhotosAlbum

//点击保存到相册saveShareImg: function() {var that = this;wx.showLoading({title: '正在保存',mask: true,})setTimeout(function() {wx.canvasToTempFilePath({canvasId: 'myCanvas',success: function(res) {wx.hideLoading();var tempFilePath = res.tempFilePath;wx.saveImageToPhotosAlbum({filePath: tempFilePath,success(res) {wx.showModal({content: '图片已保存到相册，赶紧晒一下吧~',showCancel: false,confirmText: '好的',confirmColor: '#333',success: function(res) {that.closePoste();if (res.confirm) {}},fail: function(res) {console.log(res)}})},fail: function(res) {wx.showToast({title: res.errMsg,icon: 'none',duration: 2000})}})},fail: function(err) {console.log(err)}}, that);}, 1000);},

8、注意事项：

（1）图片要提前下载：这里面有一个问题就是，图片要提前下载完之后再绘图，不然图片显示不出来，可以把下载图片的方法单独拎出来，然后下载图片后回调绘图方法。

（2）ctx.draw()，这个方法是在绘制完成之后在调用，不然容易其它被覆盖。

如果你也想开发一款属于自己的微信小程序，可以通过第三方专业开发平台，来帮助你实现开发需求：厦门在乎科技-专注小程序、app、网站开发

微信小程序生成海报图片小程序生成海报教程相关推荐

大暑节气海报图片|大暑节气海报文案
01 腐草为萤:土润溽暑:大雨时行大暑简约24节气大暑设计模板素材 02 大暑吃仙草,活如神仙不会老. 黄色卡通大暑图片设计模板素材 03 冬吃萝卜夏吃姜,不需医生开药方. 中国传统二十四节 ...
弥散阴影html,设计弥散阴影效果海报图片的PS实例教程
之前发了两篇弥散阴影的教程,从新手版到进阶版,同学们应该都学会了,今天来最后一发教程,除了复习一下Photoshop 做弥散阴影的方法,学完弥散阴影就通关了.一起来跟上趋势. 目录什么是弥散阴影? ...
小程序生成分享海报图片并保存相册
文章目录前言一.普通二维码生成二.生成海报图片并保存 1.引入依赖组件 2.生成海报图片 2.1 配置painter海报json 2.2 引入数据构造函数并在适当时间触发生成海报 2.3 弹窗组 ...
微信小程序生成小程序码图片-【附坑点】
最近做小程序遇到一个功能: 从列表进入的详情页面,有生成海报的功能,这个功能用canvas就可以实现,我之前的文章有哦.附上链接只是这次的功能上要在海报上加上生成当前页面的小程序码,分享出去朋友识别 ...
微信小程序利用canvas生成海报-------图片为网络图片
根据我们老总的业务需求,迫不得已,我做了这个canvas绘制的海报,感觉基本上可以解决现在海报所遇到的大部分问题了,献给那些没有做过的小伙伴们,话不多说,先上我做的效果上代码 <style&g ...
JAVA生成微信小程序分享海报图片
由于小程序里面分享产品,不能直接到朋友圈,因此很多系统的做法是生成一张带有二维码,或者小程序码的海报图片.用户保存到本地,然后分享到朋友圈. 生成海报,有两种方式: 前端小程通过 canvs 绘图到模 ...
微信小程序生成分享图片踩坑大计划
微信小程序有个非常好的缺点,就是分享不能分享到朋友圈,怎么办呢,那只好生成图片,图片里面加个小程序码. 效果图但不过其中有坑大家注意啦 HTML代码,我这个是不显示图片的生成图片,所以canvas设 ...
微信小程序使用canvas生成分享海报功能复盘
前言近期需要开发一个微信小程序生成海报分享的功能.在h5一般都会直接采用 html2canvas 或者 dom2image 之类的库直接处理.但是由于小程序不具备传统意义的dom元素,所以也没有办法 ...
微信小程序自动生成打卡海报
1 背景最近在做一款背单词的小程序,用户在学习完成有对外展示的需求.计划小程序可以自动生成打卡海报,用户可以将海报保存,将保存的图片发布至朋友圈.除此之外,为推广小程序,还需要在海报中加入小程序的二 ...
微信小程序-运用painter插件生成海报分享朋友圈--比canvas好用
微信小程序-运用painter插件生成海报–比canvas好用先放插件地址:https://github.com/Kujiale-Mobile/Painter 还有个可视化把海报生成代码的地址:ht ...

微信小程序生成海报图片小程序生成海报教程

微信小程序生成海报图片小程序生成海报教程相关推荐

最新文章

热门文章

微信小程序生成海报图片 小程序生成海报教程

微信小程序生成海报图片 小程序生成海报教程相关推荐

最新文章

热门文章

微信小程序生成海报图片小程序生成海报教程

微信小程序生成海报图片小程序生成海报教程相关推荐