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

Question

I have created a chrome extention to take full page screen shot. 我创建了一个chrome扩展程序来进行全屏截图。 It is working fine while openening Image element in new window. 在新窗口中打开Image元素时，它工作正常。 But I need to display image in Canvas element to allow editing in canvas. 但是我需要在Canvas元素中显示图像以允许在Canvas中进行编辑。

Here is the code for event listener of chrome.tabs.CaptureTab : 这是chrome.tabs.CaptureTab的事件侦听器的代码：

background.js background.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;
    }

  });

Now, I tried : 现在，我尝试了：

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

It Gives : [object HTMLCanvasELement] 它给出了： [object HTMLCanvasELement]

I need to embed this canvas element while creating the chrome tab 我需要在创建chrome标签时嵌入此canvas元素

Answer 1

So I solved the same using : 所以我解决了相同的使用：

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

capturetab.html : capturetab.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 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];
        }
    }
}

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-12-15 06:33:15

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-12-15 06:33:15

解决方案1
0 已采纳 2014-12-15 06:33:15