0

语境

我正在创建一个 使用 javascript 动态创建网页的http://canvimation.github.com/ 。

我的应用程序的源代码位于https://github.com/canvimation/canvimation.github.com

该应用程序使用 Canvas 使用矢量对象进行绘制，然后可以将生成的绘图导出为网页。要创建网页，请单击 FILE 图标，然后单击“Export Canvas to HTML”。

导出代码会打开一个新窗口并使用 document.writenl() 来构造代码。相关功能显示在问题的末尾。

我尝试过的所有浏览器都可以在新窗口中正确生成绘图作为网页。在所有浏览器中查看源代码显示应用程序网页的预期代码。

在 IE10 和 Firefox 中，可以查看导出代码的源代码，然后可以将其保存，并将保存的文件用作网页。

对于导出的网页：在 Chrome 28 中查看源为灰色且不可用；在 Safari 5 for Windows 中查看源代码会产生一个空白窗口，而在 Opera 12 中源代码不执行任何操作。

问题

  1. 如何在 Chrome、Safari 和 Opera 中保存或查看导出网页的来源？
  2. 可以在我的方法中更改任何内容以动态创建可以查看和保存其源代码的网页吗？

相关代码

function exportShapes()
{   
    var shapelist=[];
    var nameZ=[];
    for (var name in SHAPES)
    {
        nameZ=[];
        nameZ.push(name);
        nameZ.push(SHAPES[name].zIndex);
        shapelist.push(nameZ);
    }
    shapelist.sort(compareZ);

    newwindow=window.open('','export');
    newwindow.document.writeln('<!DOCTYPE HTML>');
    newwindow.document.writeln('<html>');
    newwindow.document.writeln(SPACES.substr(0,3)+'<head>');
    newwindow.document.writeln(SPACES.substr(0,6)+'<style>');
    newwindow.document.writeln(SPACES.substr(0,9)+'#canvasarea');
    newwindow.document.writeln(SPACES.substr(0,9)+'{');
    newwindow.document.writeln(SPACES.substr(0,12)+'border:black 1px solid;');
    newwindow.document.writeln (SPACES.substr(0,9)+'}');
    newwindow.document.writeln(SPACES.substr(0,6)+'</style>');
    newwindow.document.writeln(SPACES.substr(0,6)+'<!--[IF LT IE 9]><script type="text/javascript" src = "excanvas.js" ></script><![endif]-->');
    newwindow.document.writeln(SPACES.substr(0,6)+'<script type="text/javascript">');
    newwindow.document.writeln(SPACES.substr(0,9)+'function setcanvas()');
    newwindow.document.writeln(SPACES.substr(0,9)+'{');
    newwindow.document.writeln(SPACES.substr(0,12)+'var canvas = document.getElementById("canvasarea");');  
    newwindow.document.writeln(SPACES.substr(0,12)+'if (canvas.getContext)');
    newwindow.document.writeln(SPACES.substr(0,12)+'{');  
    newwindow.document.writeln(SPACES.substr(0,15)+'var ctx = canvas.getContext("2d");');
    newwindow.document.writeln(SPACES.substr(0,15)+'drawcanvas(ctx);');
    newwindow.document.writeln (SPACES.substr(0,12)+'}'); 
    newwindow.document.writeln(SPACES.substr(0,12)+'else');
    newwindow.document.writeln(SPACES.substr(0,12)+'{');  
    newwindow.document.writeln(SPACES.substr(0,15)+'alert("Canvas NOT supported");');   
    newwindow.document.writeln (SPACES.substr(0,12)+'}'); 
    newwindow.document.writeln (SPACES.substr(0,9)+'}');
    newwindow.document.writeln (SPACES.substr(0,9));
    newwindow.document.writeln (SPACES.substr(0,9)+'function drawcanvas(ctx)');
    newwindow.document.writeln(SPACES.substr(0,9)+'{');
    for(var i=0;i<shapelist.length;i++)
    {
        exportshape(shapelist[i][0]);
    }   
    newwindow.document.writeln (SPACES.substr(0,9)+'}');
    newwindow.document.writeln(SPACES.substr(0,6)+'</script>');
    newwindow.document.writeln(SPACES.substr(0,3)+'</head>');
    newwindow.document.writeln(SPACES.substr(0,3)+'<body onload="setcanvas()">');
    newwindow.document.writeln(SPACES.substr(0,6)+'<canvas id="canvasarea" width="'+parseInt($("stagearea").style.width)+'" height="'+parseInt($("stagearea").style.height)+'"></canvas>');     

    newwindow.document.writeln(SPACES.substr(0,3)+'</body>');
    newwindow.document.writeln('</html>');
    newwindow.document.close();
}
4

2 回答 2

1

如果您只是想在 javascript 渲染后查看 HTML，那么右键单击 > 检查元素应该可以让您看到代码，至少在 Chrome 中是这样。

然后您应该能够手动复制它 - 还是需要自动完成？

我知道在 brython 它只是在变量doc.html中，但这可能对你的 javascript 没有帮助。

类似问题

于 2013-07-30T09:13:28.220 回答
0

问题是它是一个空白页面（about:blank），Chrome 认为没有理由查看源代码，因为它应该是空的。您可以考虑创建某种临时文件并将所有画布内容放入其中。

上面建议的检查元素选项在这种情况下不起作用，它不会超出画布标签。我怀疑 Chrome 将其渲染为图片，而不是矢量图形。

于 2013-07-30T09:19:09.663 回答