h5 使用canvas绘制海报并保存到本地

最近做了一个项目，需求是这样的：保存海报到本地，如图

点击保存之后需要下载到本地

刚开始采用的是html2canvas找个插件，可以用但是发现保存的图片很模糊，如下：

这样肯定是不行的，于是决定用canvas手写一个

也很简单，大概说一下思路，

就是先创建一个画布，然后等待图片加载完成后将图片绘制到画布上，

由于二维码是异步请求的，所以在上一个img的onload方法中再创建一个二维码的图片，

再画到这个画布上，

利用canvas的toDataURL()转为base64的图像地址

最后利用a标签的下载功能保存到本地就可以

话不多说，上代码：

// 使用canvas绘制图片
const generateCanvas = (
    url: string = "/assets/images/img-invite1.png"
): void => {
    var c: any = document.getElementById("canvas");
    var ctx = c.getContext("2d");    //创建画布
    var img = document.createElement("img");
    img.width = 1050;          
    img.height = 1695;
    img.src = url;
    img.onload = function () {     //图片加载完成之后
        ctx.drawImage(img, 0, 0, 1050, 1695);    // 后面两个参数可以尽量大一点，让图片更清晰，需要与图片宽高一致
        ctx.font = "35px Arial";
        ctx.fillStyle = "#fff";
        ctx.fillText(`我的邀请码：${userInfo.value.promotionCode}`, 380, 1550);
        var img1 = document.createElement("img");    //创建第二个图片，这是二维码图片
        img1.width = 300;
        img1.height = 300;
        img1.src = inviteImgCode.value;           //inviteImgCode.value是请求的二维码地址
        img1.onload = function () {             
            ctx.drawImage(img1, 380, 1100, 300, 300);  // 再绘制一遍
            var eleLink = document.createElement("a");     // 下面就是保存的步骤了，很简单 自行看看
            eleLink.href = c.toDataURL(); // 转换后的图片地址
            eleLink.download = "海报";
            document.body.appendChild(eleLink);
            // 触发点击
            eleLink.click();
            // 然后移除
            document.body.removeChild(eleLink);
        };
    };
};

最终效果如下，很清晰

有需要的小伙伴自行觅食哈哈哈~，

h5 使用canvas绘制海报并保存到本地

猜你喜欢