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中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
初识Node.js
Mar 20 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
JavaScript中的Function函数
Aug 27 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 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自动适应范围的分页代码
2008/08/05 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
JS 建立对象的方法
2007/04/21 Javascript
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python中对list去重的多种方法
2014/09/18 Python
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
Python字符串切片操作知识详解
2016/03/28 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
国贸专业的职业规划范文
2014/01/23 职场文书
中学政教处工作总结
2015/08/13 职场文书
python 判断文件或文件夹是否存在
2022/03/18 Python
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android