JS中使用cavas截图网页并解决跨域及模糊问题


Posted in Javascript onNovember 13, 2018

前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地。

首先对于网页截图,我用的是canvas实现,获取你需要截图的模块的div,从而使用canvas对你需要的模块进行截图。

我们先来引入canvas的js文件,js文件获取地址官网主页:http://html2canvas.hertzen.com/

<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>

div按钮代码

<div><a id="down" href="" download=" rel="external nofollow" downImg">下载按钮</a></div>
//href用来取到值 要写个空 down load是下载图片出来的名称

jsp代码

function test() {

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


 //创建一个新的canvas
  let _canvas = document.querySelector('#dijit__TemplatedMixin_0');

  //这里面填写 你需要截图的div
  var w = parseInt(window.getComputedStyle(_canvas).width);

  var h = parseInt(window.getComputedStyle(_canvas).height); 
  canvas2.width = w * 2;
  canvas2.height = h * 2;






//将canvas画布放大2倍或者更多,然后盛放在较小的容器内,就显得不模糊了
  canvas2.style.width = w + "px";
  canvas2.style.height = h + "px";       
  var context = canvas2.getContext("2d");
  context.scale(2, 2);       //指图片偏移
  html2canvas(document.querySelector('#dijit__TemplatedMixin_0'), {  
//写需要截图的div    
   taintTest : false,  
   useCORS : true,   
   allowTaint :false, 
//这三串代码解决跨域问题  

   canvas : canvas2
  }).then(
    function(canvas) {
     document.querySelector("#down").setAttribute('href',canvas.toDataURL());


//down设置为你的点击键
    });
window.onload = test;

截图出来后,由于我的网址上有百度地图的api,地图图片等等一些东西,用canvas网页进行截图是就会发现所有图片的地方都是空白。这就是因为跨域。

来讲一下跨域问题,我举个例子说明这个跨域,比如我的网页里面有的图片不是来自于自己的服务器。那么,这张图片就和这个网页不是同域,那么html2canvas就无法对这种图片进行截图,如果你的网站的所有图片都放在单独的图片服务器上,那么用html2canvas对整个网页进行截图是就会发现所有图片的地方都是空白。

跨域问题网上好多大佬说用代理服务器来解决,但是感觉太麻烦,后来我使用了小段代码就OK了。

taintTest : false,  
useCORS : true,   
allowTaint :false, 
//注:useCORS:true和allowTaint:true 这两个都是来解决跨域问题的,但是并不可以一起使用,如果同时使用会出现错误。

对于截图模糊就调整canvas画布大小比如我上面写的*2,画布调大,容器小,截图自然就清楚了

截图成功呈现

总结

以上所述是小编给大家介绍的JS中使用cavas截取网页并解决跨区及模糊问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 #Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 #Javascript
koa源码中promise的解读
Nov 13 #Javascript
vue-router传递参数的几种方式实例详解
Nov 13 #Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 #Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 #Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 #Javascript
You might like
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
js常用函数 不错
2006/09/08 Javascript
多广告投放代码 推荐
2006/11/13 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
JavaScript 的继承
2011/10/01 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
node.js require() 源码解读
2015/12/13 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
python安装Scrapy图文教程
2017/08/14 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
对python中的高效迭代器函数详解
2018/10/18 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
python从子线程中获得返回值的方法
2019/01/30 Python
django之自定义软删除Model的方法
2019/08/14 Python
Python的互斥锁与信号量详解
2019/09/12 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
SQL SERVER面试资料
2013/03/30 面试题
销售简历自我评价
2014/01/24 职场文书
医师定期考核实施方案
2014/05/07 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
小学教师教学随笔
2015/08/14 职场文书
年终工作总结范文
2019/06/20 职场文书
导游词之南京夫子庙
2019/12/09 职场文书