I am displaying a table with some data in my jsp. I want to add a download button on top of it , clicking on which will download the whole table in the form of an image. Please help me with this implementation.
$(function() {
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
});
});
check out this fiddle Demo
Click on Save PNG right click to save image as option and your good to go.
Related
i have a json data like that
{ "ikealogo": "https://xxx.blob.core.windows.net/logo/24536.jpg?v=20120912144845" }
how can i convert it in image view?
Things i have tried but need alternate solution. it works fine in popup window but **i need to convert it for my content script in a specific webpage, when user will hover mouse on a text and should appear this image ** but applying same process is not working at all.
//popup.js
var image = document.getElementById('img');
image.src = jsonData.ikea.ikealogo;
//popup.html
<img id="img" />
SOLUTION:
To appear any image from external server on DOM :
I parse data from API response and create div with jquery and append the image data inside it.
There's NO need for CROSS DOMAIN COMPLICITY.
var image= data["company"].ikealogo;
var div=jQuery('<div/>',
{
"class": "divC",
});
var i = jQuery('<img />').error(function()
{
this.src = default_image;
}).attr('src', image)
.css({ "width":"50px", "height": "50px","margin": "0px 10px 10px 10px"});
div.append(i)
I am creating an image dynamically on the page using dataURL,
var aImg = document.createElement('img');
aImg.setAttribute('src', dataURL);
aImg.setAttribute('alt', 'pic');
aImg.setAttribute('width', '438px');
aImg.setAttribute('height', '267px');
aImg.onclick = (function() {
//download the image object
})();
I am not sure what to do to download this image object that is a PNG image.
Can someone give hints?
If you want the image to be displayed the follwing should be fine :
aImg.src = YOUR_URL
if you want to save it on to the file , you shoud redirect and let the browser take care of the rest. JS redirect can be done as follows :
window.location.replace(dataURL)
If you want the browser to give a pop-up saying "Save File" check out this link : http://muaz-khan.blogspot.in/2012/10/save-files-on-disk-using-javascript-or.html
Hello I make simple site but I have a little trouble with loading images. As you can see with new category there is new image. There is a problem, beacause only then img is loading, and I want to load all images when my site is loading.
sample code how I operate with those img.
imgUrls.push("img/01.jpg");
imgUrls.push("img/02.jpg");
var k3:Boolean=false;
btn1.addEventListener(MouseEvet.CLICK, clickFunc);
function clickFunc(e:MouseEvent):void
if (k3==false)
{
img1.myUILoader.source = imgUrls[0];
k3=true;
}else
{
img2.myUILoader.source = imgUrls[0];
k3=false;
}
btn2.addEventListener(MouseEvet.CLICK, clickFunc2);
function clickFunc2(e:MouseEvent):void
if (k3==false)
{
img1.myUILoader.source = imgUrls[1];
k3=true;
}else
{
img2.myUILoader.source = imgUrls[1];
k3=false;
}
So my question is: How can I load all img with site.?
Your code currently is telling the program to load the images when either btn1 or btn2 is clicked. You need to tell the program to load the images right away, before user input, then have btn1 and btn2 display them.
using the below code, I have inserted the data in the listview
var renderItemElement = function(item) {
return $.tmpl("<li><a>${text}</a></li>", item)
.data("item", item)
.insertAfter(listHeaders[item.priority]);
};
and when click it, i can remove the data, but when i click it, i want the data to be passed to the next page. Can anyone help me with this code?
$("#bankList").delegate("li.item", "click", function() {
model.remove($(this).data("item"));
$(this).slideUp(function() {
$(this).remove();
});
});
if your has a href or if you want the whole thing to display as a listview at all, you need to use .listview() method. If the ul tag already existed and is a listview, use .listview('refresh')
to move to another page with javascript, not a href, you need to use
$.mobile.changePage()
I have a HAML page with some div elements. I need to inject this into a div on another page when a button is clicked. how do i do this? thanks
You have to add the jQuery plugin from jQuery.com. you can download the plugin or use the link
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js as src in the js file.
then use the follwing code
$(document).ready(function(){
$("#your_button_Id").click(function(){
$.ajax({
url: "test.html",
context: document.body,
success: function(response){
$('#div_Id').html(response);
}
});
});
});
Hope this helps!!!
happy coding.
try $('div').load('lol.HTML') if you want to use jquery
To simplify this process, add the jQuery library to your page.
Below is an example of using jQuery to load data from a different page into the current page:
inject_to = $("div#id"); // the div to load the html into
load_from = "/some/other/page"; // the url to the page to load html from
data = ""; // optional data to send to the other page when loading it
// do an asynchronous GET request
$.get(load_from, data, function(data)
{
// put the received html into the div
inject_to.html(data);
}
Note that this opens for security/xss issues, and I would recommend using .text instead of .html, and load only plain text from the external page. More info on jQuery ajax: http://api.jquery.com/category/ajax/
To do this when a button is clicked, put the above code into a function, like this:
function buttonClicked()
{
inject_to = $("div#id"); // the div to load the html into
load_from = "/some/other/page"; // the url to the page to load html from
data = ""; // optional data to send to the other page when loading it
// do an asynchronous GET request
$.get(load_from, data, function(data)
{
// put the received html into the div
inject_to.html(data);
}
}
Then add an event handler for the click event to the button, like this:
$("button#id").click(buttonClicked);
More info on jQuery events: http://api.jquery.com/category/events/