小案例—实现网页截图

前言

晚上又学了点新知识，那就是实现网页一键截图，下面来看我的小案例吧~

实现普通截图

html：

    

        

            
        
        

            

                
品种：哈哈哈哈
                
产地：哈哈哈哈
                
生产日期：2020-15-18
                
详细信息：哈哈哈哈
            
        
    
    

        生成图片
    

粗糙js法：

// 第一种最粗糙的写法：可以得到图片，但图片不清晰，并且图片的大小没有设置，截取位置固定
$("#screenShot").click(() => {
    html2canvas($("#html2canvas")).then(canvas => {
        var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

        /** 写法一：简单，但不好设置下载图片默认名字*/
        window.location.href = imgUri;

        /** 写法二：利用  标签特性实现下载，可以设置默认图片名*/
        // let aLink = document.createElement("a");
        // aLink.style.display = "none";
        // aLink.href = imgUri;
        // aLink.download = "溯源码.png";       // 设置文件的默认保存名字
        // document.body.appendChild(aLink);
        // aLink.click();
        // document.body.removeChild(aLink);
    });
});

详细js写法：

// 第二种写法： 可以任意设置图片大小，随意定位截图位置，并得到清晰图片
$("#screenShot").click(() => {
    const dom = $("#html2canvas")[0];

    /**
    * 利用画布的可缩放特性实现高清截图
    */
    const Canvas = document.createElement('canvas'); // 创建一个新的canvas

    const width = dom.offsetWidth; // 要截图区域的宽
    const height = dom.offsetHeight; // 要截图区域的的高
    const scale = window.devicePixelRatio; // 设备的像素比

    // 设置画布
    Canvas.width = width * scale;
    Canvas.height = height * scale;
    Canvas.getContext('2d').scale(scale, scale); // 缩放
    // 画布从(0,0)移动到截取区域的左上角，只有这个这样，画布才能完美覆盖截图区域
    Canvas.getContext('2d').translate(-dom.getBoundingClientRect().left, -dom.getBoundingClientRect().top);

    html2canvas(dom, { // 这里面都是转换的参数
        canvas: Canvas,
        useCORS: true, // 是否允许跨域
        width: width + 'px', // 设置画布的宽高
        hegiht: height + 'px',
    }).then((canvas) => {
        const context = canvas.getContext('2d');
        // 关闭抗锯齿形，使得文字更有线条
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;

        var imgData = canvas.toDataURL("image/png");

        let aLink = document.createElement("a");
        aLink.style.display = "none";
        aLink.href = imgData;
        aLink.download = "溯源码.png";
        document.body.appendChild(aLink);
        aLink.click();
        document.body.removeChild(aLink);
    });
});

结语

没办法详细解释了，我时间不多了。我能看懂就够了，反正也是记录一下，备忘录形式的。

下次有机会可以尝试实现鼠标点击拖动选择区域进行截图，相信也不难实现，各位道友你们说呢？

时间： 2020/08/21 02:27

坐标： 广东省深圳市