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.
Related
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 am using Angular.JS with tizen to create a smart tv app. I want to get a list of subtitles to show on my video app but I keep getting this error: "Error: The caph-list's container and template view should have their own size such as width and height."
On my main html I have a "settings" directive here:
<settings></settings>
that uses settings.html to display a caph-list here:
<caph-list container-class="container" wrapper-class="setting-wrapper" items="item in subtitles"> <div class="item" focusable>{{item}}</div> </caph-list>
I've tried various setups with the container and wrappers such as this within my settings.html:
<div class="container">
<div class="wrapper">
<caph-list container-class="container" wrapper-class="setting-wrapper" items="item in
subtitles">
<div class="item" focusable>{{item}}</div>
</caph-list>
</div>
</div>
But I still am getting the same error.
Here is the CSS being used on the container and wrapper classes:
.container {
width: 800px;
height: 100px;
background-color: red;
}
.setting-wrapper {
width: 400px;
height: 100px;
left: 50px;
background-color: green;
}
.item {
width: 20px;
height: 20px;
background-color: blue;
margin: 10px;
}
Here is the subtitles array at the start:
$scope.subtitles = ["1","2","3"]
This array will change to an array of objects containing subtitle information when a video is chosen.
Your container has 0 px width, probably. Try setting an absolute value instead of percentage, i.e, 800 px instead of 60%), and make sure that the parent element has a width and height (not 0.)
I have the following question. is it possible to change the fill color of the svg file with the colorpicker. So far I have come to a moment where I can change the color of the background, but it would be best to change the color of the graphics as if it were a background or foreground. I would be very grateful for the help because I am a person who is just learning to program in jquery and does not understand everything yet. Underneath I attach my code. Pictures placed in the diva are changed using the buttons so they change dynamically. Once again, I will be very grateful for your help.
<style>
.inner1
{
width: 500px;
height: 500px;
margin:0 auto;
position: absolute;
margin-bottom:0;
border:solid 2px black;
overflown:none;
}
</style>
<html>
<div id="Image-Holder-fg" class="inner1 " >
<img class="popart1" src ="img/DCIM/Animal/animal5.svg" style="width:
1425px; height: 1425px;" />
<img class="popart2" src ="img/DCIM/Animal/animal6.svg" style="width:
1425px; height: 1425px;" />
<img class="popart3" src ="img/DCIM/Animal/animal7.svg" style="width:
1425px; height: 1425px;" />
<img class="popart4" src ="img/DCIM/Animal/animal8.svg" style="width:
1425px; height: 1425px;" />
</div>
<div id="picker-fg"></div>
</html>
<script>
$('#picker-fg').colpick({
flat:true,
layout:'hex',
submit:0,
colorScheme:'dark',
onChange:function(hsb,hex,rgb,el,bySetColor) {
$("#Image-Holder-fg").css('background-color','#'+hex);
if(!bySetColor) $(el).val(hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
</script>
Use the SVG inline, that way you can select an specific node and set the fill using JS.
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
I am designing a webpage and want multiple images coming from one image using Javascript, CSS or Jquery whatever is required.
<img src="main.png" >
<img src="submain1.png" >
<img src="submain2.png" >
<img src="submain3.png" >
I am new to javascript and so it's getting difficult to solve it.
main.png is the main image and I want submain1.png, submain2.png, submain3.png images to come from the main.png one after the other as soon as the page loads.
As others have suggested, we think you are asking about sprite sheets. Now that you know a more common term for what you might be after you could try some searches. There are lots of CSS sprite issues on this site:
CSS Sprite Issues On StackOverflow
This is a quick demo:
#full { width: 389px; height: 186px; }
#window1 { background-position: 369px -11px; }
#window2 { background-position: 194px -91px; }
.iconback {
border: solid 1px;
background-image: url(http://www.icons-land.com/images/products/VistaPlayStopPauseIcons.jpg);
}
.window { width: 80px; height: 80px; margin: 1em; }
<div id="full" class="iconback"></div>
<div id="window1" class="iconback window"></div>
<div id="window2" class="iconback window"></div>