Как использовать html2canvas с координатами?

Question

Я пытаюсь захватить изображение в браузере, используя html2canvas . Захват изображения всего браузера работает. Но мне нужно указать x,y начальную и конечную координаты, которые я хочу записать. В документах Я видел, что html2canvas может принимать x,y координаты:

x : По умолчанию : Элемент x-offset Описание: Обрезать холст X-координата
y : По умолчанию : Элемент y-offset Описание: Обрезать холст Y-координата

Передача моих x,y координат этим параметрам просто захватывает все окно.

Поэтому вместо этого я попытался захватить все окно, а затем обрезать область из него, используя drawImage() (найден в каком-то другом сообщении stackoverflow, не уверен, какое именно) :

function snapImage(x1,y1,x2,y2, e){
    html2canvas(document.body).then(function(canvas) {
        // calc the size -- but no larger than the html2canvas size!
        var width = Math.min(canvas.width,Math.abs(x2-x1));
        var height = Math.min(canvas.height,Math.abs(y2-y1));
        // create a new avatarCanvas with the specified size
        var avatarCanvas = document.createElement('canvas');
        avatarCanvas.width=width;
        avatarCanvas.height=height;
        avatarCanvas.id = 'avatarCanvas';
        // put avatarCanvas into document body
        document.body.appendChild(avatarCanvas);
        // use the clipping version of drawImage to draw
        // a clipped portion of html2canvas's canvas onto avatarCanvas
        var avatarCtx = avatarCanvas.getContext('2d');
        avatarCtx.drawImage(canvas,x1,y1,width,height,0,0,width,height);
    });
}

Это рисует смещенное изображение с неправильным смещением. Например, с учетом следующего веб-сайта:

изображение взято из примера по адресу: https://github.com/niklasvh/html2canvas/tree/master/examples

Я отмечаю область " pluot? ", чтобы привязать ее:

см. Пунктирный прямоугольник

Пунктирный прямоугольник рисуется с помощью js, учитывая координаты мыши в 2 событиях: onmousedown и onmouseup. Поскольку прямоугольник нарисован правильно, я предполагаю, что мои координаты верны. Но когда я передаю эти координаты функции snapImage() выше, я получаю следующее захваченное изображение:

Похоже, что есть смещение. Может быть, начальные координаты drawImage() работают иначе, чем мои начальные координаты холста?

---

EDIT:

Оказывается, мой код работает, когда я нахожусь на 100%. Это не так, когда я увеличиваю / уменьшаю.

Answer 1

Полагаю, это потому, что вы получаете x и y из события с clientX и clientY.Вместо этого используйте pageX и pageY.Посмотрите на это jsFiddle

let startX, startY;

document.getElementsByTagName('body')[0].addEventListener('mousedown', function(event) {
    console.log("ok");
    startX = Math.floor(event.pageX);
    startY = Math.floor(event.pageY);
});

document.getElementsByTagName('body')[0].addEventListener('mouseup', function(event) {
    snapImage(Math.min(event.pageX, startX), Math.min(event.pageY, startY), Math.max(event.pageX, startX), Math.max(event.pageY, startY));
});

function snapImage(x1,y1,x2,y2, e){
    console.log(x1, x2, y1, y2);
    html2canvas(document.body).then(function(canvas) {
        // calc the size -- but no larger than the html2canvas size!
        var width = Math.min(canvas.width,Math.abs(x2-x1));
        var height = Math.min(canvas.height,Math.abs(y2-y1));
        // create a new avatarCanvas with the specified size
        var avatarCanvas = document.createElement('canvas');
        avatarCanvas.width=width;
        avatarCanvas.height=height;
        avatarCanvas.id = 'avatarCanvas';
        // put avatarCanvas into document body
        document.body.appendChild(avatarCanvas);
        // use the clipping version of drawImage to draw
        // a clipped portion of html2canvas's canvas onto avatarCanvas
        var avatarCtx = avatarCanvas.getContext('2d');
        avatarCtx.drawImage(canvas,x1,y1,width,height,0,0,width,height);
    });
}

Answer 2

Оказывается, есть встроенная функция Chrome captureVisibleTab , которая захватывает изображение активной вкладки.В итоге я использовал это вместо html2canvas.Я получил помощь от Copyfish Chrome Extension .Код Github здесь: Copyfish .

Вот мой код:

Слушатель:

//listener in background.js which invokes the screen capture
chrome.tabs.captureVisibleTab(function (dataURL) {
    sendResponse({
            dataURL: dataURL,
    });
});

Приемник:

//receiver in content.js which gets the captured image and crops it accordingly
function(response){
    var img = new Image();
    img.src = response.dataURL;
    var dpf = window.innerWidth / img.width;
    var scaleFactor = 1 / dpf,
    sx = Math.min(x1, x2) * scaleFactor,
    sy = Math.min(y1, y2) * scaleFactor,
    width = Math.abs(x2 - x1),
    height = Math.abs(y2 - y1);

    // create a new avatarCanvas with the specified size
    var avatarCanvas = document.createElement('canvas');
    avatarCanvas.width = width;
    avatarCanvas.height = height;
    avatarCanvas.id = 'avatarCanvas';
    // put avatarCanvas into document body
    document.body.appendChild(avatarCanvas);
    // use the clipping version of drawImage to draw
    var avatarCtx = avatarCanvas.getContext('2d');
    avatarCtx.drawImage(img, sx, sy, scaledWidth, scaledHeight, 0, 0, width, height);
}

x,y координаты берутся e.clientX и e.clientY соответственно.

Этот метод защищен от увеличения и разрешения.