小程序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
});
}
})
}
})
},
所以官方开源的:wxml-to-canvas
https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/wxml-to-canvas.html
和通过json绘制分享图了解下:
https://developers.weixin.qq.com/community/develop/article/doc/000ac686c5c5506f18b87ee825b013
楼主你好,根据你上面的代码,做写了这个代码片段,完全不能生成你说的效果,请帮忙看看问题,小程序代码可以直接打开,放一张图片1go.png
在index.js相同目录下;