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 -
- Calculator makes a table for the output - pretty simple. Click the purple image button and it goes into a div as an image.
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
