I am using a FileReader to populate my images.
// i.e. .... e.target.result
If i set an image element source like this:
pic_upload_area.src = some_image;
I can get its dimensions like this:
width = pic_upload_area.clientWidth;
And things work fine. However if I now reset it to a new image like this:
pic_upload_area.src = '';
pic_upload_area.src = new_image;
and once again get the image like this:
width = pic_upload_area.clientWidth;
I find that it still has the old image width, and the new image has been malformed to fit the old image's dimensions.
I find it strange that it works only on the first attempt. How can I get clientWidth to update when I update the .src attribute of the image?
The easiest way is to delete and recreate pic_upload_area. Once its dimensions are set, new image src will conform to the old dimensions.
Related
I have planned to generate image as canvas if we applied styles to div tag means how should we export that?
var Pic = document.getElementById("shirtDiv").toDataURL("image/png");
I have used above line for export image by div id. My div id is shirtDiv.
var Pic = document.getElementById("shirtDiv").toDataURL("image/png");
I need to download image in 1:1 ratio.
I guess your problem is when you change width and height properties. What i suggest you is to never modified those one. If you need to adjust canvas size to your view, use scale instead. This will make you able to always get the same image dimensions when exporting !
My web page has a canvas inside div. i need to print this div with canvas using javascript .
enter image description here
You need to convert your canvas to a normal image to achieve this.
Get the data URI containing a representation of the image using the canvas.toDataURL like this,
var canvasObj = document.getElementById("yourCanvasId");
var imgObj = canvasObj.toDataURL("image/png");
Then you can write the image object as,
document.write('<img src="'+imgObj+'"/>');
This will work fine while taking the printouts.
Hope this helps!.
You can html2Canvas it gives you a png of the visible part of your Website. You can try it via browser console.
Since it is impossible to specify an image-set using the src DOM attribute, I'm using -webkit-image-set to specify the image contents, like this:
<img id="imgTest" />
...
#imgTest {
background-image: -webkit-image-set(url(icon1x.jpg) 1x,url(icon2x.jpg) 2x);
}
The image content loads fine, depending on the device pixel ratio. Now, I need to dump the image into a canvas. Here's my code:
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
c.width = 20;
c.height = 20;
ctx.drawImage(document.getElementById("imgTest"), 0, 0);
// Let's see what we've got in the canvas.
var data = ctx.getImageData(0, 0, 2, 2).data;
At this point, data is a zero-filled array (and the actual image is clearly not empty). If I set the src attribute for #imgTest to e.g. icon2x.png, the data contents reflect the actual image.
Any idea if it is possible to dump contents of an image containing a -webkit-image-set into a cavas?
I'm not familiar with -webkit-image-set, nor your code, and couldn't recreate what you are suggesting. So ultimately, I have no idea.
Hoewever, I am familiar enough with HTML and javascript to guess that the image element either hasn't loaded yet, or has different data spaces for the background, and the actual image, and that drawImage() uses the actual image data. So I would suggest using the src property, and using and onload handler to draw the image when it, or the body has finished loading.
Another option would be to create a hidden image element with the src property set and use that data after it loads.
Can I know an image dpi (horizontal and vertical resolution) using javascript ?
You can use the EXIF parsing extension from Blueimp's Load Image library, https://github.com/blueimp/JavaScript-Load-Image#user-content-meta-data-parsing.
loadImage.parseMetaData(file, function(meta) {
if (!meta.exif) { return; }
var resX = meta.exif.get('XResolution');
var resY = meta.exif.get('YResolution');
});
There is also the exif-js library (https://github.com/jseidelin/exif-js), but I cannot vouch for how well it works (haven't used it).
I think DPI is not a property of an image. DPI is a measurement used when printing.
Anyhow... You can get width and height of an image with something like this:
var image = new Image();
image.src = "http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png";
//show width and height in alert-popup
alert("Width: "+image.width+", Height: "+image.height);
The img element is always same size as the image itself, if you do not specify width and/or height. That's why this should work :)
I have an image that has the same aspect ratio as the canvas but a different resolution. I know I can make use of the view size, view.viewSize, but my trouble is setting the dimensions of the image. I have tried setting the width using raster.width = 2000;, for example, but it does not seem to work.
This ended up working for me.
raster.size = paper.view.viewSize;
raster.position = paper.view.center;
Use raster.bounds instead
(for width)
raster.bounds.width = 2000;
or
(for height)
raster.bounds.height = 2000;
So, you right, you should be able to get canvas size with:
paper.view.viewSize
and assign the raster the proper with/height