Question

我制作了一个Chrome扩展程序：

获取网站的屏幕快照，打开一个新窗口，使用画布剪切图像，然后下载图像。现在，我想显示图像，所以我创建一个图像并将其路径设置为file：/// C：/Users/myuser/Downloads/myfile.png。

但是图像没有出现。我尝试删除“文件”或设置超时，但是没有任何效果，但是，当我单击开发人员控制台中的图像链接时，它将带我到图片，并且可以使用。

这是“ background.js”中的代码：

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.captureVisibleTab(null, {}, function(image){
        var x = window.open();

        var cv = x.document.createElement('canvas');
        x.document.body.appendChild(cv);

        var canvas = x.document.querySelector('canvas');
        canvas.width = 928
        canvas.height = 490;

        var img = new Image();

        var code = new Date().getTime();

        img.onload = function(){
            ctx.drawImage(this, 315, 138, 928, 490, 0, 0, 928, 490);

            var toCopy = canvas.toDataURL("image/png");

            var link = x.document.createElement('a');
            link.download = code + '.png';
            link.href = toCopy;
            link.click();       

            setTimeout(function(){
                var el = new Image();
                el.src = 'file:///C:/Users/myuser/Downloads/'+code+'.png';

                x.document.body.appendChild(el);

                x.console.log(x.location);
            }, 2000);


            canvas.parentElement.removeChild(canvas);
        }

        img.src = image;

            var ctx = canvas.getContext('2d');
    });
});

使用Chrome扩展程序打开的弹出窗口中的图像src本地文件

0 个答案: