js 截取网页图片

function captureImage(imgElement) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = imgElement.width;
    canvas.height = imgElement.height;
    ctx.drawImage(imgElement, 0, 0);
    return canvas.toDataURL('image/png');
}

// 使用方法
const img = document.getElementById('myImage');
const dataURL = captureImage(img);
console.log(dataURL); // 这是一个base64编码的图片数据

// 首先需要引入html2canvas库
// <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

html2canvas(document.body).then(function(canvas) {
    // 将canvas转换为图片
    const imgData = canvas.toDataURL('image/png');
    console.log(imgData); // 这是一个base64编码的图片数据
});

async function takeScreenshot() {
    const screenshot = await navigator.mediaDevices.getDisplayMedia({
        video: true
    });
    const videoTrack = screenshot.getVideoTracks()[0];
    const imageCapture = new ImageCapture(videoTrack);
    const bitmap = await imageCapture.grabFrame();
    const canvas = document.createElement('canvas');
    canvas.width = bitmap.width;
    canvas.height = bitmap.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(bitmap, 0, 0);
    return canvas.toDataURL('image/png');
}

takeScreenshot().then(console.log);