Question

我尝试开发我的第一个chrome扩展，将DOM元素转换为图像。

我查看了示例扩展，尝试了解如何实现这一点，并且有一些非常好的示例可以从整个页面创建图像，但不是针对特定元素。

我还看了一些将画布保存到图像（https://html2canvas.hertzen.com/）的JavaScript库。

到目前为止，我已经使用弹出窗口和触发脚本的按钮创建了基本设置：

function handleDOM (results){
      console.log('ELEMENT:', results)

      html2canvas($(results), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
                // Clean up 
                //document.body.removeChild(canvas);
            }
        });
    }

    $('#btn-thumbnail').click(function(){
        chrome.tabs.query({active: true}, function(tabs) {
            var tab = tabs[0];
            chrome.tabs.executeScript(tab.id, {
                code: 'document.getElementById("elementId")'
            }, handleDOM);
        });
    })

但这不起作用，因为我猜测html2canvas需要访问DOM来查找元素。

对于如何处理此问题的任何建议将不胜感激！ TIA！

Answer 1

也许尝试注入一个拍摄画布的内容脚本？内容脚本可以在将dom注入当前页面时访问dom。

https://developer.chrome.com/extensions/content_scripts

Chrome扩展dom元素到图像

1 个答案: