通过浏览器控制台将div下载成图片
应用场景:通过浏览器控制台将页面上指定的div转化为图片下载下来。
有的小伙伴可能会说截图他不香么,我是因为要从旧项目中取一张echarts无背景色的地图,地图又是一小块一小块的,恰巧又没有下载功能,就找了这么个折中的方法,有需要的小伙伴可以看一看。
操作步骤:
- 通过chrome控制台查看源码获取要下载的div的id,以csdn首页为例
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);
3.执行downloadDiv("floor-www-index_558")
,图片已下载成功
downloadDiv
函数有两个参数,第一个参数为div的id,第二个参数为div的背景颜色,第二个参数不传的情况下默认无背景颜色(透明),我们再试下添加颜色
执行:downloadDiv("floor-www-index_558","#0c75ab")
,效果如下:
注意:两个参数均为字符串
至此已经下载好了想要的图片,只需要实现功能的童鞋就不用往下看了,后面内容是实现的代码。
关键代码:
其实整个过程就是在控制台引入了一个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等其他选择器,有兴趣的小伙伴可以自己实现。
正文到此结束
- 本文标签: JavaScript
- 版权声明: 本站原创文章,于2022年02月08日由sealy发布,转载请注明出处