We Keep Coding

Downloading canvas as png

I have a web page where users can sign to accept a contract. I'm have a signature box that uses canvas to display. I would like to have the canvas save as a image, when I right click on the image it gives me a option to save it and works perfectly however I want to save it to my server to use for later
I have tried searching around a lot looking for code
<div>Signature: <i class="fa fa-pencil" aria-hidden="true" onclick="Signature('jm38s4i1');"></i></div>
<button onclick="download()">Click me</button>
Download!
<canvas id="Sig-jm38s4i1" class="dig-sig " sig-id-data="jm38s4i1" signed-data="false" width="400" height="100"></canvas>
function download(){
document.getElementById("downloader").download = "image.png";
document.getElementById("downloader").href = document.getElementById("Sig-jm38s4i1").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
}
When ever I click download it downloads a image to my computer however it cannot display it, I want to 1. be able to use it and 2. download server side
Edit:
The PNG file contains the HTML of the page

Why don't you prevent the event, then change href, and fire click again?
function down(e){
if(e.isTrusted){
e.preventDefault()
}
document.getElementById("downloader").download = "image.png";
document.getElementById("downloader").href = document.getElementById("Sig-jm38s4i1").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
e.target.click()
}
e.isTrusted tells you whether the user clicked or the script clicked, triggering e.preventDefault only when user clicks.
To get the event parameter, you have to write onclick as download(event).

Download!
The initial href is set to the current page, and it has the download attribute. Seems likely that this would cause a click to download the current page.
Your onclick handler changes the href, but doesn't prevent the default behavior. So it wouldn't surprise me if, after it downloads the page, the href is set to the image. If you click it a second time does it work?

ckEditor Image does not get saved after upload when image selected

I am trying to solve a riddle here. Imagine the following. The user uploads one image, which a minute later he wants to replace. Thus he clicks on the image and selects the upload button again, chooses another image and uploads it. In the editor this image is shown, but when he saves the change, the old image is shown again.
My guess is, that this is due to the fact that only the src-attribute gets updated, but not the data-cke-saved-src-attribute. The question now is: How do I change that?
I should also mention, that since I have a blur-handler, that is asking the user if he wants to discard the change. This fires whenever an dialog opens, which is why I am "refocusing" the editor using the following snippet:
CKEDITOR.on('dialogDefinition', function (e) {
var dialog = e.data.definition.dialog;
dialog.on('hide', function () {
dis.ckEditor.focusManager.hasFocus = true;
$('.cke').show();
});
});

Save FabricJS canvas as JPG/PNG upon link click

I am using FiberJS to create a template and I used the following way to trigger save popup upon a link click. But it does not save anything or does not return any data when canvas.toDataURL() is called.
<a id="canvasdownload" download="canvas-image.png" href="">Download</a>
$('a#canvasdownload').click(function(){
$(this).attr('href', canvas.toDataURL());
alert(canvas.toDataURL());
});
But this saves a blank image with an error. With native canvas behavior this saved properly but not after using FabricJS. How can I fix this?
Check demo.

ZeroClipboard Plugin auto click

http://jsfiddle.net/5Ha9d/
I am using zeroclipboard plugin to add the text on click the submit button. Everything seems working but i want it to be automated for certain condition. I am not sure which is the correct way of triggering click event. I already tried with default as $('#copy').click();
I know it is in flash but i tried to know whether it is working or not but as long i unable to do this.
Here is the code i tried
//set path
ZeroClipboard.setMoviePath('http://davidwalsh.name/dw-content/ZeroClipboard.swf');
//create client
var clip = new ZeroClipboard.Client();
//event
clip.addEventListener('load', function () {
clip.setText(document.getElementById('box-content').value);
});
clip.addEventListener('complete', function (client, text) {
alert('copied: ' + text);
});
//glue it to the button
clip.glue('copy');
jQuery('#copy').click();
Is there is a way to trigger this submit button on page load. Not sure is something straight forward.
Thanks for your suggestion.
Vicky

According to this thread, you can't simulate a click on the flash object, and have it setData in the clipboard http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/desktop/Clipboard.html#. It's a security precaution by Adobe.

Javascript image gallery - click on image to advance to next coding

I am trying to see if this javascript code for an image gallery as the option to click on the image to view next. Currently it is only set to go to the next image by clicking on the next/prev buttons. Any thoughts?
Source:
http://threepointmotors.com/lytebox.js
Example:
http://threepointmotors.com/NewsandEvents/CurrentNews/2012/smartElectricDriveCollection/tabid/226/Default.aspx

I see your page has the jQuery library included already, so it should be an easy task.
$('body').on('click', '#lbImage', function() { //when display image is clicked
if ($('#lbNext2_Off').is(':hidden')) //check if it isn't the last image
myLytebox.changeContent(myLytebox.activeSlide + 1); //move to next image
});