html2canvas使用

最新推荐文章于 2025-05-30 09:19:00 发布

热心市名

最新推荐文章于 2025-05-30 09:19:00 发布

阅读量489

点赞数

CC 4.0 BY-SA版权

分类专栏： canvas 文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_51363158/article/details/130679384

canvas 专栏收录该内容

1 篇文章

订阅专栏

该文章演示了如何使用html2canvasJavaScript库将HTML内容转换为Canvas元素，通过示例代码展示了转换过程，并利用Canvas的toDataURL方法生成图片。文章还提及了html2canvas的一些配置选项和用途。

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

html2canvas主要用于将html转为canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<script src="./html2canvas.js"></script>

<div id="test">
    <button onclick="test()">点我</button>
    <div class="red"></div>
    <div class="font">Hello world!</div>
    <div class="font">Hello world!</div>
    <div class="font">Hello world!</div>
</div>
<script>
function test() {
    let el = document.querySelector("#test")

    // html2canvas([节点]， <配置选项>， [输出canvas])
    html2canvas(el,{
        /**
            名称	                 默认值	                 描述
            allowTaint	            false	                是否允许跨源图像污染画布
            backgroundColor	        #ffffff	                画布默认透明色
            canvas	                null	                现有的 canvas 元素作为绘图的基础
            foreignObjectRendering	false	                如果浏览器支持它，是否使用外部样式渲染
            imageTimeout	        15000	                加载图像的超时时间(毫秒)。设置为0表示禁用超时。
            ignoreElements	        (element) => false	    从呈现中移除匹配元素
            logging	                true	                使用调试日志
            onclone	                null	                当文档已被克隆以便呈现时调用的 callback 函数，可用于修改将要呈现的内容，而不影响原始源文档
            proxy	                null	                用于加载跨原点图像的代理的Url
            removeContainer	        true	                是否清除html2canvas临时创建的克隆DOM元素
            scale	                window.devicePixelRatio	用于渲染的比例。默认为浏览器的设备像素比率。
            useCORS	                false	                是否尝试使用CORS从服务器加载图像
            width	                width	                画布的宽度
            height	                height	                画布的高度
            x	                    x-offset	            裁剪画布的横向坐标
            y	                    y-offset	            裁剪画布的纵向坐标
            scrollX	                scrollX	                渲染元素时使用的x轴滚动位置(例如，如果元素使用position: fixed)
            scrollY	                scrollY	                渲染元素时使用的y轴滚动位置(例如，如果元素使用position: fixed)
            windowWidth	            Window.innerWidth	    渲染元素的窗口宽度
            windowHeight	        Window.innerHeight	    渲染元素的窗口高度
        */
    }).then(canvas => {
        
        /**
         * 回调的是一个canvas对象
         * toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码；
         * toDataURL(type, encoderOptions)
         * type: MIME规则（image类）
         * encoderOptions：表示图片的质量，取值范围是 0-1，默认为 0.92。
         * */ 

        var img = new Image()

        img.src = canvas.toDataURL('jpg')
        document.body.appendChild(img)
    });
}
</script>
</body>
</html>

<style>
#test {
    width: 200px;
    height: 200px;
    border: 1px solid yellow;
}
.red{
   background-color: red;
   width: 50px;
   height: 50px;
}
.font {
    height: 50px;
    font-size: 20px;
    color: red;
}
</style>

emm 有待实战。。