domtoimage实现gis地图导出图片

这篇博客介绍了如何利用domtoimage插件将网页元素转换为图片。首先,需要下载并引入该插件,然后通过指定过滤条件获取指定ID的div元素。接着,调用domtoimage的toBlob方法将元素转换为blob对象,再将其转化为base64编码,最后可以调用saveAs函数保存图片或通过回调函数处理base64数据。
摘要由CSDN通过智能技术生成

1、domtoimage插件自行下载,在页面中引入domtoimgge插件

2、直接下载图片

var exportOptions = {
    filter: function(element) {
        return true;
    }
};
var node = document.getElementById('printDiv');
domtoimage.toBlob(node, exportOptions)
    .then(function(dataURL) {
        var name="专题图.png";
        window.saveAs(dataURL,name);
    });

3、获取base64位码

var exportOptions = { filter: function(element) { return true; } };

var node = document.getElementById('printDiv');

 domtoimage.toBlob(node, exportOptions)
                    .then(function(dataURL) {
                        me.blobToDataUR(dataURL,function(args){
                            var parts = args.split(';base64,');
                            data=parts[1];
                            if(callback)
                                callback(data);
                        })
                    });

blobToDataUR:function (blob, callback) {
    var a = new FileReader();
    a.onload = function (e) { callback(e.target.result); }
    a.readAsDataURL(blob);
},
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值