小程序生成图片并保存到手机
2018-11-25 本文已影响142人
绿啊绿啊绿刺猬
才意识到及时总结和做笔记的重要性。很多东西都是用的时候查，用完就忘了，下次还要继续查，关键是依然看不懂。哎，心累。虽然现在写了也不一定记住，但是复制自己写的代码总归容易一点。
还有，今晚不想加班啊啊啊啊啊。
让我回家早睡吧。
再加下去我这一头茂密的秀发就要保不住了。
哭唧唧。
image.png
好了好了，哭着也要搬砖。
我也是参考别人的https://blog.csdn.net/qq_37375882/article/details/79419596。还有php代码（虽然我看不懂），有需要的小伙伴建议参考喔（迷妹脸）。
关于canvas宽度自适应：https://blog.csdn.net/zSY_snake/article/details/81188128
关于canvas绘制圆形头像：https://www.cnblogs.com/-mrl/p/9072009.html
关于canvas绘制图片：https://developers.weixin.qq.com/miniprogram/dev/api/CanvasContext.drawImage.html
关于canvas绘制网络图片：https://blog.csdn.net/qq_30641447/article/details/79377784?from=singlemessage
（现在被我改的很乱，有空再整理主要是参考，有问题可以评论问我）
想要的效果图（紫色的虚线框不知道哪来的，请忽略。）：
image.png
好了，上我自己的代码：
<view class='canvas_box'>
<canvas style="margin:0 auto;width:375px; height:596px;" canvas-id="myCanvas" hidden="{{canvasHidden}}"></canvas>
<view class='canvas_btn' bindtap='savetup'>
<image src='/pages/image/btn_bg.png'></image>
保存图片
</view>
</view>
<view class='canvas_sign'>保存图片到手机后，您可以到朋友圈分享该折扣</view>
page{background:#fff;}
.canvas_box{width:750rpx;height:1140rpx;position:relative;}
.canvas_btn{position:absolute;width:360rpx;height:70rpx;line-height:64rpx;left:196rpx;bottom:-35rpx;text-align:center;color:#fff;z-index:2;}
.canvas_btn image{position:absolute;width:360rpx;height:70rpx;top:0;left:0;z-index:-1 !important;}
.canvas_sign{text-align:center;margin:20rpx 0;color:#959595;margin-top:60rpx;}
data: {
bgImgPath: '/pages/image/cloth.png',//封面大图
xcxcode:"/pages/image/loved.png",//二维码
price:'159',//价格
title:'nazze 日系工装飞行员冬季夹克男',//标题
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
that.setData({
// nickName: app.globalData.userInfo.nickName,
// avatarUrl: app.globalData.userInfo.avatarUrl
nickName: '乐生',
avatarUrl: ''//这是你的头像地址
})
//1. 请求后端API生成小程序码
//that.getQr();
//2. canvas绘制文字和图片
const ctx = wx.createCanvasContext('myCanvas');
var imgPath = '/pages/image/canvas.png';//黄色边框
var avatarUrl = that.data.avatarUrl;//头像
var nickName = that.data.nickName;//昵称
var bgImgPath = that.data.bgImgPath;//封面大图
var basicprofile = '/pages/image/zhiwen.png';//指纹图片
var xcxcode = that.data.xcxcode;//二维码
var price = that.data.price;//价格
var title=that.data.title;//标题
//填充背景（图片的白色背景）
ctx.setFillStyle('#ffffff');
ctx.fillRect(0, 0, 375, 596);//坐标和宽高
// 第一张图片（黄色边框）
ctx.drawImage(imgPath, 18, 26, 340, 544);
// 第二张图片（头像）
ctx.drawImage(avatarUrl, 158, 47, 60, 60);
//绘制昵称
ctx.setFontSize(15);
ctx.setFillStyle('#000000');
ctx.fillText(nickName, 173, 127);
//绘制标题
ctx.setFontSize(18);
ctx.setFillStyle('#000000');
ctx.fillText('发起了一个折扣详情', 107, 163);
// 第三张图片（封面大图）
ctx.drawImage(bgImgPath, 38, 185, 300, 162);
//绘制符号￥
ctx.setFontSize(15);
ctx.setFillStyle('#DDB039');
ctx.fillText('￥', 160, 379);
//绘制价格
ctx.setFontSize(26);
ctx.setFillStyle('#DDB039');
ctx.fillText(price, 174, 381);
//绘制标题
ctx.setFontSize(15);
ctx.setFillStyle('#000');
ctx.fillText(title, 57, 410);
//绘制一条虚线
// ctx.strokeStyle = 'blue';
// ctx.beginPath();
// ctx.setLineWidth(1);
// ctx.setLineDash([2, 4]);
// ctx.moveTo(10, 287);
// ctx.lineTo(230, 287);
// ctx.stroke();
//绘制指纹图标
ctx.drawImage(basicprofile, 76, 438, 67, 66);
ctx.setFontSize(11);
ctx.setFillStyle('#000');
ctx.fillText('长按识别小程序码', 66, 526);
//绘制二维码
ctx.drawImage(xcxcode, 218, 426, 102, 102);
ctx.draw();
},
savetup: function () {
var that = this;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 375,
height: 596,
destWidth: 375,
destHeight: 596,
canvasId: 'myCanvas',
success: function (res) {
//调取小程序当中获取图片
console.log(res.tempFilePath);
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showModal({
title: '图片保存成功！',
content: '请将图片分享到朋友圈',
showCancel: false,
confirmText: '知道了',
confirmColor: '#72B9C3',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
}
}
})
}
})
},
fail: function (res) {
console.log(res)
}
})
},
最终效果图（红色小心心那里应该是二维码）：
wxc5a2dd32fd69cc6d.o6zAJs8z7fmUIAYqvc_i4B-emrXU.zTkK0qqj7PVGf6f9aa7b4cae6660597986e9b8fa2d05.png
图片路径和文字改成自己的，粘过去就能用。改改坐标啥的就行。如果有疑问请评论，我已经满脑子浆糊在崩溃的边缘试探。
加班加到想吐啊啊啊啊（也有可能是奶茶喝多了）
一个很好用的东西，canvas文字居中：
ctx.setTextAlign('center')
ctx.fillText('这是一段文字', 187 * upx, 122 * upx);//187是中轴线
