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

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

h5 使用canvas绘制海报并保存到本地_第1张图片

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

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

h5 使用canvas绘制海报并保存到本地_第2张图片

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

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

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

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

  1. 再画到这个画布上,

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

  1. 最后利用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绘制海报并保存到本地_第3张图片

h5 使用canvas绘制海报并保存到本地_第4张图片

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

你可能感兴趣的:(javascript,vue.js,前端,typescript,html5)