在新 window 中打开时未在 canvas 中绘制图像

Question

我可以毫无问题地在 canvas 上绘制图像。但我希望在新的 window 中将图像绘制在 canvas 上。变量有正确的值，但仍然没有绘制。

这是我的代码：

var popup = window.open();

popup.oldCanvas= oldCanvas;

popup.url = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

popup.document.open();

popup.document.write("<html><head>");

popup.document.write('<script src="lib/jquery/jquery-2.1.1.min.js"></script>');

popup.document.write("<script>\n");

popup.document.write("$(document).ready(function() { \n");

popup.document.write("    function createCanvas() {                         \n");

popup.document.write("        var img = new Image;\n");

popup.document.write("        var newCanvas = document.createElement('canvas');\n");

popup.document.write("        var context = newCanvas.getContext('2d');        \n");

popup.document.write("        newCanvas.width = oldCanvas.width;           \n");

 popup.document.write("        newCanvas.height = oldCanvas.height;         \n");

popup.document.write("        img.onload = function() {\n");

popup.document.write("              context.drawImage(this, 0, 0);                    \n");

popup.document.write("        };                                                \n");

popup.document.write("        img.src = url;                                    \n");

 popup.document.write("    };                                                   \n");

popup.document.write("    createCanvas();                                      \n");

popup.document.write("});                                                      \n");

popup.document.write("</script>");

popup.document.write("</head><body>");

popup.document.write("</body>");

popup.document.write("</html>");

popup.document.close();

请告诉我我做错了什么，因为相同的代码在新的 window.

中没有绘制时工作正常

Answer 1

已创建 canvas 但从未插入 DOM:

var newCanvas = document.createElement('canvas');
document.body.appendChild(newCanvas);              // add to DOM
...

在新 window 中打开时未在 canvas 中绘制图像

Image not being drawn in canvas when opened in new window

javascript

canvas

drawimage

html5-canvas