I've been working on a little page that will work just for doing photos from your webcam and making them downloadable. Everything was okey, I connected the webcam with a video element, and took "screenshot" of a frame and put it with the size I wanted in a canvas element.
The problem is that I wanted to make the photo and the video to look like if they were a mirror. For the video and the canvas element there was no problem, since this CSS code inverts the image perfectly:
-moz-transform: scaleX(-1); /* Firefox */
-o-transform: scaleX(-1); /* Opera */
-webkit-transform: scaleX(-1); /* Chrome y Safari */
transform: scaleX(-1); /* w3org */
filter: FlipH; /* Internet Explorer */
The problem is that when I convert the canvas to a .png file so the user can download it, the CSS rules set are not respected, so it looks weird that the image is the opposite that it was on video preview.
I can invert it with the same code on browser, but of course that won't change the file that user would download...
So, there's any way to make them to respect the CSS rules? Or at least to invert the image before I create it...?
Update:
The video I'm playing is took from webcam, you must hit that button that says "START VIDEO". Anyway, on fiddle the html stuff doesn't fit. And yes, the default camera icon on right will be replaced once the user takes the first picture. Once the video starts, there will be three rectangles, from the left the first will be the video preview, the second one is the canvas element and the last one is the image file generated. Everything was tested and working well under a LAMP local setup on Ubuntu 13 and Chromium browser.
Here is my Fiddle
P.D: This is my index.html
Related
I am currently watching a program tutorial on Youtube and the author of the videos does not have a dark theme set in his editor.
I usually use the Firefox addon DarkReader on all websites, which puts the websites into a darkmode.
But the addon does not work for videos.
That's why I'm looking for a possibility to put the videos, which are played by e.g. Youtube, into a darkmode.
Ideally would be a bookmarklet, which darkens the whole website and thereby also the video itself.
This is a bookmarklet that darkens the web page as a whole and leaves the buttons behind still clickable:
javascript: (function () {
var FilterOnTopDiv = document.createElement('div');
FilterOnTopDiv.setAttribute('style','width: 100%;
height:100%;
z-index:999999;
position:fixed;
left:0px;
top:0px;
background-color:#000;
opacity: 0.25;
pointer-events:none;');
document.body.appendChild(FilterOnTopDiv);
}());
The opacity is set to 0.25, that means when clicking on the bookmark several times, the web page is always 0.25 darker per click.
When reloading the web page, as usual with bookmarklets, everything is reset.
You can change the color of background-color to not only darken it, but also filter for other colors e.g. to filter out blue tones.
Tested on Firefox version 78.6.0esr(64-Bit).
I have a button and once clicked, video on webpage will be shown in full screen mode. It work perfectly fine.
I have a requirement when the video should be rotated by 270deg in full screen mode. In non full screen mode, the using style transform with rotate(270deg) is working fine. The same doesn't work in full screen mode.
Any way to achieve this? I am using chrome browser.
The images are really blurry if you use resize an image, for example showing a small image with resized dimensions, like;
<img src="largeimage.jpg" width=30 height=30 \>
Its not blurry in other browsers, but in Chrome, its so blurry.
I have looked at in www.twitter.com , their new design has lots of resized images and somehow, they have managed to clear blur in resized images. I have tried these;
image-rendering: crisp-edges;
image-rendering: pixelated;
But unfortunately, it doesn't solve the problem.
Below is a comparison. On the left, you can see that it is quite blurry, compared to that on the right:
What is the correct way to do that ?
Have you tried this? :)
filter: blur(0);
-webkit-filter: blur(0);
transform: translateZ(0);
-webkit-transform: translateZ(0);
I've noticed that Chrome does a better job when you resize an image at a certain percentage. For example, if you resize a 375px image to 100, it gets blurry, but if you resize 200 to 100, it does a better job because it's a nice even 50% scale.
Without an editable test environment, I'm not sure if that would fix it for you, but it's worth a shot.
I understand that this is an old post and things might have changed since then; thus, I am posting this for future readers who might come accross this question.
You could set image-rendering to pixelated, in order to preserve the original pixelated form. The below should work as expected on Chrome (and Opera) browser as well.
img {
image-rendering: pixelated;
}
As per the documentation:
pixelated
Using the nearest-neighbor algorithm, the image is scaled up to the next integer multiple that is greater than or equal to its original size, then scaled down to the target size, as for smooth. When scaling up to integer multiples of the original size, this will have the same effect as crisp-edges.
I've just had this issue in a WordPress gallery with six images using WEBP files. One image was sharp the others slightly blurry in Chrome etc. but ok in Firefox. I cropped the five to the exact size of the sharp image which was 1200 x 650px and replaced the 'blurry' ones in the gallery with the newly cropped versions. They are all displaying ok now.
Some crops just shaved as little as 4 pixels from the depth.
Currently I am using FireFox latest version and IE8
To change the orientation of printing , I used
#page {
size: portrait;
}
in my css file.
#page reference
Although it claims that the #page is supported in both browsers , after my testing it is not working at all besides Chrome. I would like to know how to print the page in different orientation in FireFox / IE8.
No application should depend on this feature to work cross browser right now because the CSS3 standard on page orientation for printing is still under implementation in most browsers.
For Google Chrome it works just fine: http://dev.activisual.net/test.html
Ultimately the decision of changing the orientation relays on the user during the printing process (even if it works), so you could simply let the users know that they should print the page in landscape or portrait, but in general there won´t ever by a way to prevent the users from changing the orientation while printing on desktop browsers.
Here is a bug report for FF reported very recently:
https://bugzilla.mozilla.org/show_bug.cgi?id=851441
You can read the accepted answer on this question for reference:
Landscape printing from HTML
As the MDN reference says:
You can only change the margins, orphans, widows, and page breaks of
the document. Attempts to change any other CSS properties will be
ignored.
As far as supplying you with markup that achieves what you want, that would be outside the bounds of what's allowed on SO. In addition, it could be a bit of work since you are wanting a two generation back version of IE to attempt to perform as well as a current generation Firefox.
Page printing layout is portrait by default, to change to landscape and see the difference try the below.
The the below css code is supported since version 19.0 , try it, it should solve your problem:
For IE8 you should use HTML5 directive in your html
<!doctype html>
Css code :
#media print{#page {size: landscape}}
Firefox: https://developer.mozilla.org/en-US/docs/Mozilla_CSS_support_chart
IE http://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx
It's weird that this
{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
doesn't work for you for the latest version of Firefox as i tested it myself and works fine.
If you can't find anything have a look here even though this isn't exactly the right portrait mode (for printing) but you might get some ideas.
Lastly if you get desperate and u really need to find a way to do this, you can always take a screenshot of the web page with for example html2canvas rotate the image and then print the image instead of the webpage...
Not an ideal solution but this way you bypass the browser.
I ran into this issue a little wile ago while making a simple form.
Chrome does seem to be the best browser for limiting a users control over the printing process. However it is still limited, and Firefox/other browsers don't support #page.
My solution was to add a #media print to the style sheet to "encourage" the user to print the page in portrait. The #page is just for chrome. display: none; on the header, nav, and footer gets rid of the unwanted browser additions (this only works in chrome and firefox, in ie you still have to select no headers) I have a border:0; on input fields, because it was for a form...
Finally I put a width and height on the container div, similar to the size of a standard 8.5 x 11 piece of paper. So it would fit the page nicely.
#media print{
#page {size: auto; margin: auto;}
header nav, footer {display: none;}
input {border: 0px;}
#container {width:9.1in; height:10in;}
}
Ultimately webpage printing is still very browser/user dependent, and there really isn't much that can be done about it. Making #media print helps, but really the only way to get the page to print exactly as you want would be to generate a pdf version of the page that the user could export.
Just go to file, click on page setup and change the orientation. This works for me
I'd like to rotate a text by 90 degrees counter-clockwise. Firefox and Chrome are no problem, using:
-webkit-transform-origin: top left;
-webkit-transform: rotate(-90deg);
-moz-transform-origin: top left;
-moz-transform: rotate(-90deg);
For Internet Explorer, it should be this line, as far as I know:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
(The other method, writing-mode, can only rotate text clockwise 90 degrees).
However, in IE the rotated text looks like a badly scaled image on its side (comparison below).
Firefox / Chrome -- vs -- Internet Explorer:
Is there any way that Internet Explorer can rotate the text in a more elegant way (possibly Javascript/jQuery)? I've been Googling, but I can only find more references to this method...
It is Def the text rendering engine in IE; however, it's doable.
filter: requires the element to have layout (ie. zoom). You can beat the rendering problem (most of the time), by giving the element a background color. Try the following on your example:
zoom:1;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
background-color:white;
The RenderEngine of IE is awful... I would try to work with background images. Maybe a Font Replacement like Cufon would do a better Job. Cufon generates Images of your Text. Works good in IE as far as i know.
I would suggest either Google Fonts API or Cufon (as #swishmiller said), or disabling Anti-Aliasing (ClearType) in IE so the fonts always look unsmoothed (is that a word)?
Google Font API: http://code.google.com/webfonts
Cufon: http://cufon.shoqolate.com/generate/
Disable ClearType:
/* This will force IE into thinking there is a filter actually doing something, so it'll disable ClearType */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
[edit] I should mention that I've not tried the Google Font API fix...
Try -ms-writing-mode property:
http://msdn.microsoft.com/en-in/library/ie/ms531187%28v=vs.85%29.aspx