提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
马上就到十一国庆节了,朋友圈开始各种合成五星红旗头像,找了几个小程序合成,感觉很麻烦,干脆自己写一个。
体验一下:
准备工作
1.素材文件
2.合成目标图片:
代码部分
<template>
<view class="content">
<view class="v_block">
<canvas canvas-id="canvas"></canvas>
</view>
<view class="v_block">
<button @chooseavatar="onChooseAvatar" open-type="chooseAvatar" > 上传头像 </button>
<button @click="downloadImg()"> 下载图片 </button>
<button @click="upImg()"> 上传图片 </button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
avatarUrl: 'https://gitee.com/long-fei-smile/free/raw/master/images/applet/11.jpg',
hqUrl: 'https://gitee.com/long-fei-smile/free/raw/master/images/applet/hq3.png',
chinese_heart: 'https://gitee.com/long-fei-smile/free/raw/master/images/applet/chinese_heart.png',
avatarUrlPath: '',
hqUrlPath: '',
chineseHeartPath: ''
}
},
onLoad() {
uni.showLoading({
title: '加载中', // 加载框上显示的文本内容
})
var ctx = uni.createCanvasContext("canvas",this);
var self = this;
uni.getImageInfo({
src: self.avatarUrl,
success:function(img){
self.avatarUrlPath = img.path
console.log(img.path,'img.path')
ctx.drawImage(img.path,0,0,400,400)
uni.getImageInfo({
src: self.hqUrl,
success:function(hq){
self.hqUrlPath = hq.path
ctx.drawImage(hq.path,0,0,400,400)
uni.getImageInfo({
src: self.chinese_heart,
success:function(c_heart){
self.chineseHeartPath = c_heart.path
ctx.drawImage(c_heart.path,160,239,150,100)
ctx.draw()
uni.hideLoading();
},
fail:function(e){
console.error("中国心图片加载失败!")
uni.hideLoading();
}
})
},
fail:function(e){
console.error("红旗图片加载失败!")
uni.hideLoading();
}
})
},
fail:function(e){
console.error("女生图片加载失败!")
uni.hideLoading();
}
});
ctx.draw()
//ctx.drawImage("/static/hq3.png",0,0,400,400)
},
methods: {
/* 上传图片方法 */
upImg(){
const s = wx.getSystemInfoSync().theme;
console.log(s,"222222222222222")
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths[0]));
console.log("-------------");
var ctx = uni.createCanvasContext("canvas",this);
ctx.drawImage(res.tempFilePaths[0],0,0,400,400)
ctx.drawImage("/static/hq3.png",0,0,400,400)
ctx.drawImage("/static/chinese_heart.png",160,239,150,100)
ctx.draw()
}
});
},
downloadImg(){
uni.canvasToTempFilePath({
canvasId: 'canvas',
success: function(res) {
// 在H5平台下,tempFilePath 为 base64
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success() {
uni.showModal({
title: '恭喜您',
content: '图片已经下载至相册!',
success: function (res) {
if (res.confirm) {
// 用户点击确定
} else if (res.cancel) {
// 用户点击取消
}
}
})
}
})
}
})
},
onChooseAvatar(e) {
this.avatarUrl = e.detail.avatarUrl
console.log(this.avatarUrl,'avatarurl')
const ctx = uni.createCanvasContext("canvas",this);
ctx.drawImage(this.avatarUrl,0,0,400,400)
ctx.drawImage(this.hqUrlPath,0,0,400,400)
ctx.drawImage(this.chineseHeartPath,166,296,166,80)
ctx.draw()
}
}
}
</script>
<style lang="scss">
.content{
.imgs_class{
height: 400rpx;
width: 400rpx;
border-radius: 30rpx;
}
canvas{
height: 800rpx;
width: 800rpx;
}
.v_block{
display: flex;
margin-top: 39rpx;
align-items: center;
}
}
</style>
线上版本
欢迎大家查看线上版本:
总结
当前版本线上可能无法下载图片,新版本正在发布。
代码部分本地运行没有问题,发布后有授权问题,正在优化中。后续持续发布。