使用html2canvas与canvas2image 实现页面截图

1. html2canvas 的版本有些不同，我这里使用的是^html2canvas 1.0.0-alpha.9
   html2canvas官网

html2canvas和canvas2image 百度云盘：https://pan.baidu.com/s/1fPUg3EBmGPB5D30QpCZH0w

提取码：8qln

本文借鉴于https://blog.csdn.net/weixin_39003573/article/details/82467508
如有不妥，请联系删除

该文章纯属是为了自己保存做的笔记，
使用时可能遇到一些问题，请自行解决

// 图片生成
function getImg() {
    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 = $(".poster_info")[0];//要截图的内容
    var width = shareContent.offsetWidth;
    var height = shareContent.offsetHeight;
    // 该元素或者父元素$(".poster")
    var left = $(".poster")[0].offsetLeft + 9.5;
    var top = $(".poster")[0].offsetTop;
    var canvas = document.createElement("canvas");
    var context = canvas.getContext('2d');
    var scale = getPixelRatio(context); //将canvas的容器扩大PixelRatio倍，再将画布缩放，将图像放大PixelRatio倍。
    canvas.width = width * scale;
    canvas.height = height * scale;
    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
    context.scale(scale, scale);
    var opts = {
        logging: false,
        scale: scale,
        canvas:canvas,
        width: width,
        height: height,
        x:left,
        y:top,
        scrollX:0,
        scrollY:0,
        useCORS: true,//允许跨域
        allowTaint:true,
        backgroundColor:null,
    };
    html2canvas(shareContent, opts).then(function(canvas) {
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
        var dataUrl = canvas.toDataURL('image/png', 1.0);
        var newImg = document.createElement("img");
        newImg.src = dataUrl;
        newImg.width = width;
        newImg.height = height;
        $(".posterImg").append(newImg);//追加到某个元素中，
        $('.poster_info').hide()// 截图的元素不能设置隐藏，否则截图空白（先截图后隐藏该元素）
    });
}

pc端和移动端有一定的区别，pc端的设置背景图片，截图出来是清晰的，移动端的就会模糊（所以移动端要改成img设置图片）个人测试的结果，如有不对，望指出，谢谢。