I have 3 layers of canvas - 1 is matrix, 2 & 3 is graphics, how to preserve them in one image?
<div style="position: relative;">
<canvas id="matix" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="layer1" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="layer2" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
You can draw one canvas into another with ctx.drawImage(other_canvas,0,0)
If you do that in the right order, you will have all the canvas contents correctly layered in one of them.
If you want to save the image, you can call canvas.toDataURL() to get the contents as a base64 encoded PNG file.
Related
How can I create a single image from a tiled structure like this:
+-----+-----+-----+
|tile1|tile2|tile3|
+-----+-----+-----+
<div>
<div>
<img> tile 1
</div>
</div>
<div>
<div>
<img> tile 2
</div>
</div>
<div>
<div>
<img> tile 3
</div>
</div>
This is the detail:
<div style="position: absolute; left: -256px; top: -256px; width: 256px; height: 256px;">
<div style="position: absolute; left: 0px; top: 0px;">
<img src="tile1.png" style="width: 256px; height: 256px;">
</div>
</div>
<div style="position: absolute; left: 0px; top: -256px; width: 256px; height: 256px;">
<div style="position: absolute; left: 0px; top: 0px;">
<img src="tile2.png" style="width: 256px; height: 256px;">
</div>
</div>
....
You can simply make a canvas big enough to hold all of your images, then draw each image at the appropriate offset to replicate the same tiling effect that your HTML provides.
Or, if you really want to specifically capture the layout from your HTML, there's a package called html2canvas (https://html2canvas.hertzen.com/) which will do screen captures from any HTML, not just tiled images.
I have a html file like:
<!DOCTYPE html>
<html>
<head>
<title>Drag-Drop</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="myJavascript.js"></script>
</head>
<body height="10000" width="10000" style="position: relative; left: 0px; top: 0px">
<svg id="svgBackground" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
</svg>
<svg id="svgTempArrows" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
</svg>
<svg id="svgForwardArrows" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
</svg>
<svg id="svgBackwardArrows" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
</svg>
<svg id="svgArrowHeads" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
</svg>
</body>
</html>
And in myJavascript.js I have:
window.onload = function background()
{
...
var elements = Array.from(document.getElementsByTagNameNS(svgNS, 'svg'));
elements.forEach(function(el){
el.addEventListener("mousedown", startDraw);
el.addEventListener("mousemove", draw);
el.addEventListener("mouseup", endDraw);
});
function startDraw(ev)
{
...
}
function draw(ev)
{
...
}
function endDraw(ev)
{
...
}
It has worked, but It only works in one area in a web page (The mouse envents seem only effect in upper area of web page).
I don't know why is it. Can you help me? Thanks
Is there a problem here?
document.getElementsByTagNameNS(svgNS, 'svg')
and your position all the same
i have done some changes to your code and now it is working fine with me
i used jquery
var elements = $('svg');
for(var i=0;i<elements.length;i++){
elements[i].addEventListener("mousedown", startDraw);
elements[i].addEventListener("mousemove", draw);
elements[i].addEventListener("mouseup", endDraw);
}
I'm having hard time on figuring out how should i do in order to set a proper size to the following canvases
<div id="canvasesdiv" style="height: 100%; width: 100%; display: table-cell; position: relative; width:578px; height:415.5px">
<canvas id="c1" style="z-index: 1; position:absolute; left: 80px; width="680" height="435"></canvas>
<canvas id="c2" style="z-index: 2; position:absolute; left: 80px; width="680" height="435"></canvas>
<canvas id="c3" style="z-index: 3; position:absolute; left: 80px; width="680" height="435"></canvas>
<canvas id="c4" style="z-index: 4; position:absolute; left: 80px; width="680" height="435"></canvas>
<canvas id="c5" style="z-index: 5; position:absolute; left: 80px; width="680" height="435"></canvas>
Cleary width and height are parsed wrongly (html is expecting : and the values in px) but somehow the canvases are drawn in their full dimension. Instead if i use something like:
<canvas id="c1" style="z-index: 1; position:absolute; left: 80px; "></canvas>
<canvas id="c2" style="z-index: 2; position:absolute; left: 80px; "></canvas>
<canvas id="c3" style="z-index: 3; position:absolute; left: 80px; "></canvas>
<canvas id="c4" style="z-index: 4; position:absolute; left: 80px; "></canvas>
<canvas id="c5" style="z-index: 5; position:absolute; left: 80px; "></canvas>
or with
... width: 500px; height: 500px;"
The canvases are all cropped down to 300x150 (chrome default) no matter what.
The problem is that position:absolute is a must in order to have layers. How can i do in order to define a dimension without ruin the canvas quality and make it so it stays in the given boundary?
See this example, can you fix it so that the position is absolute but the size is whatever you want and centered? See here.
If I add position:absolute, the overlay works but it is out of the div bound, see here.
You are inserting HTML width and height attributes in the style attributes, which should hold css. If you check the dev tools, you will see the relevent rules are striked through. Just use css to style them. Even better, place them in the <style/> tag or in an external stylesheet
Not good:
<canvas style="... width="680" height="435"></canvas>
Good:
<canvas style="... width: 680px; height: 435px;"></canvas>
Or: just close the double quote, and use the attributes anyway (although css is the better solution)
I'm trying to create a sliding image gallery where every interval they will slide along and the first image will fade out and the new image will fade in. The fading in and out is working and my images are set as 'position: absolute', but they won't slide. I set up a jsfiddle so you can see what's happening:
http://jsfiddle.net/9awwF/
The HTML code:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
</head>
<body>
<div style="position: relative; left: 0px; top: 0px;">
<p id="discoImg1a"><a href="includes/images/discoImg1.png">
<img src="http://edubuzz.org/lawprimaryp6/files/2011/11/250px-Disco_ball41.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 0px; z-index: 1"/></a></p>
<p id="discoImg2a"><a href="includes/images/discoImg2.png">
<img src="http://st.depositphotos.com/1005534/1272/v/950/depositphotos_12726061-Glass-Circle-Color-Disco-Ball.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 250px; z-index: 1"/></a></p>
<p id="discoImg3a"><a href="includes/images/discoImg3.png">
<img src="http://fivestaralaska.com/wp-content/uploads/2012/04/disco1.jpeg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 500px; z-index: 1"/></a></p>
<p id="discoImg4a"><a href="includes/images/discoImg4.png">
<img src="http://st.depositphotos.com/1005534/1272/v/950/depositphotos_12726061-Glass-Circle-Color-Disco-Ball.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 750px; z-index: 1"/></a></p>
<p id="discoImg5a"><a href="includes/images/discoImg5.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/disco.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1000px; z-index: 1"/></a></p>
<p id="discoImg6a"><a href="includes/images/discoImg6.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/party.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1250px; z-index: 1"/></a></p>
<p id="discoImg7a"><a href="includes/images/discoImg7.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/karaoke.gif" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1500px; z-index: 1"/></a></p>
<p id="discoImg8a"><a href="includes/images/discoImg8.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/discolights.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1750px; z-index: 1"/></a></p>
<p id="discoImg9a"><a href="includes/images/discoImg9.png">
<img src="http://www.armagh.co.uk/wp-content/uploads/2013/09/Trad-Disco.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 2000px; z-index: 1"/></a></p>
</div>
</body>
The script:
$(document).ready(function () {
$("#discoImg6a").hide();
$("#discoImg7a").hide();
$("#discoImg8a").hide();
$("#discoImg9a").hide();
var currentFirstSlide = 1;
var maxSlides = 9;
function updateSlides() {
// Fade out the first image shown
$("#discoImg" + currentFirstSlide + "a").fadeOut(3000);
// Go through every image and move them to the left by 250px
for (var x = 1; x < 10; x++) {
var left = $("#discoImg" + x + "a").position().left;
$("#discoImg" + x + "a").animate({ left: left - 250 + 'px' });
}
// Calculate which slide the new one will be and fade it in
var newSlide = currentFirstSlide + 5;
if (newSlide > maxSlides) { newSlide = 1; }
$("#discoImg" + newSlide + "a").fadeIn(3000);
// Increment the current first slide ready for the next update
currentFirstSlide++;
if (currentFirstSlide > maxSlides) { currentFirstSlide = 1; }
}
// Move the slides every 3.5s
setInterval(function () { updateSlides() }, 3500);
});
Thank you in advance for any help!
You're animating the left property of the p element, but it has a default position of static, so this doesn't do anything. You should either animate left on the img element or give absolute or relative positioning to the p element.
The problem is that the p element has the id, not the img
<p><a href="includes/images/discoImg1.png">
<img id="discoImg1a" src="..." style="position: absolute; ..."/></a></p>
There is no effect with property left without position absolute or fixed.
On your css try giving that absolute positions a left: 0px; may be it's going to slide automatically, and don't forget to give it a relative container.
I want to set the image src by using a text returned by a JavaScript function. What is the correct way to assign JavaScript return value to src? Code below:
What I am trying to achieve here is adding a dummy random number to the end of the url in order to get rid of browser image caching.
<body><div class="slideshow" style="position: absolute;">
<img src="eval(getMyLink())" width="1024" height="768" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 1024px; height: 768px;" title="">
<img src="eval(getMyLink())" width="1024" height="768" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 1024px; height: 768px;" title="">
</div>
<script language="javascript"><!--
bmi_SafeAddOnload(bmi_load, "bmi_orig_img", 0);//-->
function getMyLink() {
var a = "./Files/1.jpg?a=" + Math.floor(Math.random() * 11);
return a;
}
</script></body>
use jQuery. You will need to add an id attribute to your img tag but this should do it.
<img id="imgLink1" width="1024" height="768" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 1024px; height: 768px;" title="">
$().ready(function(){ $('#imgLink1').att('src', getMyLink()); });
My advices : avoid inline JS, use CSS, and use JQuery.
I would do like this :
<body>
<div class="slideshow" style="position: absolute;">
<img id="img1" src="" class="myImages" title="image">
<img id="img2" src="" class="myImages" title="image">
</div>
<script>
bmi_SafeAddOnload(bmi_load, "bmi_orig_img", 0);
function getMyLink() {
var a = "./Files/1.jpg?a=" + Math.floor(Math.random() * 11);
return a;
}
//Assign image source and display it (you have defined display:none attribute)
$('#img1').attr('src', getMyLink()).fadeIn(300);
$('#img2').attr('src', getMyLink()).fadeIn(300);
</script>
<style>
.myImages {
width : 1024px;
height : 768px;
position: absolute;
top: 0px;
left: 0px;
display: none;
z-index: 5;
opacity: 0;
}
</style>
</body>