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 条评论
登录 后参与评论

相关文章

来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

TakePhoto-轻量级Android照片处理框架V2.0发布

TakePhoto 简介 TakePhoto是一款用于在Android设备上获取照片(拍照或从相册、文件中选择)、裁剪图片、压缩图片的开源工具库,目前最新版本2...

3429
来自专栏河湾欢儿的专栏

放大镜

放大镜:淘宝等电商页面应用广泛... 思路:先让move块和bimg块隐藏,当鼠标移动到box上时,使move块和bimg块显示,获取鼠标当前的位置,然后经过...

763
来自专栏大数据钻研

前端面试那些坑之HTML篇

HTML 1、Doctype作用?标准模式与兼容模式各有什么区别? (1)、<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<html> 标签之前...

3419
来自专栏前端儿

关于 CommonJS AMD CMD UMD 规范的差异总结

根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是...

801
来自专栏Python疯子

给Mac系统浏览器扩展翻译功能

Google Chrome可以即时翻译网页。可是,如果你用惯了Safari,不想安装Google Chrome,又需要对外文网页即时翻译,那么,请看下面:

833
来自专栏h5

h5仿微信web端|仿wechat网页聊天实战

《H5+CSS3微信h5微场景实战开发》仿微信H5电脑端聊天场景项目案例、h5仿微信聊天界面

23113
来自专栏无所事事者爱嘲笑

h5软键盘挡住输入框问题解决(android)

在部分android机型上测试点击靠下的输入框时遇到弹出的软键盘挡住输入框问题,ios可自身弹起(ios自身的调整偶尔也会出问题,例如第三方键盘会遮挡,原因是第...

1101
来自专栏互联网杂技

JavaScript中的各种模块化规范

前端发展到今天,已经有不少模块化的方案,比如AMD、CMD、UMD、CommonJS等,当然了,还有es6带来的模块系统,这些模块化规范的核心价值都是让 Jav...

3539
来自专栏进击的君君的前端之路

前端模块化

882
来自专栏iKcamp

iKcamp|基于Koa2搭建Node.js实战(含视频)☞ HTTP请求

POST/GET请求——常见请求方式处理 ?? iKcamp 制作团队 原创作者:大哼、阿干、三三、小虎、胖子、小哈、DDU、可木、晃晃 文案校对:李益、大力...

35614

扫码关注云+社区