js网页截图|屏幕截图html2canvas.js

屏幕截图：

new html2canvas(document.getElementById('app')).then(canvas => {  //id="app"是需要截图的区域
    // canvas为转换后的Canvas对象
    let oImg = new Image();
    oImg.src = canvas.toDataURL();  // 导出图片
    document.body.appendChild(oImg);  // 将生成的图片添加到body
});

网页截图：

（有一个bug，本地加载的图片可以截图到内容，但如果是通过请求后台接口得到的图片就截图不到图片内容了）

var height = $(document).height() //获取需要截图内容的高度
//克隆节点，默认为false，不复制方法属性，为true是全部复制。
var cloneDom = $("#app").clone(true);//克隆要截图的区域
//设置克隆节点的css属性，因为之前的层级为0，我们只需要比被克隆的节点层级低即可。
cloneDom.css({
    //"display": "none",
    "position": "absolute",
    "top": "0px",
    "z-index": "-111",
    "height": height
});
//将克隆节点动态追加到body后面。

$("body").append(cloneDom);
console.log(cloneDom)
html2canvas(cloneDom[0]).then(function(canvas){
    function getBlobBydataURI(dataURI,type){
        var binary = atob(dataURI.split(',')[1]);
        var array = [];
        for(var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], {type:type });
    }
    var imageData = canvas.toDataURL("image/jpeg");

    var formData = new FormData();

    var $Blob= getBlobBydataURI(imageData,'image/jpeg');


    let reader = new FileReader();


    reader.readAsDataURL($Blob);


    reader.onload = function(e) {
        var img = document.createElement("img");
        img.src = e.target.result;
        document.body.appendChild(img);
        console.log(img)
    }

    formData.append('file',$Blob);
    formData.append('type',1)
    var timestamp = new Date().getTime();
    formData.append('key',timestamp + '.png');//得到以当前时间命名的图片文件
    for (var pair  of formData.entries()) {

        if(typeof value == 'object'){
            if(value.hasOwnProperty("name")){
                pair[1].name = "1.jpg"
            }
        }
    }



    //上传
    // $.ajax({
    //     url:'http://devh.bugegaming.com/api2/turntable/upload',
    //     type:'post',
    //     data:formData,
    //     async: false,
    //     crossDomain: true,
    //     contentType: false,
    //     processData: false,
    //     success: function(data){
    //
    //     }
    // });
})

https://blog.csdn.net/huangxinglian/article/details/80582299?utm_medium=distribute.pc_relevant.none-task-blog-title-2&spm=1001.2101.3001.4242

https://sdeno.com/wp-content/uploads/2020/08/html2canvas.min.js