html2canvas - как определить верхнюю, левую, нижнюю, правую, чтобы автоматически обрезать?

Question

У меня есть страница 1280x768. следующий код делает полный снимок снимка 1280x768, но мне нужно игнорировать верхний 10px, слева 10px снизу 10px, справа 10px.

Вы можете сделать это растение или окалину до или после document.body.appendChild(canvas);? используя CSS3 или JS или так?

window.takeScreenShot = function() { 
    html2canvas(document.getElementById("top"), { 
     onrendered: function (canvas) { 
      document.body.appendChild(canvas); 
     }, 
     width:1280, 
     height:768 
    }); 
}; 

Answer 1

Вы можете просто использовать экранный холст, на котором вы будете нарисовать свой рендер с желаемым смещением.

Это быстро написанная функция, которая может не соответствовать всем требованиям, но которая может по крайней мере дать вам идею: Обратите внимание, что она использует latest html2canvas version (0.5.0-beta4), которая теперь возвращает обещание.

function screenshot(element, options = {}) { 
    // our cropping context 
    let cropper = document.createElement('canvas').getContext('2d'); 
    // save the passed width and height 
    let finalWidth = options.width || window.innerWidth; 
    let finalHeight = options.height || window.innerHeight; 
    // update the options value so we can pass it to h2c 
    if (options.x) { 
    options.width = finalWidth + options.x; 
    } 
    if (options.y) { 
    options.height = finalHeight + options.y; 
    } 
    // chain h2c Promise 
    return html2canvas(element, options).then(c => { 
    // do our cropping 
    cropper.canvas.width = finalWidth; 
    cropper.canvas.height = finalHeight; 
    cropper.drawImage(c, -(+options.x || 0), -(+options.y || 0)); 
    // return our canvas 
    return cropper.canvas; 
    }); 
}  

И называют это как то

screenshot(yourElement, { 
    x: 20, // this are our custom x y properties 
    y: 20, 
    width: 150, // final width and height 
    height: 150, 
    useCORS: true // you can still pass default html2canvas options 
}).then(canvas => { 
    //do whatever with the canvas 
}) 

Поскольку stacksnippets® использует некоторые высокий уровень безопасности на своих кадрах, мы не можем сделать живую демонстрацию здесь, но вы можете найти один в этом jsfiddle.

О, и для тех, кто хочет версию ES5, поддерживающую старую версию html2canvas, вам просто нужно обернуть функцию обрезки в обработанном обратном вызове, или вот a fiddle для ленивых.