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 DataSet数据源处理代码
Mar 29 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
Node登录权限验证token验证实现的方法示例
May 25 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
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
JavaScript延迟加载
2021/03/09 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
Python利用命名空间解析XML文档
2020/08/10 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
春节联欢晚会主持词
2014/03/24 职场文书
公司年会策划方案
2014/05/17 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
公司授权委托书
2014/10/17 职场文书
给医院的感谢信
2015/01/21 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python
阿里云日志过滤器配置日志服务
2022/04/09 Servers
Go语言测试库testify使用学习
2022/07/23 Golang