前端canvas生成海报并保存到本地，高度还原

最近发现很多小伙伴遇到一些需求就是需要前端生成一个海报，有的选择用插件比如html5canvas,

 但是这个有个缺点就是有时候生成的海报很模糊，不太好用，

接下来分享一个我用canvas生成的海报，可以参考：

1. 页面上定义一个canvas，设置宽度和高度是设计图的两倍  
<canvas id="positionShareCanvas" ref="positionShareRef" width="1760" height="2100" style="display:none"></canvas>

2. 获取canvas
const canvas = document.getElementById("positionShareCanvas");
const ctx = canvas.getContext("2d");
var img = document.createElement("img");
img.width = 880;        // 设置背景图片宽高，为设计图原始宽高就行
img.height = 1220;
img.src = "xxxxxxx";    // 设置背景图片的地址
img.onload = function () {       // 图片加载完成后
    ctx.drawImage(img, 0, 0);    // 从canvas画布的左上角开始绘制
    ctx.font = "48px Arial";     // 设置字体大小
    ctx.fillStyle = "#979797";   // 设置字体颜色
    ctx.fillText("绘制的文字", 96, 100)    //设置字体，位置在 x坐标，y坐标，这里的x ,y 坐标都是设计图尺寸的两倍，  下面就是一次类推，

    ……………………………………
    ………………

3. 接下来就是保存图片
    var eleLink = document.createElement("a");     
    eleLink.href = canvas.toDataURL(); // 转换后的图片地址
    eleLink.download = `${t('usdtcontract.position')}`;
    document.body.appendChild(eleLink);
    // 触发点击
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
}

最终实现效果

 

亲测好用………………