小程序 — canvas图片合成
前言：这章我们为图片添加一些小物件，然后用canvas合成并导出到本地。 GitHub：https://github.com/Ewall1106/miniProgramDemo 我们先看看图片合成的效果：
图片合成过程.gif
图片合成后海报
1、小程序canvas
关于小程序的canvas一些基本概念和方法大家可以去官网看看，我不过多阐述。
2、页面布局
根据我们开头图片所示我们继续一个基本的页面布局
html基本结构
<view class="container">
<view class="show_block">
<image class="bg" src="{{bgSrc}}" />
<image class="img" src="{{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
});
}
});
}
});
});
}这样我们就实现合成一张海报并保存到本地。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.09.28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读