原创

通过浏览器控制台将div下载成图片

应用场景:通过浏览器控制台将页面上指定的div转化为图片下载下来。

有的小伙伴可能会说截图他不香么,我是因为要从旧项目中取一张echarts无背景色的地图,地图又是一小块一小块的,恰巧又没有下载功能,就找了这么个折中的方法,有需要的小伙伴可以看一看。

操作步骤:

  1. 通过chrome控制台查看源码获取要下载的div的id,以csdn首页为例
    file
    id为floor-www-index_558
    2.在控制台输入如下代码,回车执行:
    var script = document.createElement('script');
    script.src = "https://file.irule.cn/js/downloadDiv.js";
    document.getElementsByTagName('head')[0].appendChild(script);
    
    执行结果如下:
    file

3.执行downloadDiv("floor-www-index_558"),图片已下载成功
file

downloadDiv函数有两个参数,第一个参数为div的id,第二个参数为div的背景颜色,第二个参数不传的情况下默认无背景颜色(透明),我们再试下添加颜色
执行:downloadDiv("floor-www-index_558","#0c75ab"),效果如下:
file

注意:两个参数均为字符串

至此已经下载好了想要的图片,只需要实现功能的童鞋就不用往下看了,后面内容是实现的代码。

关键代码:

其实整个过程就是在控制台引入了一个js,再执行了一个函数,看看引入的js

var script = document.createElement('script');
script.src = "https://file.irule.cn/js/html2canvas.js";
document.getElementsByTagName('head')[0].appendChild(script);

function downloadDiv(divName,color){
    let imgCanvas= document.createElement("canvas");
    let w = window.getComputedStyle(document.getElementById(divName)).width
    let h= window.getComputedStyle(document.getElementById(divName)).height
    imgCanvas.width = parseInt(w)*2;
    imgCanvas.height = parseInt(h)*2;
    imgCanvas.style.width = w;
    imgCanvas.style.height =h;
    imgCanvas.style.background = 'transparent';
    let context = imgCanvas.getContext("2d");
    context.scale(2, 2);
    let backendColor = color ? color : null;
    let opts ={
        canvas: imgCanvas,
        backgroundColor: backendColor,//背景颜色
    };
    html2canvas(document.getElementById(divName), opts).then(function(canvas) {
        let a = document.createElement("a");
        a.href = canvas.toDataURL();
        a.download = divName;
        a.click();
    });
}

代码也很简单,就是引入了html2canvas.js以后创建了一个新的画布,把div内容绘制成图片进行下载。当然这里的通过id获取html节点也可以改成class、tag等其他选择器,有兴趣的小伙伴可以自己实现。

正文到此结束