uni-app小程序canvas绘制宣传图片的爬坑整理（绘制本地图片，http链接图片和https链接图片）

<template>
    <canvas canvas-id="shareImg"></canvas>
</template>

1、canvas写入文字

const ctx = uni.createCanvasContext('shareImg');
ctx.fillText('hello,wold!', 30,20);//30X到左边的距离,20Y到顶部的距离，单位是px

2、canvas文字设置fontSize

const ctx = uni.createCanvasContext('shareImg');
ctx.setFontSize(25);//设置文字的fontSize为25px
ctx.fillText('hello,wold!', 30,20);

3、canvas设置文字颜色

const ctx = uni.createCanvasContext('shareImg');
ctx.setFillStyle('#fff');//设置文字颜色为白色
ctx.fillText('hello,wold!', 30,20);

4、canvas设置文字阴影

const ctx = uni.createCanvasContext('shareImg');
ctx.shadowOffsetX = -3; //用来设定阴影在 X轴的延伸距
ctx.shadowOffsetX = 4; //用来设定阴影在 Y轴的延伸距
ctx.shadowBlur = 2; //设定阴影的模糊程度 默认0
ctx.shadowColor = "rgba(255, 255, 255)"; //设定阴影颜色效果
ctx.font = 'normal bold 25px sans-serif';
ctx.fillText('hello,wold!', 30,20);

5、canvas设置文字居中

const ctx = uni.createCanvasContext('shareImg');
ctx.setTextAlign('center');//设置居中
ctx.fillText('hello,wold!', 100,20);//文字居中与0-100px距离之间居中

6、canvas绘制本地项目内的图片或是https链接图片

init(){
    const ctx = uni.createCanvasContext('shareImg');
    let img = "../../img.png";
    //let img = "https://static.daoba.com//221328929171.png";
    that.httpsDrawing(img , ctx, 0, 0, 330, 540).then((res) => {
        ctx.draw(true, () => {
		    that.share();
	    })
    })
},

//绘制本地图片和https链接的图片
httpsDrawing(codeimg, ctx, x, y, width, height, radius) {
//(codeimg:图片地址, ctx:canvas, x:起始x, y:起始Y, width:图片宽度, height:图片高度, radius:弧度)
	const that = this;
	return new Promise(function(resolve, reject) {
		wx.getImageInfo({
			src: codeimg,
			success: function(res) {
				if (radius) {
					ctx.save();
					ctx.strokeStyle = "#fffbff";
					ctx.beginPath();
					ctx.moveTo(x, y + radius);
					ctx.lineTo(x, y + height - radius);
					ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
					ctx.lineTo(x + width - radius, y + height);
					ctx.quadraticCurveTo(x + width, y + height, x + width, y + height -
						radius);
					ctx.lineTo(x + width, y + radius);
					ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
					ctx.lineTo(x + radius, y);
					ctx.quadraticCurveTo(x, y, x, y + radius);
					if (res.path) {
						ctx.clip();
						ctx.drawImage(res.path, x, y, width, height); // logo
					}
					resolve(true);
					ctx.restore()
				} else {
					ctx.drawImage(res.path, x, y, width, height) //背景
					resolve(true);
				}
			}
		})
	})
}

7、canvas绘制http网络图片

init(){
    const ctx = uni.createCanvasContext('shareImg');
    let img = "http://static.daoba.com//221328929171.png";
    that.httpsDrawing(img , ctx, 0, 0, 330, 540).then((res) => {
        ctx.draw(true, () => {
		    that.share();
	    })
    })
},

//绘制本地图片和http链接的图片，需要先将图片转换成为base64的格式，然后存入文件管理本地生成https的图片临时路径，再将图片绘制出来。因为微信小程序不支持http图片的绘制。
QRCodeDrawing(code, ctx, x, y, width, height, radius, pathVal){
	const that = this;
	return new Promise(function(resolve, reject) {
		const that = this;
		const fs = wx.getFileSystemManager();
		//随机定义路径名称
		var times = 'chuwanning';
		var codeimg = wx.env.USER_DATA_PATH + '/' + times + pathVal + '.png';
	
		//将base64图片写入
		fs.writeFile({
			filePath: codeimg,
			data: code.slice(22),
			encoding: 'base64',
			success: (el) => {
				//写入成功了的话，新的图片路径就能用了
				if (radius) {
					ctx.save();
					ctx.strokeStyle = "#fffbff";
					ctx.beginPath();
					ctx.moveTo(x, y + radius);
					ctx.lineTo(x, y + height - radius);
					ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
					ctx.lineTo(x + width - radius, y + height);
					ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
					ctx.lineTo(x + width, y + radius);
					ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
					ctx.lineTo(x + radius, y);
					ctx.quadraticCurveTo(x, y, x, y + radius);
					if (codeimg) {
						ctx.clip();
						ctx.drawImage(codeimg, x, y, width, height); // logo
					}
					resolve(true);
					ctx.restore()
				} else {
					ctx.drawImage(codeimg, x, y, width, height) //背景
					console.log('路径', res);
					resolve(true);
				}
			},
			fail: () => {
				uni.hideLoading()
			}
		});
	})
},

注意：本地写入存储的base64文件是需要清除的，不然当存储满了之后会出现图片无法绘制生成的情况。以下是清除图片写入文件代码。

//清除文件
clearFile() {
	const that = this;
	const fs = wx.getFileSystemManager();
	fs.readdir({ // 获取文件列表
		dirPath: wx.env.USER_DATA_PATH,
		success(res) {
			let indexVal = res.files.length;
			res.files.forEach((el) => {
				let name = (wx.env.USER_DATA_PATH + el).replace(/usr/g, "usr/");
				fs.unlink({
					filePath: name, // 这里注意。文件
					fail(e) {
						console.log('readdir文件删除失败：', e)
					},
					success(succ) {
						indexVal++;
						if (indexVal == 0) {
                            console.log('readdir文件删除成功：', succ);
						}
					}
				});
			})
		}
	})
},

8、将canvas绘制生成图片

//点击生成图片
share() {
	const that = this;
	wx.canvasToTempFilePath({
		canvasId: 'shareImg',
		success: function(res) {
			that.tempFilePath = res.tempFilePath;
			that.canvasShow = true;
			uni.hideLoading(); //绘制成功
		}
	})
},

9、点击保存图片到本地

//保存海报
onPreservation(){
	const that = this;
	wx.getSetting({
		success(res) {
			if (!res.authSetting['scope.writePhotosAlbum']) {
				wx.authorize({
					scope: 'scope.writePhotosAlbum',
					success() {
						that.saveImage()
					},
					fail() {
						wx.openSetting({
							success: (res) => {}
						})
					}
				})
			} else {
				that.saveImage()
			}
		}
	})
},

//保存图片到本地
saveImage() {
	const that = this;
	wx.saveImageToPhotosAlbum({
		filePath: that.tempFilePath,
		success: function(res) {
			setTimeout(function() {
				uni.navigateBack({
					delta: 1
				})
			}, 2000)
			uni.showToast({
				title: '保存图片成功',
				duration: 2000
			});
		},
		fail: function(err) {
			uni.showToast({
				title: '保存图片失败',
				icon: 'none',
				duration: 2000
			});
		}
	})
},