用于计算器上的图像的HTML画布CANVAS2IMAGE HTML2CANVAS

Question

我是其中一个'Script Kiddies'，只是在http://tupplefly.com.au/apps/vape_calculator/

上制作一个Frankenstein的HTML PHP JS计算器

我已将表格变成图像，用户可以长按iOS或右键单击。但是客户希望它下载，除非我使用此处的代码http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/，否则该文件只会下载为“无标题”，并且无法在相应的应用中打开。

这是我到目前为止 -

1. 计算器为输出创建一个表 - 非常简单。单击紫色图像按钮，它将作为图像进入div。



为此，我使用了这些脚本

<button class="button_image" onclick="Submit();" ><i class="fa fa-camera"></i> Image</button>
<div id="img-out" style="width: 100%; margins: 0 auto; text-align: center;"></div>

    <script type="text/javascript" src="canvas2image.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
  <script type="text/javascript">
    var Submit = function() {
      html2canvas(document.querySelector("#content"), {
        onrendered: function(canvas) {
        var data = canvas.toDataURL('image/png');
        var image = new Image();
        image.src = data;
        document.getElementById('img-out').appendChild(image);
        }
      });
  };
</script>

这是下一位http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/的用武之地。当点击按钮时，具有漂亮圆圈的画布会进入.png文件。 很简单，我需要将表格放到画布上，但对我来说并不简单，所以当用户点击按钮时，表格的画布将以.png

的形式发送到计算机。

    <div id="img-out2" style="width: 100%; margins: 0 auto; text-align: center;">
<canvas id='drawhere_cicles3' width='350' height='350' style="margins: 0 auto; text-align: center; border: 0px solid #ccc"></canvas><br />
<script src='http://greenethumb.com/canvas/circles/circles3.js'></script><br />
<script src='canvassaver.js'></script>
<script>
var cs = new CanvasSaver('saveme.php');
var cnvs = document.getElementById('drawhere_cicles3');
var btn = cs.generateButton('save an image of these pretty circles!', cnvs, 'myimage');
document.getElementById('img-out2').appendChild(btn);
</script></div>

所以我需要将表格放到画布id='drawhere_cicles3'而不是div content，所以当用户点击按钮时，画布将作为.png发送到计算机