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 相关文章推荐
Javascript继承机制的设计思想分享
Aug 28 Javascript
chrome原生方法之数组
Nov 30 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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
珊瑚虫IP库浅析
2007/02/15 PHP
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
PHP实现事件机制的方法
2015/07/10 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
实现python版本的按任意键继续/退出
2016/09/26 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
Java基础类库面试题
2013/09/04 面试题
演讲稿怎么写才完美
2014/01/02 职场文书
高二化学教学反思
2014/01/30 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
党建工作经验交流材料
2014/05/25 职场文书
部门活动策划方案
2014/08/16 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python