Синтаксис опций HTML2Canvas

Question

Я очень тяжело борюсь с документацией по сценарию HTML2Canvas.Конкретно варианты расположены здесь .Я немного определился с синтаксисом, используя такие объекты: html2canvas(element, {option: value});, но я понятия не имею, какие реальные значения ожидает сценарий.

Моя конкретная цель с этим состоит в том, чтобы иметь div, который отображается на моемсайт размером примерно 1000px x 500px, но сохраняет изображение в два раза больше этого размера.(Я хочу сохранить изображение 1920 x 1080, но я хочу, чтобы настраиваемый div удобно помещался на экране во время его создания.)

Я предполагаю, что мне нужно использовать комбинацию ширины, высоты,Параметры scale, windowWidth и windowHeight, но я могу только определить синтаксис значений для ширины и высоты.Кто-нибудь знает этот сценарий, который может указать мне правильное направление?

Answer 1

Вот пример с моего собственного сайта - я беру содержимое div на странице, затем отображаю его на холст следующим образом:

var target_container = document.getElementById("id_of_div_I_want_to_render_on_canvas");
html2canvas(target_container, {
    onrendered: function(canvas) {
        var canvas_image = canvas.toDataURL("image/png"), // change output image type here
            img = new Image(); // create a new blank image

        img.src = canvas_image; // set the canvas_image as the new image's source
        img.width = el.offsetWidth; // make the image the same width and height as the target container
        img.height = el.offsetHeight;
        img.onload = function () {
            // do stuff
        });
    },
    width: <set your desired canvas width if you do not use my sizing above for img.width, img.height - e.g. '1000px'>,
    height: <set your height e.g. '500px'>
});

Для моих целей,ключевым свойством является обратный вызов onrendered, который позволяет вызывать функцию после рендеринга и сохранять сгенерированный холст «на лету» в изображении.