截图

html

<div class="demo-container">
    <div id="demo">
        <div class="orange">
            <p>如果原来使用百分比设置元素宽高，请更改为px为单位的宽高，避免样式二次计算导致的模糊</p>
            <p>如果原来使用百分比设置元素宽高，请更改为px为单位的宽高，避免样式二次计算导致的模糊</p>
            <p>如果原来使用百分比设置元素宽高，请更改为px为单位的宽高，避免样式二次计算导致的模糊</p>
            <p>如果原来使用百分比设置元素宽高，请更改为px为单位的宽高，避免样式二次计算导致的模糊</p>
            <p>如果原来使用百分比设置元素宽高，请更改为px为单位的宽高，避免样式二次计算导致的模糊</p>
        </div>
    </div>
</div>
<button id="saveImg">截图</button>

css

#demo {
    background-color: #fff;
}

.orange {
    background-color: orange;
    width: 700px;
    height: 200px;
}

javaScript

<script src="jquery-3.2.1.min.js"></script>
<script src="html2canvas.min.js"></script>
<script type="text/javascript">
    $("#saveImg").on("click", function () {
        var getPixelRatio = function (context) {     
            // 获取设备的PixelRatio
            var backingStore = context.backingStorePixelRatio ||
                context.webkitBackingStorePixelRatio ||
                context.mozBackingStorePixelRatio ||
                context.msBackingStorePixelRatio ||
                context.oBackingStorePixelRatio ||
                context.backingStorePixelRatio || 1;
            return (window.devicePixelRatio || 1) / backingStore;
        };

        var shareContent = $(".orange")[0];
        var width = shareContent.offsetWidth;
        var height = shareContent.offsetHeight;
        var canvas = document.createElement("canvas");
        var context = canvas.getContext('2d');
        // 将canvas的容器扩大PixelRatio倍，再将画布缩放，将图像放大PixelRatio倍。
        var scale = getPixelRatio(context);    
        canvas.width = width * scale;
        canvas.height = height * scale;
        canvas.style.width = width + 'px';
        canvas.style.height = height + 'px';
        context.scale(scale, scale);

        var opts = {
            scale: scale,
            canvas: canvas,
            width: width,
            height: height,
            dpi: window.devicePixelRatio
        };

        html2canvas(shareContent, opts).then(function (canvas) {
            context.mozImageSmoothingEnabled = false;
            context.webkitImageSmoothingEnabled = false;
            context.msImageSmoothingEnabled = false;
            context.imageSmoothingEnabled = false;
            var dataUrl = canvas.toDataURL('image/jpeg', 1.0);
            var newImg = document.createElement("img");
            newImg.src = dataUrl;
            newImg.width = width;
            newImg.height = height;
            saveImg(dataUrl);
        });
    });

    function saveImg(Url) {
        debugger
        var blob = new Blob([''], { type: 'application/octet-stream' });
        var url = URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = Url;
        var date = new Date();
        a.download = "screenshot_" + date.getTime();
        var e = document.createEvent('MouseEvents');
        e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        a.dispatchEvent(e);
        URL.revokeObjectURL(url);
    }
</script>

需要的包：

• html2canvas.min.js
• jquery-3.2.1.min.js