canvas合并图片简单用法

需求：保存一个付款图片，图片中包含 二维码 + 文字

插件：第三方jquery插件

写法：

1、按照第三方插件的提示，这样可以展示生成二维码

<div id="pop">
	<div id="output"></div>
	<div id="title">想去旅行的静静</div>
</div>

jQuery(function(){
	jQuery('#output').qrcode({
	    render: "canvas", //也可以替换为table
	    id: "demo",
	    foreground: "#2d2d2d",
	    width: 200,
    	height: 200,
	    background: "#FFF",
	    text: "https://blog.csdn.net/weixin_39107711"
	});
})

2、 将canvas转化成image方法

参考这里或者这里，可以把canvas解析成base64的图片。

3、接下来我需要把文字也加入到图片中，也可以说是两个canvas合并。

将文字绘入canvas中，⚠️要使用canvas标签

<canvas id="title" width="300" height="100"></canvas>
function draw(id){
    // 获取canvas元素
    let canvasWrap = document.getElementById(id);
    // 获取属性和方法
    let context = canvasWrap.getContext("2d");
    // 绘制文字
    let str = "Hello World";
    context.font="30px Microsoft YaHei";
    context.textAlign="center";
    context.strokeText(str,100,50);
}

strokeText和fillText都可以实现，这两个有什么区别？

fillText() 方法在画布上绘制填色的文本bai。du文本的默zhi认颜色是黑色。

strokeText() 方法是用来在画布上绘制文本（没有填色）。文本的默认颜色是黑色。

接下来两个向一个canvas中绘制图片+文字，然后将这个canvas转化成图片，就可以了。

<div id="pop">
	<div id="originQR"></div>
	<canvas id="originTxt"></canvas>
</div>
<canvas id="realpop"></canvas>
<div id="demo"></div>

jQuery(function(){
	var screenWidth = window.screen.width
	console.log(screenWidth)
	jQuery('#originQR').qrcode({
	    render: "canvas", //也可以替换为table
	    foreground: "#2d2d2d",
	    width: screenWidth * 0.3,
    		height: screenWidth * 0.3,
	    background: "#FFF",
	    text: "https://blog.csdn.net/weixin_39107711"
	});

	var originQrId = document.getElementById("originQR");
	var originQrCanvas = originQrId.getElementsByTagName('canvas')[0];
	var realpop = document.getElementById('realpop')
	realpop.Width = screenWidth * 0.9;
	realpop.Height = screenWidth * 1.2;
	var context = realpop.getContext("2d");
	context.drawImage(originQrCanvas, screenWidth*0.2, 30)
	writeToCanvas(context, '我想静静', screenWidth*0.25, screenWidth*0.37)
	convertCanvasToImage(realpop)
})
function writeToCanvas(context, string, width, height){
	// 设置字体
	context.font = "16px bold 黑体";
	// 设置颜色
	context.fillStyle = "#e60012";
	// 设置水平对齐方式
	context.textAlign = "center";
	// 设置垂直对齐方式
	context.textBaseline = "middle";
	// 绘制文字（参数：要写的字，x坐标，y坐标）
	context.fillText(string, width, height);
}
function convertCanvasToImage(canvas){
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	document.getElementById('demo').appendChild(image)
	return image;
}

 这个时候，我发现又有个坑，图片不清晰，是模糊的。

引入了一个hidpi-canvas.min.js组件，发现图片清晰了，但是图片长度不太对，保存的图片是这样的

这时还需要配合hidpi-canvas.min.js来做一下处理。

代码还需要整理一下。