vue通过html2canvas来将div保存成图片

html2canvas链接:官网

html如下: 

<div class="char" id="char" ref="char"></div>

vue方法如下: 

//图片转换格式的方法 直接使用就好  不需要知道为什么
            dataURLToBlob(dataurl) {
                let arr = dataurl.split(',');
                let mime = arr[0].match(/:(.*?);/)[1];
                let bstr = atob(arr[1]);
                let n = bstr.length;
                let u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], { type: mime });
            },
            /*保存图片的方法(即按钮点击触发的方法)
              第一个参数为需要保存的div的id名
              第二个参数为保存图片的名称 */
            saveImage(divText, imgText) {
                let canvasID = this.$refs[divText];
                let that = this;
                let a = document.createElement('a');
                 html2canvas(canvasID).then(canvas => {
                    let dom = document.body.appendChild(canvas);
                    dom.style.display = 'none';
                    a.style.display = 'none';
                    document.body.removeChild(dom);
                    let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
                    a.setAttribute('href', URL.createObjectURL(blob));
                    //这块是保存图片操作  可以设置保存的图片的信息
                    a.setAttribute('download', imgText + '.png');
                    document.body.appendChild(a);
                    a.click();
                    URL.revokeObjectURL(blob);
                    document.body.removeChild(a);
                });
            },

调用:

this.saveImage('char', '测试');

 

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值