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

时间:2017-01-10 00:56:36

标签: javascript php html html2canvas

我是其中一个'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。
  2. Calculator

    为此,我使用了这些脚本

    <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发送到计算机

0 个答案:

没有答案