2021-07-14

项目场景：h5使用canvas制作海报图片以及文案及其模糊

原因分析：

因为在绘制的过程中画布内容的实际大小是根据 canvas 的 width 与 height 属性设置的，而 style 或者CSS设置的width 与 height 只是简单的对画布进行缩放。

这里可以将 canvas 比喻为一个 img ，其中画布的 width 与 height 属性，相当于 img 中图片的原始尺寸；我们使用JS在画布上绘制的内容对应的就是 img 中的图片；而 style 或者CSS设置的 width 与 height ，就是设置 canvas 或者 img 在页面上要显示的大小。

因此这里要解决模糊的做法，就是将这张“图片”变得高清一点，然后缩小了来显示。具体实现就是将画布的大小设置为实际显示大小的两倍，然后在canvas的css属性设置正常显示的宽高，

解决方案：

要使用img标签展示，用canvas画 需使用scale放大之后再画

pyqClick() {
let canvas = document.createElement(“canvas”);
let context = canvas.getContext(“2d”);
canvas.width = 1340
canvas.height = 1352
context.fillStyle="#FFFFFF"
context.fillRect(0,0,canvas.width,canvas.height);
context.scale(4.5,8)
var img = new Image();
img.src = imgBanner;
img.onload = function () {
context.drawImage(this, 0, 0, 300, 90); //背景
};
context.font = “8pt Arial”;
context.fillStyle = “#333”;
context.fillText(“全场景税务管理方案”, 15, 100); //文字
context.stroke();
context.moveTo(15,107)
context.lineTo(285,107)
context.strokeWidth=‘1’
context.strokeStyle=’#F0F0F0’
context.font = “6pt Arial”;
context.fillStyle = “#333”;
context.fillText(“长按保存图片至相册！”, 170, 140); //文字
context.stroke();
var img2 = new Image();
img2.src = this.canvasImg;
img2.onload = function () {
context.drawImage(this, 25, 110, 120, 55); //背景
};
context.stroke();
let that = this
setTimeout(function(){
that.isShow=true
// that.saveQrCode(canvas)
//添加属性
canvas.setAttribute(“id”, “thecanvas”);
//读取属性值
// document.getElementById(“firstCanvas”).appendChild(canvas);
// 将图片转成base64格式
var img = canvas.toDataURL(“image/jpeg”, 1.0); // toDataUrl可以接收2个参数，参数一：图片类型，参数二： 图片质量0-1（不传默认为0.92）
this.isImg = true;
setTimeout(function(){
console.log(document.getElementById(“base64Img”))
document.getElementById(“base64Img”).src= img; // 将base64格式图片显示到页面上
},0)
},1000)

}