微信小程序/uni-app生成海报功能@令狐张豪

使用技术栈：uni-app
使用官方文档提供的API：createCanvasContext（uni-app） /CanvasContext（原生）

*注意：海报里用到的图片都得先使用小程序提供的下载方法把网络图片下载成本地文件才能使用，否则会出现跨域问题！

html代码：

<canvas id="imgCanvas" canvas-id="imgCanvas" style="width: 260px;height:414px;background: #FFFFFF;"></canvas>

js代码：

data(){return {imgUrl: '',//生成的海报路径ewm: '', //小程序码bg_img: 'https://s3.cn-north-1.amazonaws.com.cn/huivo-miyamibao/png/c3962d3ae80e9847316e0c8d00ebb00f.png', //背景图片system_info: [], //系统信息（用到头像）}
}methods:{share(){//分享(生成海报)//绘图var that = this;//这里等promise执行，避免拿不到图片临时路径//先把我们用到的素材图片下载成本地图片const promise1 = new Promise((resolve, reject) => {uni.downloadFile({url: that.bg_img, //背景图success: (res) => {resolve(res)}})});const promise2 = new Promise((resolve, reject) => {uni.downloadFile({url: that.ewm,  //小程序码success: (res) => {resolve(res)}})});const promise3 = new Promise((resolve, reject) => {uni.downloadFile({url: that.userInfo.avatarUrl, //微信用户头像success: (res) => {resolve(res)}})});Promise.all([promise1, promise2, promise3]).then((values) => {this.make_canvas(values[0], values[1], values[2]);});},make_canvas(img01, img02, header) {var ctx = uni.createCanvasContext('imgCanvas') //绑定画布 //drawImage 参数说明：drawImage(图片地址,图片w,图片h,x轴,y轴)ctx.setFillStyle("#ffffff");ctx.drawImage(img01.tempFilePath, 0, 0, 260, 414); //填充进图片ctx.drawImage(img02.tempFilePath, 17, 337, 61, 61); //填充进图片ctx.drawImage(header.tempFilePath, 92, 280, 23, 23, );//有几处内容就写几个ctx.setFillStyle('#FFFFFF') //设置内容1的文字样式ctx.setFontSize(8);ctx.fillText(this.userInfo.nickName, 123, 295) //用户微信名称ctx.setFillStyle('#FFFFFF') //设置内容2的文字样式ctx.setFontSize(8);ctx.fillText('为您推荐', 190, 295)ctx.draw(); //输出到画布中uni.showLoading({ //增加loading等待效果mask: true})setTimeout(() => { //不加延迟的话，base64有时候会赋予undefineduni.canvasToTempFilePath({canvasId: 'imgCanvas',success: (res) => {//生成的海报地址this.imgUrl = res.tempFilePath}})uni.hideLoading();}, 1200)},//保存到相册方法：downloadFile() {uni.saveImageToPhotosAlbum({filePath: this.imgUrl,success: function() {console.log('save success');}});},
}

end~~~

如有错误或观点不一致的请评论留言共同讨论，本人前端小白一枚，根据自己实际项目遇到的问题进行总结分享，谢谢大家的阅读！
文章对您有所帮助请给作者点个赞支持下，谢谢~

微信小程序/uni-app生成海报功能@令狐张豪相关推荐

微信小程序实现画布生成海报功能
微信小程序可以通过使用标签来实现生成海报的功能.以下是基本实现步骤: 1.在 WXML 文件中创建一个标签,并设置其宽度和高度属性.' <canvas canvas-id="myC ...
uni-app 微信小程序模仿 app二层楼功能
uni-app 微信小程序模仿 app二层楼功能先占个坑,今天应该写不完, 后续在慢慢补全更新终于写完了这个的计算量很大,我自己的安卓机测试的时候一卡一卡的,公司同事的iphone是没有问题 ...
微信小程序纯前端生成海报并保存本地
需求公司开发微信小程序,有一个海报页面,需要用户点击生成海报,可以将该该swipe-item 生成一个带二维码的图片,最终由纯前端实现! 技术调研因为小程序的打包限制,不可能将所有的图片都放在代码 ...
uniapp实现微信小程序端动态生成海报
背景: 基于uniapp实现微信小程序中商品详情的海报生成与保存效果图: 思路: 首先把海报上需要的内容准备好,比如用户头像,商品信息,二维码等.需要注意的是,因为二维码是动态生成的,所以需要后端传 ...
在微信小程序中实现生成海报图并保存到相册
效果图镇楼: 技术依赖: 弹窗 (vant-weapp 提供的 van-popup 组件) 海报图 (wx-canvas-2d 工具) 弹窗组件的使用方式可以点击上面链接查看,本篇主要讲解海报图绘制方 ...
记一次微信小程序canvas 2d 生成海报问题
因项目需要,需要制作海报分享. 如: 事情总是不是那么顺利,canvas生成海报生成中遇到各种奇葩问题.一开始是 wx.canvasToTempFilePath 中获取不到canvas对象,调用返回 ...
uniapp开发微信小程序使用painter生成海报
最初绘制海报时是准备用canvas绘制,但是绘制遇到各种问题,且难度颇高,最后也没能绘制出来,也尝试过使用微信官方的 wxml-to-canvas,但需要传入wxml和样式,太为难我这个小小的后端开发 ...
微信小程序利用canvas生成海报-------图片为网络图片
根据我们老总的业务需求,迫不得已,我做了这个canvas绘制的海报,感觉基本上可以解决现在海报所遇到的大部分问题了,献给那些没有做过的小伙伴们,话不多说,先上我做的效果上代码 <style&g ...
uniapp微信小程序开发，生成海报插件painter的使用
1.引入painter插件下载地址:https://github.com/Kujiale-Mobile/Painter 代码下载后,将component中的painter文件夹放入项目wxcompo ...

微信小程序/uni-app生成海报功能@令狐张豪

*注意：海报里用到的图片都得先使用小程序提供的下载方法把网络图片下载成本地文件才能使用，否则会出现跨域问题！

微信小程序/uni-app生成海报功能@令狐张豪相关推荐

最新文章

热门文章