I am trying to show a diagram of products with the image to scale. I have the image element sized with a width and min-width set to the correct width for the image.
I have an 'resize' event listener triggering my zoom on the image element to equal a correction factor:
const ratio = (window.innerWidth / window.outerWidth)
This works acceptably except when the browser vertical sidebar is open.
I searched here and could not find a property to show me sidebar width or to accurately detect zoom level in all browsers. I can use window.devicePixelRatio but that is not working in mac safari.
Would a canvas or svg element offer me some opportunities here i don't see?
Perhaps the best is just to have a input type='range' element next to the image to allow calibration to common object such as a credit card or coin.
Am I mistaken in thinking that if my picture is correct at 600px on my machine that it can be rendered universally in the browser with css width settings?
Thanks alot for any reflections
Related
I have a graph rendered as SVG by Angular in a web page. The size of the SVG is dynamic, with its width being 100% of its container. I'd like to be able to scroll (and eventually zoom) the SVG's viewport. I'm not talking about the browser scrolling, but rather manually implemented scrolling by dragging on the background of the SVG.
I know I can use viewBox to do this, and changing the first two numbers works well, but the problem is that the second two numbers need to match the CSS width and height to be at 100% zoom. How do I work around this? Do I constantly need to update viewBox in response to the container size changing (e.g. when the browser window changes size) so it matches the CSS size?
There are many similar questions on here, but none that I can see are about this specific issue.
Update: I think I solved the first part of the problem using:
<svg #svg attr.viewBox="{{-scrollX}} {{-scrollY}} {{svg.clientWidth}} {{svg.clientHeight}}">
But I'm a little suspicious of its efficiency.
I still need to figure out how MouseEvent coordinates interact with this to be able to update my scrollX and scrollY, as well as how to make the SVG grow bigger as it needs to (but not bigger on the screen).
We are developing a responsive site where we allow a user to upload images.
We preserve the original and then generate a thumbnail image to be served to users with lower resolutions.
The issue that has been raised is that when the image is switched in the logic for the smaller screen size there is a visible re-flow of the elements around it.
I am unsure how to prevent this as the images are of inconsistent height so cannot set an initial height on the containing element.
Any ideas would be appreciated.
I looked at this:
http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/
But it seems to be only for scenarios where we know the ratio i.e. 16:9, 4:3 etc
I assume your thumbnails have a fixed maximum size.
You can put your image inside a box with the maximum height/width set so the orientations (landscape, portrait, square) doesn't matter. This would give you fixed whitespace around your image.
You can also generate this whitespace in the thumbnail giving you a fixed width/height in all your images.
I am reading a w3c specification and trying to understand the difference between the canvas and the viewport.
They say:
The canvas is the space where the formatting structure is rendered.
And at the same time they say:
Viewport is a window or other viewing area on the screen
These two definitions don't clarify what is the canvas and what is the viewport. Can anyone give a clear or explanatory definition of those?
The viewport is the visible box between the inner borders of your browser;
The canvas is the box containing the whole document. A part of the canvas may be invisible if it does not fit in the viewport.
In other words:
The viewport is the allocated area on the screen for displaying the web page. This box is of a fixed size, and can only be changed when the user resizes the window.
The canvas can be bigger than the viewport. In this case, scrollbars may appear.
I've just started working with the html5 canvas element.
I'm using the latest firefox and chromium browsers. And so far, they're
responding alike.
What I'm trying to achieve is scaling of an image without having to
specify the canvas or image drawing sizes. I'd like the canvas to fill
the browser window, and for the image to fill the canvas without
specifying any sizes. And to readjust canvas and its image on the
fly when the user adjusts the browser's frame.
The mansion pic that I'm testing with is 4284x2844.
I've managed to achieve dynamic scaling, but there's a problem...
if I don't specify sizes the image becomes blurry.
This is my first stackoverflow question and I haven't conquered the
formatting. So, please take a look at the small amount of code over
at pastebin:
http://pastebin.com/88faqJUx
Thank you for your help.
I found the solution...
Adding two lines, with no other changes, did the trick, though at this point I'm not exactly sure
why it was originally failing, but thoroughly happy to move on...
<canvas id="taba_main_canvas">
Your browser does not support the canvas element.
</ canvas>
<script type="text/javascript">
var main_canvas=document.getElementById("taba_main_canvas");
var cxt=main_canvas.getContext("2d");
// adding these next two lines solved the blurriness issues
//Set the canvas width to the same as the browser
main_canvas.width = window.innerWidth;
main_canvas.height = window.innerHeight;
var img=new Image();
<!-- mansion pic 4284x2844 -->
img.src="images/mansion_3344.png";
img.onload = function()
{
<!-- use the graphics full size and scale the canvas in css -->
cxt.drawImage(img,0,0,main_canvas.width,main_canvas.height);
}
</script>
Just one tiny little problem, the vertical size of the image is apparently just a few lines taller
than the canvas and so I get a vertival scrollbar. Dragging the browser window taller, which normally
would eliminate the vertical scrollbar has no effect. I've tried manipulating the canvas or image height
in the code, but that didn't change anything.
Still, having the image look clean is a big win. I'm moving on for the moment and will revisit this
later.
The other way to do this is to latch on to the document onresize event and resize the canvas by using window.innerWidth and window.innerHeight or some such thing. I've used it that way myself, but that was for something which I didn't care about IE support - see W3C DOM Compatibility - CSS Object Model View at quirksmode for info about browser support. Note also that the scrollbar width is included in innerWidth and innerHeight; if your page may need scrolling, you may wish to do something like subtract 20 and pad the containing element with a suitable background colour.
I presume that you're not just trying to draw an image - if you were just doing that, <img> would be a much better match.
Edit: jQuery has $(document).width(); and $(document).height(); which seem to get the right figures. Another edit: actually they're wrong; they're the document width and height, not viewport width and height, so I think innerWidth and innerHeight may be all there is.
Having trouble scaling with . It seems to make sense to code up a drawing in canvas to a fixed size (ie 800x600) then scale it for specific locations - but sizing occurs in 4 places: 1) in the context definition (ie ctx.width = 800 2) with ctx.scale; 3) in html with
I can scale it with ctx.scale(0.25,0.25) and use but this doesn't appear right - it seems to want the scale to be proportional.
css sizing simply makes it fuzzy so not a good way to go. Any ideas?
Actually, you can resize a canvas using stylesheets. The results may vary across browsers as HTML5 is still in the process of being finalized.
There is no width or height property for a drawing context, only for canvas. A context's scale is used to resize the unit step size in x or y dimensions and it doesn't have to be proportional. For example,
context.scale(5, 1);
changes the x unit size to 5, and y's to 1. If we draw a 30x30 square now, it will actually come out to be 150x30 as x has been scaled 5 times while y remains the same. If you want the logo to be larger, increase the context scale before drawing your logo.
Mozilla has a good tutorial on scaling and transformations in general.
Edit: In response to your comment, the logo's size and canvas dimensions will determine what should be the scaling factor for enlarging the image. If the logo is 100x100 px in size and the canvas is 800x600, then you are limited by canvas height (600) as its smaller. So the maximum scaling that you can do without clipping part of the logo outside canvas will be 600/100 = 6
context.scale(6, 6)
These numbers will vary and you can do your own calculations to find the optimal size.
You could convert the logo to svg and let the browser do the scaling for you, with or without adding css mediaqueries.
Check out Andreas Bovens' presentation and examples.
You can resize the image when you draw it
imageobject=new Image();
imageobject.src="imagefile";
imageobject.onload=function(){
context.drawImage(imageobject,0,0,imageobject.width,imageobject.height,0,0,800,600);
}
The last 2 arguments are the width an height to resize the image
http://www.w3.org/TR/html5/the-canvas-element.html#dom-context-2d-drawimage
If you set the element.style.width and element.style.height attributes (assuming element is a canvas element) you are stretching the contents of the canvas. If you set the element.width and element.height you are resizing the canvas itself not the content. The ctx.scale is for dynamic resizing whenever you drawing something with javascript and gives you the same stretching effect as element.style.