Here is my code
javascript: (function() {
var canvas = document.getElementById("app-view").children[1];
var img = canvas.toDataURL("image/png");
window.open(img);
})();
and here is the app element where I wish to target the second canvas element "children1" but it's not working for some reason and always gets stuck at the first element. A solution will be much appreciated, thanks in advance!
In the picture it always targets the first canvas in yellow but I need the one displayed in blue. You can test the code by saving the script as a bookmark in your browser.
Haven't worked out why toDataURL gets the data of the left canvas, but if you wanted to save the canvas, you can isolate it with
var can = document.getElementById("app-view").children[1];
jQuery("body > *").remove();
jQuery("body").append(can) ;
and then now you can right click and save the canvas
This works for me:
document.getElementById('app-view').childNodes[1]
Related
I create a canvas on the fly from a video. This works great and the canvas is correct and shall never be changed. So what I do I wrap the canvas in 2 divs. Now I change any attribute, even when I call element.setAttribute('test',''), via js on one of the 3 elements and the canvas clears.
I have sadly no clue why this is happening. I only want to set the positioning of the direct canvas parent, and its parent shall toggle between display: none and display: block
Any idea why this is happening and how I can prevent it?
[EDIT] I found the problem:
To append the canvas at the correct position I changed
container.innerHTML = ''
container.appendChild(canvas)
to
container.innerHTML = canvas.outerHTML
The later is initially fine, however when I change something on any attribute of the canvas, the container or parent the canvas content clears.
Why is this? Shouldn't the code do the same thing?
Tested in Firefox, Chrome & Chromium
It's not the attribute that causes the problem, but the canvas you create by doing
container.innerHTML = canvas.outerHTML
is not the same canvas anymore, but an entirely new canvas element, which doesn't have any context initialized, and which will be fully transparent.
const canvas = document.createElement('canvas');
const output = document.getElementById('output');
output.append( canvas );
console.log(
'same canvas with append?',
document.querySelector('#output>canvas') === canvas
); // true
document.getElementById('output').innerHTML = canvas.outerHTML;
console.log(
'same canvas with innerHTML?',
document.querySelector('#output>canvas') === canvas
); // false
<div id="output"></div>
So if you want to keep the drawings of your canvas, you need to keep that same element in the DOM, and for this you need to append it.
Okay so I've successfully managed after a couple of hours to call over an image using HTML localStorage system but I now have one problem with the called over image.... I can't dictate where it goes..... It just sits at the bottom of the page as the code is purely javascript..... I've tried putting it in a div and changing its position but it won't budge any suggestions.... heres the code thats calling the image across:
window.onload = function() {
var picture = localStorage.getItem('img');
var image = document.createElement('img');
image.src = picture;
document.body.appendChild(image);
};
How can I edit the position on the page as well as the hight etc......................? Any help appreciated!
You're appending the image to the document body, so likewise, it's going to be added to the bottom of the page.
You can set the properties of image.style to change the image's CSS properties such as height (image.style.height) and width (image.style.width).
To position it elsewhere on the page, you can change it's display properties
image.style.position = "absolute"; //(for example)
image.style.top = "50px"; //drops the image down 50px from the top of the page
Or, you can add it to a different part of the DOM altogether:
document.getElementById('ID_OF_YOUR_DIV').appendChild(image);
Hope this helps.
I have an image and I want to draw on it. To do that, I use jQuery to hide the image:
$("img").hide();
And then I create a canvas and put it in the same div with id drawing in the html. I then set the background of the canvas to be the same as the img src for the image I hid. This makes it look like an image but now it is actually a canvas with the image as it's background. I do this by:
$('#drawing > canvas').css('background-image','url('+$(".image img").attr('src')+')');
context.canvas.width = $("img").width();
context.canvas.height = $("img").height();
The issue I am having is that sometimes, the image isn't displayed in the canvas and the canvas is not the size of the image. I think it's probably because of some loading issue. How can I wait for the canvas to have the image displayed in the background for sure? Thank you
Edit: Note that in the DOM, the canvas always has the right src. It just doesn't display it
Edit 2: Here's the JSfiddle. Here, everything seems fine but I have a lot more going on in my code including fetching stuff from the server so it's slower there. Hope this helps you guys to understand the problem: http://jsfiddle.net/wL3ezLke/2/
Thanks again
You need to use:
$(function(){
// Code executed once the DOM is loaded.
});
Official documentation:
https://api.jquery.com/ready/
If I understand correctly your problem is knowing when the image loaded (from what you describe it could be a lot of other problems though).
To test if an image has loaded it's pretty simple.
var $img = $('#hiddenImg');
if ($img[0].complete) doCanvasStuff();
else {
$img.on('load', function(e) {
var $canvas = $('#drawCanvas');
$canvas.css({width: $img.width(), height: $img.height()});
//you can go ahead with the background image, but this is preferable
var ctx = $canvas[0].getContext("2d");
ctx.drawImage(img,0,0);
}
}
This should make sure you canvas loads an image only after it was loaded, or do canvas stuff right away if image was loaded, fiddle
Change
$('#drawing > canvas').css('background-image','url('+$(".image img").attr('src')+')');
context.canvas.width = $("img").width();
context.canvas.height = $("img").height();
to
context.canvas.width = $("img").width();
context.canvas.height = $("img").height();
$('#drawing > canvas').css('background-image','url('+$(".image img").attr('src')+')');
so the height and width are set before the image goes into the background.
I'm learning canvas in html 5 and I want to manipulate an image in the canvas. However, I'm facing a roadblock in the first step itself. I am not able to display the image on the canvas.
Please look at this fiddle I created - http://jsfiddle.net/XsP76/
specifically, this is my javascript function.
$( document ).ready( function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("carice");
ctx.drawImage(img, 10, 10);
});
The image is displayed in the fiddle, in firefox but not in chrome. What is going going wrong. Thanks for the help!
Works fine here in Chrome / Canary.
I noticed you insert <body> tags in your fiddle; that makes double body tags as jsfiddle do this for you.
If you go to the source for that frame you will see:
...
</head>
<body>
<body>
....
Try this update:
http://jsfiddle.net/AbdiasSoftware/XsP76/2/
Does anyone know how to zoom-in/magnify an HTML Image Map in the same style as jQZoom?
I've tried using/adapting the jQZoom code but end up losing the Image Map links and just linking to the larger image.
Any ideas/help greatly appreciated, S.
You can try with Bezoom http://benjaminmock.de/bezoom-jquery-plugin/
Bezoom uses the img tag to apply the zoom, the the script seems pretty straightforward:
var img = $(this).find('img');
var imgSmallHeight = $(this).find('img').height();
var imgSmallWidth = $(this).find('img').width();
You could change these and some other thingies in the code to apply the effect to any other element such as a div. Is this what you are looking for?