java div截图_Html网页DIV截图功能

需求及前提：

(1) 将web网页展示的某些图表，导出为图片保存；

(2) 图表可能是Canvas的(使用H5绘图组件生成的或者自己Draw的)，也可能是div组合出来的；

方案1：

使用html2canvas(某些浏览器需要引入依赖es6-promise.min.js,因为木有Promise对象)

和 canvas2image

示例：

$("#snap_btn_001").on("click",function(event){

event.preventDefault();

var w = $("#id001").width();

var h = $("#id001").height();

//这一坨代码是为了解决截图不清晰的问题，但是ratio应该根据浏览器的分辨率计算，这里先写死的一个数值

var ratio = 2;

//要将 canvas 的宽高设置成容器宽高的 Ratio 倍

var canvas = document.createElement("canvas");

canvas.id = "mycanvas";

canvas.width = w * ratio;

canvas.height = h * ratio;

canvas.style.width = w + "px";

canvas.style.height = h + "px";

var context = canvas.getContext("2d");

//然后将画布缩放，将图像放大ratio倍画到画布上

context.scale(ratio,ratio);

html2canvas(document.getElementById("id001"),{

allowTaint: true,

taintTest: false,

width: w,

height:h,

onrendered: function(canvas) {

var dataUrl = canvas.toDataURL();

var newImg = document.createElement("img");

//newImg.style = "display:none;"; //如果要导出，这儿可以隐藏，然后用canvas2image搞定

newImg.src = dataUrl;

document.body.appendChild(newImg);

}

});

参考文章：

方案2：

对于使用H5绘图组件的，多数组件本身提供了导出为图片的方法，调用或者配置即可。

例如echarts js 的saveAsImgae配置。

方案1和2对比：

(1) 方案1 使用范围广，如果图表包含了自定义的div，也能截图导出，但是清晰度有问题(根源是啥，需要研究html2canvas源码，我没研究，但是我相信可以解决。)

(2) 方案2，使用组件自身的导出，由于本身就是canvas了，少了前一步的转换，清晰度不错，就是只能导出组件自身的图表。

java div截图_Html网页DIV截图功能相关推荐

java网页截图_Java实现的简单网页截屏功能示例
本文实例讲述了Java实现的简单网页截屏功能.分享给大家供大家参考,具体如下: package awtDemo; import java.awt.AWTException; import java.a ...
java selenium div内嵌滚动条网页长截图发邮件
java selenium 网页内嵌滚动条截图发邮件主要问题下面展开说由于公司要求做一个接口,请求这个接口进行网页截图并发送邮件的功能,本来前期是用python写好了,but似乎不太符合要求,那 ...
电脑qq浏览器怎么滚动截长图_Mac系统如何轻松实现网页长截图功能
Mac 网页长截图在日常工作生活中,我们经常需要使用到截图功能,简单的一页截图使用常用的截图工具即可,但是有时会碰到需要截图多页内容或者整个网页,使用截图工具分页截图再拼接不仅复杂而且耗时. 那么针 ...
前端实现网页选区截图功能
先说说背景公司项目要实现一个网页截图,识别文字的功能思路很简单,前端实现截图,并把图片发送给后台,后台通过调用某度的ocr识别,识别出来文字,然后返回给前段展示. 身为前端的我,技术点也就在实现截 ...
Android之WebView网页滚动截图
WebView 网页滚动截屏,可对整个网页进行截屏而不是仅当前屏幕哦! 注意若Web页面存在position:fixed; 的话得在调用前设置为 position:absolute; 哦,否则会出现很 ...
android webview滚动到底部,Android WebView实现网页滚动截图
WebView 网页滚动截屏,可对整个网页进行截屏而不是仅当前屏幕哦! 注意若Web页面存在position:fixed; 的话得在调用前设置为 position:absolute; 哦,否则会出现很 ...
html div页面固定,将div固定浮动网页底部代码
div固定浮动网页底部CSS代码,非JS实现纯DIV CSS构造将DIV层静止浮动在网页阅读器底部的. CSS代码: position: fixed;bottom: 0;z-index: 100 正文 ...
Java实现网页截屏功能（基于phantomJs）
公司最近有个需求:把用户第一次的测量身体信息和最近一次测量信息进行对比,并且需要把对比的数据截成图片可以发给用户(需要在不打开网页的情况下实时对网页进行截图然后保存到服务器上,返回图片地址),通过网上 ...
某个网页一直不停刷新_利用浏览器做网页长截图
在平时写文章的时候,我经常需要插入一些截图,不知你有没有注意到,在能使用手机截图的情况下,我都尽量不在 PC 上进行截取操作. 其实有如下几个理由: 基于微信平台下,大多数用户使用手机进行阅读,在电脑 ...

java div截图_Html网页DIV截图功能

java div截图_Html网页DIV截图功能相关推荐

最新文章

热门文章