前言:这章我们为图片添加一些小物件,然后用canvas合成并导出到本地。
GitHub:https://github.com/Ewall1106/miniProgramDemo
我们先看看图片合成的效果:
图片合成过程.gif
图片合成后海报
1、小程序canvas
关于小程序的canvas
一些基本概念和方法大家可以去官网看看,我不过多阐述。
2、页面布局
根据我们开头图片所示我们继续一个基本的页面布局
html
基本结构
<view class="container"> <view class="show_block"> <image class="bg" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{bgSrc}}" /> <image class="img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{imgSrc}}" /> <canvas class="myCanvas" canvas-id="myCanvas" style="width: 375px; height: 417px;"></canvas> </view> <button @tap="choose">选择图片</button> <button @tap="save">保存海报</button></view>
css
样式布局
这里我们把canvas
隐藏在展示的img图片后面。
.container { .show_block { position: relative; width: 750rpx; height: 834rpx; .bg { display: block; width: 100%; height: 100%; } .img { position: absolute; top: 86rpx; left: 114rpx; display: block; width: 520rpx; height: 527rpx; } .myCanvas { z-index: -1; position: absolute; top: 0; left: 0; } } }
3、事件处理
(1)choose
选择图片事件
我们在data中定义两个图片src属性,一个是背景,一个是用户上传的图片。
data = { bgSrc: '/assets/images/bg.png', imgSrc: ''};
当点击选择时,我们调用小程序的chooseImage事件从用户相册中获取图片,然后把获取的临时图片路径赋给
data中
的imgSrc
choose() { let self = this; wx.chooseImage({ success: function(res) { self.imgSrc = res.tempFilePaths[0]; self.$apply(); } }); this.$apply(); }
(2)save
保存图片事件
首先我们还是的跟小程序 — 保存图片到手机相册②(用户授权等)章一样先进行一下用户授权判断:
save() { let self = this; if (!this.imgSrc) { wepy.showToast({ title: '请先选择图片', icon: 'none', duration: 2000 }); return false; } wx.getSetting({ success(res) { if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success() { self.saveImage(); } }); } else { self.saveImage(); } } }); }
然后我们先使用
canvas
绘制图片并保存
saveImage() { wepy.showLoading({ title: '保存中...' }); let self = this; const ctx = wx.createCanvasContext('myCanvas'); ctx.drawImage(self.bgSrc, 0, 0, 375, 417); ctx.drawImage(self.imgSrc, 57, 44, 260, 264); ctx.draw(false, function(e) { // 保存到本地 wx.canvasToTempFilePath({ x: 0, y: 0, width: 375, height: 417, canvasId: 'myCanvas', success: function(res) { let pic = res.tempFilePath; wx.saveImageToPhotosAlbum({ filePath: pic, success(res) { wx.hideLoading(); wx.showToast({ title: '保存成功', icon: 'success', duration: 2000 }); } }); } }); }); }
这样我们就实现合成一张海报并保存到本地。
作者:Ewall_
链接:https://www.jianshu.com/p/8d0388c765fa
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦