I try to convert content div below to a single image downloadable How is the piece with the canvas or other code after convert show Download Image button
how i do it
#content{
position: absolute;
width: 300px;
height: 200px;
border: 5px solid red;
overflow: hidden;
}
#img1{
width: 300px;
height: 200px;
position: absolute;
z-index: 5;
}
#img2{
position: absolute;
z-index: 6;
width: 150px;
height: 190px;
}
#img3{
position: absolute;
z-index: 7;
width: 200px;
height: 100px;
}
<div id="content">
<img id="img1" src="http://www.completeleasing.co.uk/media/sector%20images/software-2.jpg">
<img id="img2" src="http://www.ipwatchdog.com/wp-content/uploads/2015/08/programing-software.jpg">
<img id="img3" src=" http://www.sikich.com/blog/image.axd?picture=%2F2014%2F04%2FTeam.jpg">
</div><br><br><br><br><br><br><br><br><br><br><br><br>
<input type="button" value="convert div to image"><br>
<h3>result:</h3>
You should use the html2canvas library for this. Make sure you set allowTaint to true so that it renders the cross-origin images as well. See this JSFiddle for an example.
The html2canvas function returns a promise that provides a <canvas> element which you can put wherever you want to display the rendered image. You can then treat it like you would any other canvas, including right-clicking it to download as an image.
This updated JSFiddle includes a link to download the image. Keep in mind that this only works in browsers that support the download attribute on a tags.
Download and import this JS file to the page where you need to convert div to image. Link
Image format can be changed to PNG or JPG.
Use the below function on onclick functionality.
var tagName = document.getElementsByClassName("grid-div-tag").id;
html2canvas(document.getElementById(tagName)).then(function (canvas) {
var anchorTag = document.createElement("a");
document.body.appendChild(anchorTag);
anchorTag.download = "Picture.png";
anchorTag.href = canvas.toDataURL();
anchorTag.target = '_blank';
anchorTag.click();
});
Reference link: https://codepedia.info/convert-html-to-image-in-jquery-div-or-table-to-jpg-png
Related
I have attepted to use Html2Canvas.min.js and whenever I attempt to convert a div I get an error:
#2 3ms Unable to access cssRules property DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet
I want to be able to convert a div (that contains 2 images) so you will be able to download it.
Here is the code I have tried:
HTML
<input type="file" name="" id="" accept="image/*">
<div id="capture" class="area">
<img style="z-index: 1;" src="./Imgs/overlay.png" alt="No image chosen yet...">
<img style="z-index: 0;" src="./Imgs/hero-index.jpg" alt="No image chosen yet...">
</div>
<button id="btn">Download Flag</button>
CSS
body {
background-color: #252525;
color: white;
}
img {
aspect-ratio: 2/1;
width: 25%;
position: absolute;
}
button {
margin-top: 15%;
padding-block: 5%;
width: 25%;
}
JS
document.getElementById('btn').addEventListener("click", (e) => {
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});
})
In the header tag I have the following link towards the module:
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
I have tried different methods such as changing one of the images to a background image and it worked but the next day it didnt. It makes the Canvas 0 height but correct width and if I manualy edit the height this is the output:
(The image looks like a TV error but when I paste it it is a solid color.)
Expected Output:
Overlay Image is ontop and then the other image below.
Im working on a project and a part of it is making an image disapear on hover, and replace that with text in the same location! I have to do it through javascript.
im very new to front end web development so any help would be great!
.main-img1{
height: 400px;
width: 600px;
margin-top: 80px;
background-size: 600px 400px;
box-shadow: 10px 10px 5px rgb(24, 22, 22);
position: relative;
text-align: center;
font-size: 25px;
color: black;
border-radius: 50px;
}
.img1-text{
display: none;
position: absolute;
bottom: 8px;
left: 150px;
<section class="main-body">
<div>
<img class="main-img1" src="img/automotive.jpg">
<h1 class="img1-text" id="img1text"> Here are some samples of my automotive photography! I specialize in "Rolling Shots" which are caputring a vehicle in motion, while the background and foreground show the motion.</h1>
</div>
You can replace any element using the "magical" outerHTML like this...
First, I gave your image an ID to make javascript operations easier...
<img id="I" class="main-img1" src="img/automotive.jpg">
Now replace the image with a paragraph of text...
I.outerHTML='<p>Well what do you know!</p>';
For easy one-line HTML...
<img onmouseover="this.outerHTML='<p>Well what do you know!</p>';" class="main-img1" src="img/automotive.jpg">
First off, this is a very odd thing to do in Javascript. Usually hover states, appearing and disappearing, etc. are handled by CSS.
to do it in js you have to add a mouseover event listener to the image to execute a function to grab the element you want to disappear, add a css class to apply "display: none" to it, grab the element you want to appear and remove a class that adds "display: none" from it.
assuming you have a 'display-none' class on your text element that applies 'display: none' to it, you can do this:
const image = document.querySelector('.main-image1')
const text = document.querySelector('.img1-text')
image.addEventListener('mouseover', () => {
image.classList.add('display-none')
text.classList.remove('display-none')
}
if you were to do this with css its as simple as
.image {
z-index: 2;
}
.image:hover {
display: none;
}
.text {
z-index: 1;
}
that way the text is set behind the image and when you hover over the image it disappears. This also has the benefit of when you take your cursor off the image for the image to reappear where js will need to be told explicitly to do that.
I have a problem with export fabric's canvas to url.
How can I export all content with imes from canvas to url? Because for now, I can see that only red background has been exported.
Here's my fiddle : https://jsfiddle.net/y7pu4wn3/13/
<div id="custom-label" style="position: absolute; right: 0px; top: 50px; z-index:10; width: 512px; height: 256px; border: 1px solid #7d8d20">
<canvas id="draw-area" width="512" height="256" style=""></canvas>
</div>
Your result is correct. You are getting canvas data before image is loaded. Loading images are async. If you will do like this (using your fiddle):
fabric.Image.fromURL(imageObj.src, function(myImg) {
canvas.add(myImg);
var pngURL = canvas.toDataURL();
console.log(pngURL);
$('#placeHolder').html('<img src="'+pngURL+'"/>');
});
It will not work because, image is from different domain. If your actual project has images on the same domain you can try code above. If it is from different domain, so it will be more complicated to do then your logic
I have created website which code can be found here: https://jsfiddle.net/7y373j8x/2
I have created a box which appears when clicking on "Portfolio". (The box is called "object2").
I want to insert PNG images inside of this box. Some have suggested to me to do a jQuery slider but I don't want a slideshow. I want the images to be placed next to each other (as thumbnails) and then the user can click on an image and it should become bigger.
HTML:
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map" />
<div class="container">
<p>About me</p>
<div id="portfolio" onclick="show();">Portfolio</div>
<p>Contact me</p>
<div id="object2" onclick="show();">
</div>
</div>
CSS:
#map {
background-attachment: fixed;
}
.container {
color: yellow;
position: fixed;
top: 54%;
left: 58px;
font-family: normal normal 15px Calibri;
}
#object2 {
border-radius: 15px 50px;
background: black;
position: fixed;
bottom: 200px;
right: 400px;
width: 650px;
height: 350px;
cursor: pointer;
display: none;
z-index: 999;
opacity: 0.4;
}
JavaScript:
function show() {
document.getElementById("object2").style.display = "block";
}
you can append the images using javascript or jquery.
update your show() method like this.
function show(){
document.getElementById("object2").style.display = "block";
var image = new Image();
image.src = 'https://placehold.it/350x150';
var image1 = new Image();
image1.src = 'https://placehold.it/200x100';
$('#object2').html('');
$('#object2').append(image);
$('#object2').append(image1);
}
here's the updated JSFIDDLE for the same. hope it helps.
The reason why your function is not working is because onclick operates within the page scope so it can't execute any functions outside of it.
If I moved the script within the same scope, it will work as you can see here:
JavaScript jsfiddle: https://jsfiddle.net/AndrewL32/saTfR/60/
( I have replaced your style.display = "block" with .style.cssText = 'display: block'; )
jQuery Approach
If you are interested in using jQuery, here is a cleaner and easier jQuery approach to modifying css properties with js:
$("#portfolio").click(function(){
$("#object2").css("display", "block");
});
jQuery jsfiddle: https://jsfiddle.net/AndrewL32/saTfR/58/
I'm trying to replicate an example of an jquery plugin that enlarges image from thumbnail at my desktop and the problem is , the image doesn't enlarge from the thumbnail whenever I click on it
Here is the original source of the jquery demo that enlarges image from thumbnail that i'm trying to replicate
How to enlarge image from thumbnail in jQuery?
This is his working demo http://jsbin.com/egevij/3/edit
The problem is in my HTML .Can someone please point where I'm going wrong?
This is my HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="css/forms.css">
<meta charset=utf-8 />
<title>Demo by roXon</title>
</head>
<body>
<div id="jQ_popup_window">
<div id="jQ_popup" class="shadow radius">
<div id="jQ_popup_close"></div>
<script type = "text/javascript" src ="trouble.js"></script>
</div>
</div>
<img src="http://placehold.it/250x150/cf5" data-full="http://placehold.it/860x590/cf5" alt="" />
<img src="http://placehold.it/250x150/fof" data-full="http://placehold.it/860x590/fof" alt="" />
</body>
</html>
forms.css CSS
CSS:
/* === POPUP WINDOW === */
#jQ_popup_window{
background: rgba(0,0,0,0.6);
left: 0;
margin-left: -9000px;
position: absolute;
top: 0;
width: 100%;
z-index:999999;
}
#jQ_popup {
background: #000;
border: 1px solid #BDB9B8;
margin: 30px auto;
padding: 25px;
position: relative;
width: 600px; /* SET HERE DESIRED W .*/
}
#jQ_popup_close {
background:#fff;
cursor: pointer;
height: 28px;
width: 28px;
position: absolute;
z-index:999999;
right: 10px;
top: 10px;
-webkit-border-radius:30px;
border-radius:30px;
border:2px solid #fff;
border-color: rgba(255,255,255,0.2);
}
#jQ_popup_close:hover{
background:#f00;
}
/* #POPUP WINDOW */
jQuery:
// POPUP WINDOW:
var scrT = $(window).scrollTop();
$(window).scroll(function(){
scrT = $(window).scrollTop();
});
// GET and use WINDOW HEIGHT //
$.getDocHeight = function(){
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
// POPUP WINDOW (lightbox for video and other)
// GET WINDOW SCROLLtop OFFSET
$('[data-full]').on('click', function(e){
e.preventDefault();
$('#jQ_popup').css({
top: scrT+15
}).find('img').remove();
$('#jQ_popup_window').height($.getDocHeight).fadeTo(0,0).css({
marginLeft:0
}).fadeTo(600,1);
var imgToLoad = $(this).data('full');
$('<img>', {src:imgToLoad, width:'100%'}).appendTo('#jQ_popup');
});
// close popup
$('#jQ_popup_close, #jQ_popup_window').on('click', function(){
$('#jQ_popup_window').fadeTo(600,0,function(){
$(this).hide();
});
});
$('#jQ_popup').on('click', function(ev){
ev.stopPropagation();
});
// end POPUP WINDOW
The solution to your problem is simply moving the import of the JavaScript file. It should be placed at the end after your two <img> tags.
<img src="http://placehold.it/250x150/cf5" data-full="http://placehold.it/860x590/cf5" alt="" />
<img src="http://placehold.it/250x150/fof" data-full="http://placehold.it/860x590/fof" alt="" />
<script type = "text/javascript" src ="trouble.js"></script>
It's standard practice to load your javascript files either last in the head or last in the body. Putting script tags inside of other html tags such as <div> as you have done is not normal but I've never seen it have ill effects like this before.