在新窗口中打开时，未在画布中绘制图像

Image not being drawn in canvas when opened in new window

本文关键字：布中 绘制 图像 在新窗口中打开      更新时间：2024-05-16

我可以毫无问题地在画布上绘制图像。但我想把图像绘制在画布上的一个新窗口中。变量具有正确的值，但仍然没有绘制任何内容。

这是我的代码：

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();

请告诉我我做错了什么，因为当不在新窗口中绘制时，相同的代码可以很好地工作。

画布已创建，但从未插入DOM:

var newCanvas = document.createElement('canvas');
document.body.appendChild(newCanvas);              // add to DOM
...
相关文章：