Question

我正在尝试创建一个扩展，以捕获页面上的特定元素。

问题是，当我将屏幕截图转换为画布然后进行裁剪时，我失去了很多质量。有没有增加质量的方法？

这是我用于将图像转换为画布的代码-

            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”是我要捕获的元素。

我认为转换为画布时会失去品质。如何保存原始质量？

chrome.tabs.captureVisibleTab的质量模糊且低

0 个答案: