chrome.tabs.captureVisibleTab качество размытое и низкое - PullRequest
Новая
       10

chrome.tabs.captureVisibleTab качество размытое и низкое

0 голосов
/ 11 апреля 2019

Я пытаюсь создать расширение, которое фиксирует определенный элемент на странице.

Проблема в том, что когда я конвертирую скриншот в холст, а затем обрезаю его, я теряю много качества. Есть способ повысить качество?

Вот код, который я использую для преобразования изображения в холст - 

            canvas.width = $(window).width();
            canvas.height = $(window).height()
            canvas.getContext("2d").drawImage(img, 0, 0, canvas.width, canvas.height);

            var $canvas = $(canvas);
            $canvas.data('scrollLeft', $(document.body).scrollLeft());
            $canvas.data('scrollTop', $(document.body).scrollTop());
            // Perform callback after image loads
            callback($canvas);

и вот как я обрезаю - 

    var previewCanvas = document.createElement('canvas');
    previewCanvas.width = $element.width() - 20 ;
    previewCanvas.height = $element.height() - 10;

    console.log("Calculate the correct position of the element on the canvas");
    // Calculate the correct position of the element on the canvas
    var prevTop = $element.offset().top - $screenshotCanvas.data('scrollTop');
    var prevLeft = $element.offset().left - $screenshotCanvas.data('scrollLeft');

    var ctx = previewCanvas.getContext("2d");
    ctx.drawImage($screenshotCanvas[0], prevLeft, prevTop,
                                        $element.width() - 20 , $element.height() - 10,
                                        0, 0,
                                        $element.width() - 20, $element.height() -10 );

    console.log(previewCanvas[0]);
    return $(previewCanvas)
                .css({ border:'1px solid black' });

"$ element" - это элемент, который я хочу захватить.

Я думаю, что теряю качество при конвертации в canvas. Как я могу сохранить оригинальное качество?

...