I have embedded images in text blocks on my Divi website. I'd like that when the user clicks on the image, the largest/original size of the image opens up in a lightbox (instead of the thumbnail size as stated in the src). I have hundreds of images and therefore would be too time consuming to change the src link on each to the original size url. Could anyone help me on how I can change the src link to point to the largest/original image size and then for it to open in a lightbox upon click? I'm not sure of the JQuery to go about this. I've included below the HTML structure I'm using for each embedded image in the text blocks. I've also included the JQuery snippet I'm currently using. The snippet opens the image in a lightbox but only the thumbnail version (not the largest size possible).
Here are a few examples of the URLs of the images on my site:
https://mydomain/wp-content/uploads/2023/01/myimage-235x300.jpg
https://mydomain/wp-content/uploads/2023/01/myimage.jpg
https://mydomain/wp-content/uploads/2023/01/myimage-1.jpg
HTML:
<div class="dmpro_timeline_item_description">
<img decoding="async" loading="lazy" src="https://mydomain/wp-content/uploads/2023/01/myimage-235x300.jpg" width="235" height="300" class="wp-image-2129 alignnone size-medium">
<br>
<em>Image caption</em>
</div>
JQuery:
<script>
if ( jQuery('.dmpro_timeline_item_description').length > 0 ) {
jQuery(".dmpro_timeline_item_description p img").each(function(i, e){
var img_src = jQuery(this).attr("src");
var img = jQuery(this).parent().html();
var new_elem = jQuery('<a style="color: inherit;" href="'+img_src+'">'+img+'</a>');
jQuery(this).parent().html(new_elem);
});
}
jQuery(document).ready(function($){
$(".dmpro_timeline_item_description p").magnificPopup({
delegate: 'a',
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
mainClass: 'mfp-no-margins mfp-with-zoom',
gallery:{
enabled:false,
},
zoom: {
enabled: true,
duration: 200
}
});
});
</script>
In the snippet below you can see that the width and the height attributes can be toggled.
function toggleLarge(context) {
if (!context.large) {
context.large = true;
context.formerWidth = context.width;
context.formerHeight = context.height;
context.removeAttribute("width");
context.removeAttribute("height");
} else {
context.large = false;
context.width = context.formerWidth;
context.height = context.formerHeight;
}
}
for (let img of document.querySelectorAll("img.size-medium")) {
img.addEventListener('click', function(event) {
toggleLarge(this);
});
}
<div class="dmpro_timeline_item_description">
<img decoding="async" loading="lazy" src="https://www.yourtango.com/sites/default/files/styles/header_slider/public/image_blog/lion-meaning.png?itok=-eB2XSyC" width="235" height="300" class="wp-image-2129 alignnone size-medium">
<br>
<em>Image caption</em>
</div>
If you also need to change the URLs, then you will need to proceed similarly. Since you have not given a sample of large URLs, it's impossible to tell you how to convert the URL to something you did not specify. However, if the "-235x300" part is the problematic, then you can do something like this:
function toggleSrc(context) {
if (context.large) {
context.src = context.src.replace(".", "-235x300.");
} else {
context.src = context.src.replace("-235x300", "");
}
}
and call this function in toggleLarge just before the if, passing context. If this is inappropriate to your problem, then you need to provide further information.
EDIT
Initially, for the sake of simplicity, the event listener was defined with the onclick attribute, but I have changed it to be an addEventListener as per Roko C. Buljan's suggestion.
EDIT2
As Roko C. Buljan explained, it's also possible to use forEach instead of a for loop. For those who prefer that syntax, there is another snippet below:
function toggleLarge(context) {
if (!context.large) {
context.large = true;
context.formerWidth = context.width;
context.formerHeight = context.height;
context.removeAttribute("width");
context.removeAttribute("height");
} else {
context.large = false;
context.width = context.formerWidth;
context.height = context.formerHeight;
}
}
document.querySelectorAll("img.size-medium").forEach(function(img) {
img.addEventListener('click', function(event) {
toggleLarge(this);
});
});
<div class="dmpro_timeline_item_description">
<img decoding="async" loading="lazy" src="https://www.yourtango.com/sites/default/files/styles/header_slider/public/image_blog/lion-meaning.png?itok=-eB2XSyC" width="235" height="300" class="wp-image-2129 alignnone size-medium">
<br>
<em>Image caption</em>
</div>
EDIT3
In the snippet below I have implemented the two functions you need based on the comment section's content:
/*
https://mydomain/wp-content/uploads/2023/01/myimage-235x300.jpg
https://mydomain/wp-content/uploads/2023/01/myimage.jpg
https://mydomain/wp-content/uploads/2023/01/myimage-1.jpg
*/
function thumbnailToLarge(input) {
return input.substring(0, input.lastIndexOf(".")).split("-").filter((item) => (
!/[0-9]+x.*[0-9]+/g.test(item)
)).join("-") + input.substring(input.lastIndexOf("."));
}
console.log("Thumbnail to large: " + thumbnailToLarge("https://mydomain/wp-content/uploads/2023/01/myimage-235x300.jpg"));
function largeToThumbnail(input) {
return input.substring(0, input.lastIndexOf(".")) + "-235x300" + input.substring(input.lastIndexOf("."))
}
console.log("Large to thumbnail " + largeToThumbnail("https://mydomain/wp-content/uploads/2023/01/myimage.jpg"));
console.log("Large to thumbnail " + largeToThumbnail("https://mydomain/wp-content/uploads/2023/01/myimage-1.jpg"));
http://codepen.io/TheEnd/pen/mEzVAE
The link above is a jigsaw game i found on codepen. I wish to make the image that is the jigsaw to be an image uploaded by the user. So the jigsaw is an image they choose. I want to do this with Javascript i understand PHP may be easier but i want a javascript/jquery application. The code below is what i believe can solve this issue but i dont know how to implement it as a img src and bring both codes together any help would appreciated.
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
<script>
function previewFile(){
var preview = document.querySelector('img'); //selects the query named img
var file = document.querySelector('input[type=file]').files[0]; //sames as here
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file); //reads the data as a URL
} else {
preview.src = "";
}
}
previewFile(); //calls the function named previewFile()
</script>
I am using Javascript to put images from Fireworks into my HTML page in a "ghost div". However, the Appointment bookings button sliced via Fireworks is not included. How would I include the link slice for the button while still getting the image effect?
Javascript Code:
$(document).ready(function() {
$('.men').click (function() {
var image = ('<img src="images/deal_men.fw.png" width="700px" height="500px" alt="Deals" />')
$('.deal_content').html(image).hide().fadeToggle('slow');
});
$('.teen').click (function() {
var image = ('<img src="images/deal_teen.fw.png" width="700px" height="500px" alt="Deals" />')
$('.deal_content').html(image).hide().fadeToggle('slow');
});
$('.couple').click (function() {
var image = ('<img src="images/deal_couples.fw.png" width="700px" height="500px" alt="Deals" />')
$('.deal_content').html(image).hide().fadeToggle('slow');
});
});
I'm working on a web application using JSF and Javascript. I have a question about how to open a pop-up and add information into it.
Indeed, i'm using html2canvas to get the image of the content of a HTML page.
This is the code of my js :
function openPopupWithScreenshot(){
html2canvas($('#contentBody'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
window.open(img);
}
});
}
And the code of my button in JSF:
<h:commandButton value="#{bundle.button_print}" onclick="openPopupWithScreenshot();"/>
The code works perfectly, when i click on the button, a popup appears with my image. But my problem is I want to add more information (stored in a Javabean) into my popup.
Schematically, i want that my popup displays my image and a String stored in my Javabean. I'm a noob in javascript and i don't know how to do.
Could you help me please?
Thank you.
EDIT :
I have tried this :
function ouvrirPopupAvecImprEcran(){
html2canvas($('#contentBody'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
var newImg = window.open(img);
newImg.document.write("<title>TITLE</title>");
newImg.document.write("<img src='"+ img.src +"'/>");
newImg.document.write("<p>TEST</p>");
}
});
}
My popup appears correctly but my image is not display because it doesn't find the source of my image. How could i modify this?
You was almost there, try this:
function ouvrirPopupAvecImprEcran(){
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
var newImg = window.open();
newImg.document.write("<title>TITLE</title>");
newImg.document.write("<img src='"+ img +"'/>");
newImg.document.write("<p>TEST</p>");
}
});
}
The image you created from canvas here var img = canvas.toDataURL("image/png"); was not the HTML Element img. It was a string with data: URL, it's like an image encoded into string.
To understand it better you could look at HTMLCanvasElement#toDataURL() method here http://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement
I'm trying to capture a div into an image using html2canvas
I have read some similar question here like
How to upload a screenshot using html2canvas?
create screenshot of web page using html2canvas (unable to initialize properly)
I have tried the code
canvasRecord = $('#div').html2canvas();
dataURL = canvasRecord.toDataURL("image/png");
and the canvasRecord will be undefined after .html2canvas() called
and also this
$('#div').html2canvas({
onrendered: function (canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
browser gives some (48 to be exact) similar errors like:
GET http://html2canvas.appspot.com/?url=https%3A%2F%2Fmts1.googleapis.com%2Fvt%…%26z%3D12%26s%3DGalileo%26style%3Dapi%257Csmartmaps&callback=html2canvas_1 404 (Not Found)
BTW, I'm using v0.34 and I have added the reference file html2canvas.min.js and jquery.plugin.html2canvas.js
How can I convert the div into canvas in order to capture the image.
EDIT on 26/Mar/2013
I found Joel's example works.
But unfortunately when Google map embedded in my app, there will be errors.
<html>
<head>
<style type="text/css">
div#testdiv
{
height:200px;
width:200px;
background:#222;
}
div#map_canvas
{
height: 500px;
width: 800px;
position: absolute !important;
left: 500px;
top: 0;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript" src="html2canvas.min.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script language="javascript">
$(window).load(function(){
var mapOptions = {
backgroundColor: '#fff',
center: new google.maps.LatLng(1.355, 103.815),
overviewMapControl: true,
overviewMapControlOptions: { opened: false },
mapTypeControl: true,
mapTypeControlOptions: { position: google.maps.ControlPosition.TOP_LEFT, style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
panControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
streetViewControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
minZoom: 1,
zoom: 12
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
$('#load').click(function(){
html2canvas($('#testdiv'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png")
window.open(img);
}
});
});
});
</script>
</head>
<body>
<div id="testdiv">
</div>
<div id="map_canvas"></div>
<input type="button" value="Save" id="load"/>
</body>
</html>
I ran into the same type of error you described, but mine was due to the dom not being completely ready to go. I tested with both jQuery pulling the div and also getElementById just to make sure there wasn't something strange with the jQuery selector. Below is an example that works in Chrome:
<html>
<head>
<style type="text/css">
div {
height: 50px;
width: 50px;
background-color: #2C7CC3;
}
</style>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script language="javascript">
$(document).ready(function() {
//var testdiv = document.getElementById("testdiv");
html2canvas($("#testdiv"), {
onrendered: function(canvas) {
// canvas is the final rendered <canvas> element
var myImage = canvas.toDataURL("image/png");
window.open(myImage);
}
});
});
</script>
</head>
<body>
<div id="testdiv">
</div>
</body>
</html>
If you just want to have screenshot of a div, you can do it like this
html2canvas($('#div'), {
onrendered: function(canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
you can try this code to capture a div When the div is very wide or offset relative to the screen
var div = $("#div")[0];
var rect = div.getBoundingClientRect();
var canvas = document.createElement("canvas");
canvas.width = rect.width;
canvas.height = rect.height;
var ctx = canvas.getContext("2d");
ctx.translate(-rect.left,-rect.top);
html2canvas(div, {
canvas:canvas,
height:rect.height,
width:rect.width,
onrendered: function(canvas) {
var image = canvas.toDataURL("image/png");
var pHtml = "<img src="+image+" />";
$("#parent").append(pHtml);
}
});
10 2022
This question is quite old, but if anyone looking for a clear solution to implement then here it is. This is using Pure JS with html2canvas and FileSaver
I have tested and it works fine.
Capture everything inside a div.
Step 1
Include the scripts in your footer. jQuery is not needed, These two are fine. If you already have these two in your file, watch out for the correct version. I know it's a little thing, but it is important.
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
Step 2
Basic div. The style attribute is optional. I am using it here to make it look presentable.
<div id="savethegirl" style="background-color:coral;color:white;padding:10px;width:200px;">
I am a Pretty girl 👩
</div>
<button onclick="myfunc()">Save the girl</button>
It should look like this
Step 3
Include this script
function myfunc(){
// if you are using a different 'id' in the div, make sure you replace it here.
var element = document.getElementById("savethegirl");
html2canvas(element).then(function(canvas) {
canvas.toBlob(function(blob) {
window.saveAs(blob, "Heres the Girl.png");
});
});
};
Step 4
Click the button and it should save the file.
Resources
CDN from: https://cdnjs.com/
This is from Carlos Delgado's article (https://ourcodeworld.com/articles/read/415/how-to-create-a-screenshot-of-your-website-with-javascript-using-html2canvas). I simplified it
If this answer is useful.
Hit that up arrow 🠉 It will help others to find it.
I don't know if the answer will be late, but I have used this form.
JS:
function getPDF() {
html2canvas(document.getElementById("toPDF"),{
onrendered:function(canvas){
var img=canvas.toDataURL("image/png");
var doc = new jsPDF('l', 'cm');
doc.addImage(img,'PNG',2,2);
doc.save('reporte.pdf');
}
});
}
HTML:
<div id="toPDF">
#your content...
</div>
<button id="getPDF" type="button" class="btn btn-info" onclick="getPDF()">
Download PDF
</button>
You can get the screenshot of a division and save it easily just using the below snippet. Here I'm used the entire body, you can choose the specific image/div elements just by putting the id/class names.
html2canvas(document.getElementsByClassName("image-div")[0], {
useCORS: true,
}).then(function (canvas) {
var imageURL = canvas.toDataURL("image/png");
let a = document.createElement("a");
a.href = imageURL;
a.download = imageURL;
a.click();
});
It can be easily done using html2canvas, try out the following,
try adding the div inside a html modal and call the model id using a jquery function. In the function you can specify the size (height, width) of the image to be displayed. Using modal is an easy way to capture a html div into an image in a button onclick.
for example have a look at the code sample,
`
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<p>Some text in the modal.</p>
`
paste the div, which you want to be displayed, inside the model. Hope it will help.
window.open didn't work for me... just a blank page rendered... but I was able to make the png appear on the page by replacing the src attribute of a pre-existing img element created as the target.
$("#btn_screenshot").click(function(){
element_to_png("container", "testhtmltocanvasimg");
});
function element_to_png(srcElementID, targetIMGid){
console.log("element_to_png called for element id " + srcElementID);
html2canvas($("#"+srcElementID)[0]).then( function (canvas) {
var myImage = canvas.toDataURL("image/png");
$("#"+targetIMGid).attr("src", myImage);
console.log("html2canvas completed. png rendered to " + targetIMGid);
});
}
<div id="testhtmltocanvasdiv" class="mt-3">
<img src="" id="testhtmltocanvasimg">
</div>
I can then right-click on the rendered png and "save as". May be just as easy to use the "snipping tool" to capture the element, but html2canvas is an certainly an interesting bit of code!
You should try this (test, works at least in Firefox):
html2canvas(document.body,{
onrendered:function(canvas){
document.body.appendChild(canvas);
}
});
Im running these lines of code to get the full browser screen (only the visible screen, not the hole site):
var w=window, d=document, e=d.documentElement, g=d.getElementsByTagName('body')[0];
var y=w.innerHeight||e.clientHeight||g.clientHeight;
html2canvas(document.body,{
height:y,
onrendered:function(canvas){
var img = canvas.toDataURL();
}
});
More explanations & options here: http://html2canvas.hertzen.com/#/documentation.html