小程序canvas图片与文字生成新图片
小程序canvas图片文字合成技术，虽然不是什么牛逼的技术。但是我相信还是有很多的项目是需要这项技术，所以我把他写出来并且开源出来，也没有其他的什么目地。就是想让那些可能正在开发的小哥哥小姐姐们少些弯路罢了，仅提供些参考，哈 [图片] 1.WXML部分
生成图片并保存相册
2.WXSS部分 .shareImgs{width:350px;margin:20rpx auto;background-color:#fff;}
.saveImgBtn{color:#fff;background-color:#9933CC;height:90rpx;line-height:90rpx;font-size:32rpx;margin:40rpx;text-align:center;border-radius:8rpx;}
3.JS部分 canvasImgFun(){ //可用调用或在onLoad中直接调用
let _this = this
const ctx = wx.createCanvasContext('myCanvas')
ctx.rect(0, 0, 350, 568)
ctx.setFillStyle('#fff')
ctx.fill()
ctx.clip();//剪切
ctx.drawImage('小程序二维码图片地址', 105, 320, 140, 140,0,0)
ctx.draw()
ctx.beginPath()
ctx.font = 'normal bold 50px Monospaced Number,Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif'
ctx.setFillStyle('#9933CC')
ctx.setFontSize(50)
ctx.fillText('壹柒图图', 75, 100)
ctx.setFillStyle('#888')
ctx.setFontSize(14)
ctx.fillText('长按识别小程序码，进入壹柒图图', 70, 490)
ctx.font = 'normal bold 38px Monospaced Number,Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif'
ctx.setFillStyle('#515a6e')
ctx.setFontSize(31)
ctx.fillText('有头像工具装逼技巧', 33, 148)
ctx.draw(true);
},
saveCanvas(){
let _this=this
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 350,
height: 568,
canvasId: 'myCanvas',
success:function(res) {
console.log(res,'ssss')
let img = res.tempFilePath
wx.saveImageToPhotosAlbum({
filePath: img,
success(json) {
wx.showToast({
title:'成功保存',
icon: 'none',
duration: 2000
});
},
fail() {
wx.showToast({
title: '保存失败',
icon: 'none',
duration: 2000
});
}
})
}
})
},
淘的多小店