If I set the CSS position attributes of an image element to floating points via javascript, Firefox renders it nicely, but other browsers do not. Can I get sub pixel positioning to work with other browsers? I like to seamlessly zoom in on an image, without jittering due to my values getting rounded off. For example, it seems like 2.217px; becomes '2px;' in all browsers except for Firefox. This happens with setting the value via style.top or via style.webkit-transform: translate(x, y).
In the end, I've managed this by drawing the image on the HTML5 canvas element.
Related
i have a panel that should be drawn floating over the normal html page.
This object is dynamically created on DOMloaded event and scaled to fit current screen resolution depending on the zoom level of page.
In order to obtain that we have to scale the element, because we fix the width and height.
The scale amount in not mobile friendly website is always bigger than 1. It seems to work in all browsers except for Safari mobile, in which the floating panel is blurry.
How can i solve this problem?
It is the device, not the browser. iPhones have retina displays, which, in plain words, means that the pixels are doubled. Fonts, borders and other CSS styles scale up fine, but images are stretched, that's the reason your image appears blurred.
The simplest way to fix this is to use a bigger image
Of course this has the drawback that well... you will be using a bigger image for all devices/browsers even if you don't need one. Of course, there are many other ways to handle this.
Here is a place to start:
https://www.smashingmagazine.com/2012/08/towards-retina-web/
http://www.mightybytes.com/blog/make-retina-images-website/
I present to you, dear reader, a vexing bug that I cannot reproduce locally. However, I have gotten many reports from end-users, which seem to be increasing in frequency.
If you are an advanced user of <canvas> elements in Chrome, please continue reading, as I am completely baffled.
I use <canvas> elements to render full-size iPhone and iPad screenshots. I have a method that renders the canvas, which looks something like:
set the size of the canvas to iPhone resolution (640x1136) — possibly important: this canvas might have been rendered at a smaller resolution before
fill with background color (0, 0, width, height)
draw text at the top
draw an image of a phone in the middle of the bottom
draw a screenshot image on top of that phone image
call toDataURL() on the canvas to extract the image as a JPEG
Recently, after months of nobody reporting any problems, we've had several reports from different people reporting exported images being "messed up".
The images they send us are the correct size, BUT rather than the images containing the canvas area at (0, 0, width, height), the resulting images seem to contain the image data from (0, height, width, height) — offset by the height of the canvas and then flipped vertically for some reason.
Here is what this looks like:
As shown in this image, the content of the <canvas> element itself is seemingly not in the end-result image generated by toDataURL(); rather, the end-result image seems to contain the flipped image data from below the actual area of the <canvas>.
Important debugging information:
There are no calls to setTransform(), scale() or translate() anywhere in my code
These canvas elements are not visible to the end-user
This does not seem to affect Safari
I have users reporting the same output in Chrome incognito windows, so it is probably not the result of an extension
The code seems to be rendering the images in the correct locations on the canvas — the screenshot and phone appear in the correct place, and the background color is not present (since it is only drawn to 0, 0, width, height and not beyond)
Reports seem to be increasing in frequency, but still probably only 5-10% of Chrome end-users
Any ideas as to a root cause?
UPDATE: I have fixed the issue through trial and error. In the original implementation, I borrowed a "preview" low-resolution canvas to render the full-resolution image before calling toDataURL — my fix created a new canvas at the new size for the final rendering, rather than reusing the lower-resolution original canvas.
I'd still love to know the original cause. I think it has something to do with resizing <canvas> elements in code before calling drawImage() or something, but I can't reproduce it in order to investigate further.
My understanding is that CTRL-mousewheel zooms are an accessibility feature, built into the browser in question (I am currently testing in Chrome and Opera, both if which use the CTRL- zoom).
This won't ever really be needed for accessibility, however, as the app will not be for the general public. And CTRL-wheel zoom has a nice benefit out-of-box as compared with standard mousewheel zoom over elements: It seems that Angular ui-sortables work perfectly at any zoom/scale.
Unfortunately, from other answers I've found on SO, there is no way, when using CTRL-wheel, to zoom selectively : the browser can only zoom everything. For me, this includes position:fixed overlays scaling at the same time as the main viewport, which is no good.
So I set up some code for scrolling as per whichever element the mouse cursor is over, eg. scale the main viewport using the mousewheel, only if the mouse if over that viewport element.
The problem is that ui-sortable does not behave correctly, when using it for only a single element. I've used scale with transform-origin set at 50% 50% but still, when I drag the ui-sortables at any scale other than 1:1, they appear way off to the left. Any ideas on how to begin to tackle this?
This isn't a problem in Angular's sortable adaptation, rather it's an issue in the underlying jQuery-ui 1.9.2 positioning functions around line 4000 (_generatePosition or maybe one of the others). I believe that as the browser does not modify the actual dimension values during scale or zoom, and the formulae provided in that library do not account for scaling (that I can see), there is no easy fix, since jQuery ui.sortable needs scale-accurate values to calculate correct displacements. (I tried modifying the formula to account for this, but without success.)
The simplest workaround for the present is to manually change the width() / height() of your individual list elements, as seen here. This may require being selective about just what you scale using width() / height(), and what you change using scale (which is generally easier).
I've slogged my way through implementing excanvas on ie8. I've got the dynamic element bit sorted, the initially-hidden elements are now happily rendering throughout most of the app, and just when all seemed to be well I've hit another roadblock.
The vml items rendered inside the div that excanvas generates are all offset by a large amount.
I only discovered what was happening by setting overflow:visible on all children of canvas, which caused the offset vml to become visible.
I've got a screenshot of the offending articles; the area in blue is the generated div in the correct position, and the items bordered in red should be within the blue area.
Has anyone encountered this before, and even better, been able to solve it?
Cheers!
In case anyone ever encounters this error, it seems the issue was with a translate() call. Although I was using save and restore, and every standard implementation of canvas interpreted the translate call as I intended, in excanvas the translate was persistently additive.
I solved the issue by restoring the identity matrix before performing the other save, translate & restore calls.
context.setTransform(1,0,0,1,0,0);
HI, Is there a way by which I can rotate an image inside a div clockwise or anticlockwise.
I have a main fixed width div[overflow set to hidden] with images loaded from database. There is a scroll bar for showing the images inside the div. When image is clicked then I need to show the rotating animation either in clockwise or anticlockwise direction.
I have done it using Matrix filter. I would like to know whether it is possible to be done in IE only without using any filters.
try this: http://raphaeljs.com/image-rotation.html
uses canvas but also supports IE
If you're using jQuery, jQueryRotate is a small (less than 3Kb minified+gzipped) plugin that rotates images:
http://jqueryrotate.com/
The only way I can think of for rotating images on the client-side in IE is using filters. For somewhat recent versions the other browsers you can use the <canvas> control.
Your alternative is to use a server-side script to rotate the image. Then you can send the information on how to rotate it with JavaScript (i.e. generate a path to the image such as /rotate?image=img.jpg&amount=90)
CSS3 supports rotation, but it isn't widely supported.
As you asked for JavaScript solution, here's one, but I don't think you can get smooth images.
There is other way to rotate images without any filters / html5.. it's nasty and useless in real world, but possible.
You can store your image as array of pixels, for javascript. Write function to perform rotation with it and encode it to base64 datauri, bmp could be easy and replace image.src with it.
There will be some limitation about filesize and support in old browser and of course terrible performance..