将画布上下文插入到动态创建的新窗口 html 中的 html 字符串

Insert canvas context to html string in new dynamically created window html

本文关键字：html 窗口 中的 新窗口 字符串 上下文 插入 创建 动态      更新时间：2023-09-26

我创建了一个chrome扩展来拍摄整页屏幕截图。在新窗口中打开图像元素时，它工作正常。但是我需要在 Canvas 元素中显示图像以允许在画布中进行编辑。

以下是chrome.tabs.CaptureTab的事件侦听器的代码：

背景.js

chrome.runtime.onMessage.addListener(
  function(request,sender,sendResponse) {
    if(Array.isArray(request.image)) {
      var canvas = document.createElement('canvas'),
        context = canvas.getContext('2d'),
        image,
        done = 0;
      canvas.width = request.width;
      canvas.height = request.height;
      for(var i = 0; i < request.image.length; i++) {
        (function(i) {
          image = new Image();
          image.onload = function() {
            context.drawImage(this, 0, request.image[i].position, this.width, this.height);
            if(++done == request.image.length) {
              screenshot = canvas.toDataURL('image/png');
              var htmlCode = "<html><body>   Image here: <p><img border='"2'" src=" + screenshot +"><p>  End Image </body></html>";
              var url = "data:text/html," + encodeURIComponent(htmlCode);
              chrome.tabs.create({url: url});
            }
          }
          image.src = request.image[i].image;
        })(i);
      }
    } else {
      var htmlCode = "<html><body>   Image here: <p><img border='"2'" src=" + request.image +"><p>  End Image </body></html>";
      var url = "data:text/html," + encodeURIComponent(htmlCode);
      chrome.tabs.create({url: url});
      return;
    }
  });

现在，我尝试了：

var htmlCode = "<html><body>   Image here: <p><img border='"2'" src=" + screenshot +"><p>  End Image <hr> " + canvas + " </body></html>";

它给出：[object HTMLCanvasELement]

我需要在创建chrome选项卡时嵌入此画布元素

所以我

用

： 
chrome.tabs.create({url:chrome.extension.getURL("../capturetab.html?tabImage=" + request.source )});

捕获选项卡.html ： 

<html>
<head>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/visibletab.js"></script>
</head>
<body>
<br/><br/>
<canvas id="canvas"></canvas>
<br/><br/>
</body>
</html>

visibketab.js

$( document ).ready(function() {    
    var imageblob = getUrlParameter('tabImage');
    //Set canvas attribute
    var myCanvas = document.getElementById('canvas');
    var ctx = myCanvas.getContext('2d');    
    var img = new Image;
    img.onload = function(){
    // set width and height
    ctx.canvas.height = this.height;
    ctx.canvas.width = this.width;
    ctx.drawImage(img,0,0); // Or at whatever offset you like   
    };
    img.src = imageblob;
});
function getUrlParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}
相关文章：