前端之路：html2canvas脱坑，（图片模糊，多次加载，图片跨域）

最新推荐文章于 2024-09-21 00:43:12 发布

了无牵挂的康言先森

最新推荐文章于 2024-09-21 00:43:12 发布

阅读量4.8k

点赞数 2

本文链接：https://blog.youkuaiyun.com/qq_33368846/article/details/100542343

版权

本文详细介绍了html2canvas截图插件的使用方法，包括不同版本的特性、参数配置及常见问题解决策略，如图片跨域、模糊问题和版本选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有女票的程序员真的颓废，都不记得多久没写心路历程了（T T）.

插件简介：

1.官网：http://html2canvas.hertzen.com/

2.GitHub：https://github.com/niklasvh/html2canvas/

3.版本：(压缩版地址就不贴了)

0.4.0（https://cdn.bootcss.com/html2canvas/0.4.0/html2canvas.js）

0.5.0（https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js）

1.0.0（http://html2canvas.hertzen.com/dist/html2canvas.js）

4.作用：

将页面dom 元素画到 canvas 上，视觉上达成了截图的效果。

该脚本允许您直接在用户浏览器上拍摄网页或其部分的“屏幕截图”。屏幕截图是基于DOM的，因此不可能100%准确到真实的表示，因为它没有生成实际的屏幕快照，而是基于页面上可用的信息构建屏幕快照。

5.使用：

0.4 -->    obj=dom对象（要转为图片的对象）

html2canvas(obj,  {
        //参数写这里
        useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用,下面解释)
        onrendered: function (canvas) {
           //相关操作写在这里。
            //canvas 对象已经画到了这个画布里面。可以对其进行操作
        }
    });


0.5 -->       可以用0.4的写法，也可以用1.0的写法  


1.0 -->  

    html2canvas(translation,
        {
           //参数写这里，参数数组。
           scale: 2,}
        ).then(function(canvas) {
           //相关操作，同上
        });

5.相关参数：

参数名	默认	介绍
allowTaint	`false`	是否允许图片跨域（跨域图片会使画布被污染，导致无法操作）
backgroundColor	transparent	生成的画布背景色，不设置则为透明图
canvas	`null`	可用作绘画基础的存在性容器元素
foreignObjectRendering	`false`	是否使用ForeignObject呈现(如果浏览器支持它)
imageTimeout	`15000`	加载图像的允许超时时间(以毫秒为单位).0为禁用超时。
ignoreElements	`(element) => false`	Predicate function which removes the matching elements from the render.
logging	`true`	为调试目的启用日志记录
onclone	`null`	回调函数，该函数在复制文档以进行呈现时调用，可用于修改将呈现的内容而不影响原始源文档。
proxy	`null`	属性的URL。代理用于加载跨原点图像。如果左空，跨原点图像将不会被加载。
removeContainer	`true`	是否清理已克隆的DOM元素-html2画布-临时创建
scale	`window.devicePixelRatio`	用于渲染的比例。（值为number，为倍数）。画布宽高,是style中的宽高几倍 (常用于调整清晰度)
useCORS	`false`	是否尝试使用CORS从服务器加载映像
width	`Element` width	`生成画布的宽度`
height	`Element` height	`生成画布的高度`
x	`Element` x-offset	偏移量x
y	`Element` y-offset	偏移量y
scrollX	`Element` scrollX	The x-scroll position to used when rendering element, (for example if the Element uses `position: fixed`)
scrollY	`Element` scrollY	The y-scroll position to used when rendering element, (for example if the Element uses `position: fixed`)
windowWidth	`Window.innerWidth`	Window width to use when rendering `Element`, which may affect things like Media queries
windowHeight	`Window.innerHeight`	Window height to use when rendering `Element`, which may affect things like Media queries