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.
Related
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?
I have web page which display product images. These images are coming from server (images are not specific or dynamic images ) over HTTP request in JSON format. This JSON has information about each image.
I want to add dialog or popup box with respective image information when you click on image with Javascript ES6 Engine. How I can pass image Information from JSON to dialog or popup when I click a specific image.
Let's assume you wrote
<img id="xyz" data-id="alpha" src="http://some.url/image.jpg" />
Then you may retrieve the id value writing
document.getElementById("xyz").dataset.id
In your case, since you want to use the value when the image is clicked, you may use an onClick event handler, like this:
<img data-id="alpha" src="http://some.url/image.jpg" onClick="someFunction();" />
and then have
someFunction = (ev) => {
let id = ev.target.dataset.id;
// Put here the code to open you dialog or popup
// based on the data retrieved by using the id
}
This also works assuming you used the same image element mentioned by #Ed
<img id="xyz" data-id="alpha" src="http://some.url/image.jpg" />
Then drop in the following JS to select the image by the ID:
const image = document.querySelector("#xyz");
Then use the following code to "listen" for a click on the image:
image.addEventListener("click", popup);
Then use the following code to create a popup:
function popup() {
alert("Hello! I am a popup!!");
}
I am working on Html5 canvas.
Currently I am downloading image on right click and selecting an option of save image
Now i want to include DOWNLOAD button that can save and downloads the Canvas as an Image.
My code is :
var download = document.getElementById('img-download');
download.addEventListener('click', prepareDownload, false);
function prepareDownload() {
var canvas = document.getElementById("memecanvas");
document.getElementById("memecanvas").src = canvas.toDataURL();
Canvas2Image.saveAsPNG(canvas);
}
This simply enables to download it via right click.
Please help me how to deal with this on Button click action.
Thanks in advance!
Just create a button, give it an ID of, say, "download-button".
Then instead of adding the click event handler to the img-download element, assign it to the button using it's ID.
i'm not great with Javascript and jquery etc.
Using http://odyniec.net/projects/imgareaselect/ and a CSS popup, i'm trying to create a file upload that you can crop the image by choosing your selection with and then cancel or continue to upload the file.
I've got the popup opening with the image inside and you can crop the part of the image you want. My issue at the moment is that when you click on the "Cancel" button, the crop highlight still remains. How would I go about getting that to close too?
I've tried numerous things, checking to see if it can hide the div if the other div is pressed, or hidden, or not visible, and I just can't seem to get anything to work.
Here is my jsbin, the upload part isn't working though, so you can't actually see the error on there.
http://jsbin.com/eKaNupU/1
Thanks in advance for any help!
UPDATE:
Working (up until it doesn't!) example: http://www.costapass.es/imageupload/
Looks like you need to do cancelSelection() (see: http://odyniec.net/projects/imgareaselect/usage.html).
In order to get access that method you need to get a reference to your imgAreaSelect object. To do that, put the following in your <head> (or similar).
var ias = null;
$(document).ready(function() {
ias = $('#uploadPreview').imgAreaSelect({ instance: true });
});
Then modify your close button to be:
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
Cancel
<img id="uploadPreview" style="display:none;"/>
</div>
Your modified jsbin: http://jsbin.com/eKaNupU/11/edit
I'm wanting to create a gallery which displays a main image when the thumbnails are clicked. When clicked the thumbnails rather than altering the image in the webpage take the user to the file where the image is kept and display it in the top right corner.
No idea why this is happening ? Any suggestions where I'm going wrong and how to fix this ?
<img id="veiwer" src="images/motorbike-girl.jpg" />
<div id='thumbs'>
<a href='images/chicks.jpg' onclick="gallery(this);"><img src='images/chicks-
thumb.jpg'/></a>
<a href='images/motorbike-girl.jpg' onclick="gallery(this);"><img
src='images/motorbike-girl-thumb.jpg'/></a>
<a href='images/yamaha-thumb.jpg' onclick="gallery(this);"><img
src='images/yamaha.jpg'/></a>
</div>
function gallery(change) {
document.getElementById('viewer').src = change.href;
}
The problem occurs because of the default behavior of the anchor tag : by default, when you click a link, you get to the page/document it's pointing to.
So, in your javascript you would need to tell "Don't run the default behavior, only what I want to do". It's done through the preventDefault() method of the event.
cfr this fiddle for a working example, where I removed also the inline javascript (= onclick attribute).