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
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.
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>
I am having a loading effect on some divs, I put a transparent div on them with a loading image on the center of it.
Here is the CSS:
.gear-modal {
width: 100%;
height: 100%;
position: absolute;
z-index:2147483640;
overflow:hidden;
background-image:url('https://business.comcast.com/img/preloader.gif');
background-repeat:no-repeat;
background-position: center;
background-color:rgba(0,0,0,0.5);
}
Please see this jsfiddle demo:
http://jsfiddle.net/margwt9h/3/
As you can see in the demo, the image borders are somehow not smooth, why it is showing like this? How this could be fixed?
P.S: The problem is not with the loading image, the same image looks fine everywhere else but not here.
Yes, the image looks really pixelated. Try using different gif image and adjust the width and height. Check out this snippet, where I used different image and set height and width :)
function show_gear_modal(element){
$(element).css('position', 'relative');
var custom_modal_html = '<div class="gear-modal"></div>';
$(element).prepend(custom_modal_html);
$(element+' .gear-modal').fadeIn();
}
$('.show_loading').on('click', function(){
show_gear_modal('.my_div');
})
.gear-modal {
width: 100%;
height: 100%;
position: absolute;
z-index:2147483640;
overflow:hidden;
background-image:url('http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_gray_350.gif');
background-size: 64px 64px;
background-repeat:no-repeat;
background-position: center;
background-color:rgba(0,0,0,0.5);
}
.my_div{
min-height: 400px;
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="my_div">
Here is some Content....<br /><br /><br />
<a class="show_loading"><strong>Click here to show the loading</strong></a>
</div>
Nope, it actually is just the image. There are ugly white non-transparent pixels around the edges of the image. Pretty obvious when you put just a plain black background behind it.
If you don't like how it looks I suggest you find a different image.
This question has been asked before but I can't seem to get it to work. Hopefully you can see the error of my ways. The code below will capture the text and gray div but not the image.
<div id="snapshot" style="left: -60px; height: 1000px; width: 1000px;">
<p>THIS IS A TEXT TEST</p>
<div style="width: 100px; height: 100px; float: left; background: #f0f0f0">
</div>
<img src="http://photos.capturemyarizona.com/photos/LnnOEyWSV4fh846ohaIAQg/display.jpg" />
</div>
$("#myBtn").click ->
html2canvas $("#snapshot"),
background: "red"
onrendered: (canvas) ->
imgSrc = canvas.toDataURL()
popup = window.open(imgSrc)
return
return
<button id="myBtn">Click Me</button>
Here's the fiddle
jsfiddle
OK, well I figured out what the problem is. html2canvas can't capture an image if it's not from the same origin. My images are coming from a CDN.
html2canvas docs