flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 02:10:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

documented a chrome rendering bug...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-12-17 07:13:13 +04:00
parent 24a357477a
commit 71186e3c7e
3 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ui/experiments/editor.html
View File

@ -70,5 +70,30 @@ $(function(){
<body>
<img id="image" src="image.jpg" >
<p>click image to show editor panel and <a href="javascript:toggleThemes()">here</a> to toggle theme...</p>
<!--br>
<hr>
<br>
<p>
Same image, first scaled (transform: scale(2)) then resized
(height=600) and invert filter applied.<br>
The result shows that resizing does not degrade the quality
as much.<br><br>
#3 the effect is exagurated by first resizing by 2 and then
scaling by 4...
</p>
<img src="image.jpg" style="-webkit-transform: scale(2); -webkit-filter: invert(1)">
<img src="image.jpg" height="600" style="-webkit-filter: invert(1)">
<img src="image.jpg" height="150" style="-webkit-transform: scale(4); -webkit-filter: invert(1)">
<hr>
<img src="image.jpg" style="-webkit-transform: scale(2)">
<img src="image.jpg" height="600">
<img src="image.jpg" height="150" style="-webkit-transform: scale(4)"-->
</body>
</html>

BIN
ui/experiments/img-100px.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

34
ui/experiments/scaling-n-sizing.html Executable file
View File

@ -0,0 +1,34 @@
<html>
<style>
div {
margin: 50px;
}
div:first-child {
margin-bottom: 50px;
}
.css-size {
height: 200px;
}
</style>
<body>
<div>
<!-- these will produce quite different quality results -->
<img src="img-100px.jpg" style="-webkit-transform: scale(2); -webkit-filter: invert(1)">
<img src="img-100px.jpg" height="200" style="-webkit-filter: invert(1)">
<img src="img-100px.jpg" class="css-size" style="-webkit-filter: invert(1)">
<img src="img-100px.jpg" height="50" style="-webkit-transform: scale(4); -webkit-filter: invert(1)">
</div>
<div>
<!-- these will produce virtually identical results -->
<img src="img-100px.jpg" style="-webkit-transform: scale(2)">
<img src="img-100px.jpg" height="200" style="-webkit-transform: scale(1)">
<img src="img-100px.jpg" class="css-size" style="-webkit-transform: scale(1)">
<img src="img-100px.jpg" height="50" style="-webkit-transform: scale(4)">
</div>
</body>
</html>