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

Im one of those 'Script Kiddies' just making a Frankenstein'ish HTML PHP JS calculator here on http://tupplefly.com.au/apps/vape_calculator/

I've made the table turn into an image and the user can long press on iOS or right click. But the client wants it to download and unless I use code from here http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/ the file just downloads as 'untitled' and doesn't open in the appropriate app.

This is what I have so far -

  1. Calculator makes a table for the output - pretty simple. Click the purple image button and it goes into a div as an image.

Calculator

to do that I used these scripts

<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>

This is where this next bit here http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/ comes in. The canvas that has the pretty circles goes into a .png file when the button is clicked. Simple, I needs to get the table onto the canvas, but not simple for me, so when the user clicks the button the canvas of the table is sent to the computer as a .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>

So I need to get the table onto the canvas id='drawhere_cicles3' instead of into the div id content, so when the user clicks the button the canvas is sent to the computer as a .png

douzhi19900102
douzhi19900102 stackoverflow.com/questions/4405336/...
3 年多之前 回复
dongqiao1888
dongqiao1888 谢谢你2pha,但它没有像greenethumb.com/article/1429/...那样做。该解决方案只需下载一个名为“Untitled”的文件
3 年多之前 回复
dream989898
dream989898 stackoverflow.com/questions/31656689/...
3 年多之前 回复
drduinfu915094
drduinfu915094 我需要将表格放到画布<canvasid='drawhere_cicles3'而不是divhtml2canvas(document.querySelector(“#content”))中,因此当用户单击按钮时,画布将作为a发送到计算机。PNG
3 年多之前 回复
dongzhi2887
dongzhi2887 你需要什么,我不明白?
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问