html2canvas - 实现网页截图(+下载截图) 功能

偏执的太偏执、 2022-01-09 06:41 467阅读 0赞

实现：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

这里倍数scale一开始是4倍，是在某个项目中太糊时搞得，但是后来到了另一个移动端项目，在微信中截图后的base64码为空。在电脑就好。详见[https://www.cnblogs.com/padding1015/p/9225517.html][https_www.cnblogs.com_padding1015_p_9225517.html]

后改成2倍就没事了。所以应用于移动端的话，还是改2倍比较好。

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格式的图片功能

仓促记录，待完善和测试

html2canvas依赖

/\*!

\* html2canvas 1.0.0-alpha.12 <https://html2canvas.hertzen.com>

\* Released under MIT License

\*/

转载于:https://www.cnblogs.com/padding1015/p/8947062.html

[https_www.cnblogs.com_padding1015_p_9225517.html]: https://www.cnblogs.com/padding1015/p/9225517.html