实现[微信]H5长按保存图片功能

最新推荐文章于 2025-04-15 16:17:51 发布

东小记

最新推荐文章于 2025-04-15 16:17:51 发布

阅读量2.7w

点赞数

CC 4.0 BY-SA版权

分类专栏：前端微信文章标签： html5 html javascript

本文链接：https://blog.csdn.net/qq_36436407/article/details/109101999

前端同时被 2 个专栏收录

16 篇文章

订阅专栏

微信

6 篇文章

订阅专栏

该博客介绍如何利用html2canvas JavaScript库将HTML页面转换为canvas并进一步转化为图片。首先，从GitHub下载html2canvas.js文件，然后在HTML中引入并设置所需参数。在JavaScript中，创建canvas元素，调整其大小以适应内容，处理设备像素比以防止模糊，最后调用html2canvas函数将指定DOM元素转换为canvas。转换完成后，将canvas转为图片并添加到页面上。参考链接提供了更多实现细节。

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

通过js插件html2canvas实现

a.下载html2canvas.js（github地址：https://github.com/niklasvh/html2canvas/releases/、官网地址：http://html2canvas.hertzen.com/）

b.个人需求实现

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>截图功能</title>
</head>
<script src="/js/jquery.js"></script>
<body>
<!-- 放置图片容器 -->
<div id="canvasContainer">
    <div class="poster_box">
        <img src="https://img-blog.csdnimg.cn/20200605172234757.png" alt="">
    </div>
</div>
</body>
</html>
<script src="/html2canvas/html2canvas.js"></script>
<script>
    // 创建一个新的canvas
    let Canvas = document.createElement('canvas');
    let width = document.getElementById('canvasContainer').width;  // 画布指定区域的宽
    let height = document.getElementById('canvasContainer').height;  // 画图指定区域的高
    let scale = DPR(); // 设备的devicePixelRadio
    // 将Canvas画布放大scale倍，然后放在小的屏幕里，解决模糊问题
    Canvas.width = width * scale;
    Canvas.height = height * scale;
    Canvas.getContext('2d').scale(scale, scale);
    html2canvas(document.getElementById('canvasContainer'),{
        canvas: Canvas,
        scale,
        logging: true,
        useCORS:true, // 允许使用跨域图片
        allowTaint: false, // 不允许跨域图片污染画布
        width: width + 'px',
        height: height + 'px',
    }).then(function(canvas) {
        let context = canvas.getContext('2d');
        // 关闭抗锯齿形
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
        // canvas转化为图片
        let canvasImg = canvas2Image(canvas, canvas.width, canvas.height);
        document.body.appendChild(canvasImg);
        $(canvasImg).css('width','100%')
            .css('height','100%')
            .css('position','absolute')
            .css('top','0')
            .css('left','0')
            .css('right','0')
            .css('bottom','0')
            .css('opacity','0');
    })
    /**
     * 画步转换成图片
     */
    function canvas2Image(canvas, width, height) {
        let retCanvas = document.createElement('canvas');
        let retCtx = retCanvas.getContext('2d');
        retCanvas.width = width;
        retCanvas.height = height;
        retCtx.drawImage(canvas, 0, 0, width, height, 0, 0, width, height);
        let img = document.createElement('img');
        img.src = retCanvas.toDataURL('image/jpeg');  // 可以根据需要更改格式
        return img;
    }

    /**
     * 根据window.devicePixelRatio获取像素比
     */
    function DPR() {
        if (window.devicePixelRatio && window.devicePixelRatio > 1) {
            return window.devicePixelRatio;
        }
        return 1;
    }
</script>