JavaScript移动端H5生成高清图片方案：解决Canvas模糊问题

作者：小圆点

时间：2026-10-25

本文详解在移动端H5页面中生成分享图片的技术方案。针对高清屏幕导致的Canvas模糊问题，通过获取window.devicePixelRatio调整Canvas物理尺寸与CSS样式比例，并调用html2canvas库实现高清渲染。最后结合微信环境特性，提供生成图片文件以支持长按保存至相册的完整实现逻辑。

文章目录

当前许多微信公众号运营活动需要生成图片功能，以便用户将图片分享给好友或发布到朋友圈，从而促进产品的传播与宣传。

1.

虽然可以使用原生Canvas API生成图片，但为了节省开发时间，直接采用了开源库html2canvas来实现该功能。

相关项目地址：html2canvas

在线演示地址：LiveDemo


    /**
     * 根据window.devicePixelRatio获取像素比
     */
    function DPR() {
        if (window.devicePixelRatio && window.devicePixelRatio > 1) {
            return window.devicePixelRatio;
        }
        return 1;
    }
    /**
     *  将传入值转为整数
     */
    function parseValue(value) {
        return parseInt(value, 10);
    };
    /**
     * 绘制canvas
     */
    async function drawCanvas (selector) {
        // 获取想要转换的 DOM 节点
        const dom = document.querySelector(selector);
        const box = window.getComputedStyle(dom);
        // DOM 节点计算后宽高
        const width = parseValue(box.width);
        const height = parseValue(box.height);
        // 获取像素比
        const scaleBy = DPR();
        // 创建自定义 canvas 元素
        var canvas = document.createElement('canvas');
        // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
        canvas.width = width * scaleBy;
        canvas.height = height * scaleBy;
        // 设定 canvas css宽高为 DOM 节点宽高
        canvas.style.width = `${width}px`;
        canvas.style.height = `${height}px`;
 
        // 获取画笔
        const context = canvas.getContext('2d');
 
        // 将所有绘制内容放大像素比倍
        context.scale(scaleBy, scaleBy);
 
        let x = width;
        let y = height;
        return await html2canvas(dom, {canvas}).then(function () {
            convertCanvasToImage(canvas, x ,y)
        })
    }
 
    /**
     * 图片转base64格式
     */
    function convertCanvasToImage(canvas, x, y) {
        let image = new Image();
        let _container = document.getElementsByClassName('container')[0];
        let _body = document.getElementsByTagName('body')[0];
        image.width = x;
        image.height = y;
        image.src = canvas.toDataURL("image/png");
        _body.removeChild(_container);
        document.body.appendChild(image);
        return image;
    }
    drawCanvas('.container')

2.

现代智能手机多为高清屏幕，若不对Canvas进行特殊处理，生成的图片会出现模糊现象。这主要与设备像素比（devicePixelRatio）有关，JavaScript提供了window.devicePixelRatio属性用于获取该比值。


function DPR() {
        if (window.devicePixelRatio && window.devicePixelRatio > 1) {
            return window.devicePixelRatio;
        }
        return 1;
    }

上述DPR函数用于获取设备的像素比。获取该比值后，需进行相应的尺寸调整处理。


var canvas = document.createElement('canvas');
        // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
        canvas.width = width * scaleBy;
        canvas.height = height * scaleBy;
        // 设定 canvas css宽高为 DOM 节点宽高
        canvas.style.width = `${width}px`;
        canvas.style.height = `${height}px`;
 
        // 获取画笔
        const context = canvas.getContext('2d');
 
        // 将所有绘制内容放大像素比倍
        context.scale(scaleBy, scaleBy);