小程序用Canvas点击保存自定义二维码
html:部分
<canvas canvas-id="myCanvas" style="width:320px;height:400px;margin:30rpx auto;"/>
<view @tap='saveImg' style='width:150rpx;height:50rpx;background:#000;color:#fff;
text-align:center;line-height:50rpx;border-radius:10rpx;
font-size:24rpx;margin:0 auto'>保存</view>
js: 部分
（备注：项目是用mpvue，uni-app，vue 语法可以直接使用：小程序开发开发框架。小程序原生用的话，自己转一下this 指向赋值就可以了）
data(){
return{
img: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566540117318&di=016c1af6ebfe2182af0337e312770091&imgtype=0&src=http%3A%2F%2Fd-pic-image.yesky.com%2F1080x-%2FuploadImages%2F2019%2F044%2F59%2F1113V6L3Q6TY.jpg"
}
},
onShow(){
let that=this;
//先下载下来，比如我们的logo（没有下载 真机无效图片）
wx.downloadFile({
url: that.img,
success:function(res){
console.log(res);
that.img= res.tempFilePath
that.canvasImg();
}
})
},
//画出画布
canvasImg(){
const ctx = wx.createCanvasContext('myCanvas');
// const grd = ctx.createLinearGradient(0, 0, 320, 0);//创建了一个线性的渐变颜色 前两个参数起点横纵坐标，后两个参数终点横纵坐标
// grd.addColorStop(0, '#EFDCB2');
// grd.addColorStop(1, '#EFDCB2');
// ctx.setFillStyle(grd); //为创建的canvans上下文添充颜色 如果没有设置 fillStyle，默认颜色为 black。
ctx.fillStyle='#EFDCB2';//背景色
ctx.fillRect(0, 0, 320, 400);
ctx.fillStyle="#ffffff";
ctx.fillRect(50,60,220,220); //白色填充色的背景
ctx.fillStyle="#ffffff";
ctx.fillRect(0,340,320,60); //填充色的背景
ctx.drawImage(this.img, 70, 80, 180, 180); //里面的参数无非就是图片放置的位置即图片的横纵坐标，图片的宽高
ctx.setFillStyle("#000000");
ctx.setFontSize(20); //字大小
ctx.setTextAlign('center'); //是否居中显示，参考点画布中线
ctx.fillText('店铺二维码', 160, 320); //150:canvas画布宽320，取1/2，中间，280：纵向位置
ctx.drawImage(this.img, 50, 350, 40, 40); //logo
ctx.setFillStyle("#333333");
ctx.setFontSize(22); //字大小
ctx.setTextAlign('center'); //是否居中显示，参考点画布中线
ctx.fillText('中琛源溯源营销', 180, 380); //150:canvas画布宽320，取1/2，中间，280：纵向位置
//最外面的边框
ctx.setStrokeStyle('#EFDCB2');
ctx.strokeRect(0, 0, 320, 400);
ctx.draw(); //画，生成
},
//导出画布
saveImg() {
setTimeout(()=>{
wx.canvasToTempFilePath({ //保存画布
x:0,
y:0,
width: 320, //画布宽高
height: 400,
destWidth: 600, //画布宽高*dpr 以iphone6为准
destHeight: 800,
canvasId: 'myCanvas',
success: function (res) {
console.log(res.tempFilePath) //生成的临时图片路径
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function (res) {
wx.showToast({
title: '保存成功',
})
}
})
}
})
},100)
}
有问题可以提出T~T
