位置：首页-资讯-前端开发

JS如何实现页面截屏功能实例代码

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

"页面截屏"是前端经常遇到的需求，比如页面生成海报，弹窗图片分享等，因为浏览器没有原生的截图API，所以需要借助canvas来实现导出图片实现需求。

可行性方案

方案1：将 DOM 改写成 canvas ，调用canvas的toBlob或者toDataURL方法即刻上传到七牛云或服务器
方案2：使用第三方库html2canvas.js实现 canvas ，在不更改页面已有DOM的情况下优雅生产canvas

解决方案的选择

方案1：需要手动计算每个DOM元素的Computed Style，然后需要计算好元素在canvas的大小位置等属性。

方案1难点

需要弃用已有的html页面，改用canvas重写。
页面结构层复杂的情况下用canvas写，不易重构。
有一定canvas基础。

方案2：该项目在Github上stars已有两万多start，作者仍在积极维护。API非常简单，在已有项目中开箱即用。

html2canvas

因为是常见的需求，所以社区会有成熟的解决方案，首先试试社区的解决方案。


<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>


html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

以上是官网的实例用法。在网页上出现了一个新的 canvas DOM。接下来我们只需要把canvas转换成图片就好。这里使用canva原生的toDataURL和toBlob方法上次到七牛云。

使用时需要注意。此处如果生产的画布中有跨域图片，需要配置allowTaint为true。

如果是原生canvas实现，canvas需要所有跨域图片请求完成才可绘制。有两种解决方案

方案1：在html上写好img标签，class="lazy" data-src写好对应的图片url。缺点很明显，会污染页面的布局结构。
方案2：使用js，使用new Image()的方式。设置class="lazy" data-src到对应的图片url，在onload回调中处理相关操作。优点：可行性最高，不过有回调地狱的问题。我们用Promise改写一下


function asyncImage(url) {
    const img = new Image();
    img.class="lazy" data-src = url;
    img.setAttribute('crossOrigin', 'anonymous');
    return new Promise((resolve, reject) => {
        img.onload = () => resolve(img);
        img.onerror = reject;
    });
}

好的，大功告成~是不是可以交付需求了呢？开开心心提测，但是在移动端测试的时候发现生产的图片非常模糊。这样是不行的，明显low了许多（测试不给过orz）。

github有相应的解决方案传送门，这个回答也是解决很多人的问题

基本原理：将canvas宽高放大两倍。把css把canvas的style设置成1倍大小。


    var shareContent = YourTargetElem; 
    var width = shareContent.offsetWidth; 
    var height = shareContent.offsetHeight; 
    var canvas = document.createElement("canvas"); 
    var scale = 2 || window.devicePixelRatio ; //也可以使用设备像素比

    canvas.width = width * scale; 
    canvas.height = height * scale; 
    canvas.getContext("2d").scale(scale, scale); 

    var opts = {
        scale: scale, 
        canvas: canvas, 
        logging: true, 
        width: width, 
        height: height 
    };
    html2canvas(shareContent, opts).then(function (canvas) {
        var context = canvas.getContext('2d');

        var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);

        document.body.appendChild(img);
        $(img).css({
            "width": canvas.width / 2 + "px",
            "height": canvas.height / 2 + "px",
        })
    });

原理我们已经知道了，实际操作之后图像也确实清晰了很多。但是问题还是没有解决掉。

缩小虽然提高了清晰度，但是我们需要的图片是原始比例的大小。。

最终多次尝试无果后，选择放弃使用框架。直接用原生canvas撸一个！

canvas绘制

我们知道，在高清屏的设备下，任何绘制canvas中的图像、文字、线条、形状都可能会出现模糊的问题。可通过引入 GitHub 中的 hidpi-canvas 有效地解决。

首先去 GitHub 下载 hidpi-canvas.js 文件：传送门；
在项目中引入 hidpi-canvas.js 文件;
调用 getPixelRatio() 函数，得到 ratio 值；
在 drawImage() 中，将 width 和 height 乘以 ratio；
最终的canvas导出为Blog，转换成文件对象上传七牛云。

核心代码如下


    function asyncImage(url) {
        const img = new Image();
        img.class="lazy" data-src = url;
        img.setAttribute('crossOrigin', 'anonymous');
        return new Promise((resolve, reject) => {
            img.onload = () => resolve(img);
            img.onerror = reject;
        });
    }
    async function drawCanvas(){
        var canvas = document.querySelector('canvas');
        var context = canvas.getContext('2d');
        var ratio = getPixelRatio(context);  // 关键代码
        canvas.width = 300 * ratio; // 画布宽度
        canvas.height = 300 * ratio; // 画布高度
        var divWidth = 300 * ratio; // 用于内容居中
        var divHeight = 300 * ratio; // 用于内容居中
        const image = await asyncImage('picUrl')
        const imgWidth = 550
        const imgHeight = 300
        context.drawImage(this, 50, 50, imgWidth * ratio, imgHeight * ratio)
        // Some other code
        const Blob = canvas.toBlob((Blob)=>{
            //上传七牛云
        });
    }

最终生成的图片终于清晰了...只需要根据dom的offsetWidth等适配不同屏幕就可以了。