JS - 原生js实现 网页截图(+下载截图) 功能

实现:html2canvas + canvas.toDataURL

首先,引入依赖插件:

import { html2canvas } from './html2canvas';

html2canvas截图模糊处理:

 1 /*图片跨域及截图模糊处理*/
 2 let canvasContent = document.getElementById('canvas'),//需要截图的包裹的(原生的)DOM 对象
 3     width = canvasContent.clientWidth,//canvasContent.offsetWidth || document.body.clientWidth; //获取dom 宽度
 4     height = canvasContent.clientHeight,//canvasContent.offsetHeight; //获取dom 高度
 5     canvas = document.createElement("canvas"), //创建一个canvas节点
 6     scale = 4; //定义任意放大倍数 支持小数
 7 canvas.width = width * scale; //定义canvas 宽度 * 缩放
 8 canvas.height = height * scale; //定义canvas高度 *缩放
 9 canvas.style.width = canvasContent.clientWidth * scale + "px";
10 canvas.style.height = canvasContent.clientHeight * scale + "px";
11 canvas.getContext("2d").scale(scale, scale); //获取context,设置scale

opts配置:

1 let opts = {
2     scale: scale, // 添加的scale 参数
3     canvas: canvas, //自定义 canvas
4     logging: false, //日志开关,便于查看html2canvas的内部执行流程
5     width: width, //dom 原始宽度
6     height: height,
7     useCORS: true // 【重要】开启跨域配置
8 };
9 //部分配置,其他另配

使用:

 1 let shareContent = document.getElementById('XXX');
 2 export let html = (type,toDown=false) =>{
 3   html2canvas(domContent,opts).then(function(canvas){
 4     let imgUrl =  canvas.toDataURL('image/' + type);
 5     if(toDown){
 6       window.location.href = imgUrl;
 7     }else{
 8       return imgUrl;
 9     }
10   });
11 }

调用

1 html('jpg') //只获取base64后的jpg图片地址
2 html('png',true) //下载png格式的图片功能

仓促记录,待完善和测试

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

React16中的服务端渲染(译)

本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 React 16发布了。 React 16有很多令人兴奋的新东...

7739
来自专栏一“技”之长

iOS好用的第三方侧边栏控件——MMDrawerController

        很多应用程序都采用了侧边栏这样的界面结构,MMDrawerController是一个轻量级的侧边栏抽屉控件,其支持左侧抽屉和右侧抽屉,可以很好的...

642
来自专栏前端小叙

手机端网页使用html5地理定位获取位置失败的解决办法

网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端...

3446
来自专栏编程坑太多

react-native总结心得

1202
来自专栏Youngxj

41个Web开发者都收藏的实用代码

1893
来自专栏Rindew的iOS技术分享

Swift 无限轮播YLCycleViewYLMenuViewYLSinglerowView

1719
来自专栏猿人谷

Cocoa编程中视图控制器与视图类详解

iPhone编程规则是:一个窗口,多个视图。UIView是iPhone屏幕上很多控件的基础类。每个iPhone用户界面都是由显示在UIWindow(这其实也是个...

2225
来自专栏前端说吧

JS - 原生js实现 网页截图(+下载截图) 功能

8515
来自专栏技术博客

JavaScript 处理Iframe自适应高度的问题

 用到的就是iframe嵌套的页面加载完毕的时候,运用onload事件来获取嵌套在iframe中网页的高度,然后赋值给Iframe的高度即可。

1882
来自专栏云瓣

React之父子组件传递和其它一些要点

react是R系技术栈中最基础同时也是最核心的一环,2年不到获取了62.5k star(截止到目前),足可见其给力程度。下面对一些react日常开发中的注意事项...

3498

扫码关注云+社区