html2canvas保存图片H5以及PC端

441 阅读1分钟

我遇到这么一个需求,需要下载二维码,二维码使用RQCode生成,这里就不说了,说一下将生成的二维码下载为图片 第一种方法

优点: 1.可以生成图片给并下载

缺点 1.移动端不生效

 html2canvas(this.$refs.codeBox, { useCORS: true, })
     .then((canvas) => {
        let a = document.createElement("a");
        a.style.display = 'none';
        let link = canvas.toDataURL("image/jpeg")
        a.download = "二维码";
        a.click();
        a = null
        this.$message.success("下载成功");
    })

第二种方法

优点: 1.可以生成图片给并下载

缺点 1.移动端也是支持的,移动端仅限安卓,ios没测试

 html2canvas(this.$refs.codeBox, { useCORS: true, })
     .then((canvas) => {
         canvas.toBlob((blob)=> {
             let a = document.createElement("a");
             a.style.display = 'none';
             const link = window.URL.createObjectURL(blob);
             a.href = link;
             a.download = "二维码";
             a.click();
             a = null
             this.$message.success("下载成功");
             setTimeout(()=>{
                 URL.revokeObjectURL(link)
             },1000)
         })
        
    })