如何在Chrome扩展中捕获单个HTML元素的屏幕截图？ [英] How to capture a screenshot of a single HTML element in Chrome extension?

问题描述

我知道有 captureVisibleTab ，但我该如何剪切导致一个标签的截图，所以只留下一个HTML元素？

//developer.chrome.com/extensions/runtime#event-onMessagerel =nofollow noreferrer> onMessage ， sendMessage 和 captureVisibleTab 。 onMessage 是 chrome.runtime a>， sendMessage 和 captureVisibleTab 都是

在清单文件中，您必须添加标签和< all_urls> 权限到您的清单文件。这不会没有权限。

permissions：[
tabs ，
< all_urls>
]，


内容脚本

在您的内容脚本文件中，您需要添加以下内容。这允许您与背景页面进行交流，以获取活动选项卡的屏幕截图。

$ b

  chrome .runtime.sendMessage（{chromeAction：screenshot}，function（imageString）{
 console.log（imageString）; 
}）; 
  

后台脚本/页

这就是奇迹发生的地方。

  chrome.runtime.onMessage.addListener （function（request，sender，sendResponse）{
 if（request.chromeAction ===screenshot）{
 createScreenshot（function（dataURL）{
 createImage（dataURL）; 
}）; 
 return true; 
} 
}）; 
 
 //这里我们创建一个新的图像
函数createImage（dataURL）{
 //创建画布
 var canvas = createCanvas（500，500）; 
 //获取画布的上下文
 var context = canvas.getContext（'2d'）; 
 //创建一个新的图像对象
 var croppedImage = new Image（）; 
 
 croppedImage.onload = function（）{
 //这是您操纵屏幕截图的位置（裁剪）
 //参数1：源图像（屏幕截图）
 //参数2：源图像x坐标
 //参数3：源图像y坐标
 //参数4：源图像宽度
 //参数5：源图像高度
 //参数6：目标x坐标
 //参数7：目标y坐标
 //参数8：目标宽度
 //参数9：目标高度
 context.drawImage（裁剪图像，10,10,300,300,0,0,250,250）; 
 
 // canvas.toDataURL（）包含裁剪图像
 console.log（canvas.toDataURL（））; 
}; 
 croppedImage.src = dataURL; //截图（完整图像）
} 
 
 //创建一个画布元素
函数createCanvas（canvasWidth，canvasHeight）{
 var canvas = document.createElement（帆布）; 
 
 //以像素为单位的画布大小
 canvas.width = canvasWidth; 
 canvas.height = canvasHeight; 
返回画布; 
} 
 
 //调用captureVisibleTab方法需要一个screenhot 
函数createScreenshot（callback）{
 //你可以有两种图像格式（jpeg和png）
 //用于jpeg使用{格式：jpeg，质量：100}（您可以调整0到100之间的jpeg图像质量）
 //用于png use {format：png} 
 chrome.tabs.captureVisibleTab（null，{format：png}，callback）; 
} 
  

裁剪

为了更好地理解 drawImage canvas方法，请阅读完整的文档。

I know there's a captureVisibleTab, but how do I cut the resulted screenshot of a tab so only a single HTML element is left?

解决方案

For this you need onMessage, sendMessage, and captureVisibleTab. The onMessage is a method of chrome.runtime, sendMessage, and captureVisibleTab are both methods of tabs.

Manifest

In the manifest file you must to add the tabs, and <all_urls> permissions to your manifest file. This will not work without the permissions.

"permissions": [
    "tabs",
    "<all_urls>"
],

Content Script

In your content script file you need to add the following. This allows you to communicate with your background page to take a screenshot of your active tab.

chrome.runtime.sendMessage({ chromeAction: "screenshot" }, function (imageString) {
    console.log(imageString);
});

Background Script/Page

Here is where the magic happens.

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if (request.chromeAction === "screenshot") {
        createScreenshot(function (dataURL) {
            createImage(dataURL);
        });
        return true;
    }
});

// here we create a new image
function createImage(dataURL) {
    // create a canvas
    var canvas = createCanvas(500, 500);
    // get the context of your canvas
    var context = canvas.getContext('2d');
    // create a new image object
    var croppedImage = new Image();

    croppedImage.onload = function() {
        // this is where you manipulate the screenshot (cropping)
        // parameter 1: source image (screenshot)
        // parameter 2: source image x coordinate
        // parameter 3: source image y coordinate
        // parameter 4: source image width
        // parameter 5: source image height
        // parameter 6: destination x coordinate
        // parameter 7: destination y coordinate
        // parameter 8: destination width
        // parameter 9: destination height
        context.drawImage(croppedImage, 10, 10, 300, 300, 0, 0, 250, 250);

        // canvas.toDataURL() contains your cropped image
        console.log(canvas.toDataURL());
    };
    croppedImage.src = dataURL; // screenshot (full image)
}

// creates a canvas element
function createCanvas(canvasWidth, canvasHeight) {
    var canvas = document.createElement("canvas");

    // size of canvas in pixels
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    return canvas;
}

// calling the captureVisibleTab method takes a screenhot
function createScreenshot(callback) {
    // you can have two image formats (jpeg and png)
    // for jpeg use { format: "jpeg", quality: 100 } (you can adjust the jpeg image quality from 0-100) 
    // for png use { format: "png" }
    chrome.tabs.captureVisibleTab(null, { format: "png" }, callback);
}

Cropping

For a better understanding of the drawImage canvas method read the full documentation.

这篇关于如何在Chrome扩展中捕获单个HTML元素的屏幕截图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！