The new layout of YouTube added a background random-noise which I like very much, having seen almost exactely the same effect on other sites, so I plan to use the same technique in my webpage prototypes, or at least have this "trick" in my toolbox for future use.
The image is like this (taken from http://g.raphaeljs.com/barchart.html):
Now Youtube accomplishes the (embarrassingly identical) same effect by embedding the image in source code:
(on Youtube main page, right click background to display it, then right click the image and "display image properties" [ffox]):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJUAAACVCAAAAAB0....lotsofdata
I tried to discover where this line of code is in the source code, but due to the dynamic creation, I couldn't.
So, my question is:
"Is there a way to apply a tiled background to a page, using a png image generated algorithmically CLIENT-SIDE?" (preferrably with javascript)
I am very beginner in webdev and javascript, but I like to base my learning around defined problems to be solved, so this would be a nice way to learn something
Thanks for reading!
UPDATE:
For anyone interested in tile texture generation using javascript, I found this, which seems very interesting:
http://somethinghitme.com/projects/canvasterrain/
http://somethinghitme.com/projects/canvasterrain/js/canvasTerrain.js
To generate image client-side, I suggest you to have a look to HTML5 canvas element.
You can draw on a canvas with Javascript (even if the canvas element is hidden), and so generate anything you want (including a simple noise tile).
Resource to learn Canvas drawing : https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
After that, you can export your canvas as URL with the method toDataURL (a string like "data:image/png;base64....") which is interpreted by browsers like a traditionnal url for an image, so you can set it as css background for your body element.
Warning 1 : Canvas is supported by all modern browsers and you can emulate it on IE with ExplorerCanvas - but I don't know if ExplorerCanvas support .toDataURL()
Warning 2 : Canvas is resolution-dependant, so I suggest you to generate a little tile (32*32, or 64*64) and repeat it
Edit : An example of tiled background : http://jsfiddle.net/SfzPc/12/
Edit 2 : An completed example with a noisy background : http://jsfiddle.net/SfzPc/14/
You can use CSS to display this image:
#someimageselector {
background: white url('data:image/png;base64,iVBOR...lots of data') repeat scroll left top;
}
You can change the initial color of your background by editing the value white.
To set CSS with JavaScript, set the background property of an element:
document.getElementByID("someimageselector").background = 'white url(data:image/png....';
There are two jQuery plugin libraries that do exactly what you are looking for: NoiseGen and Noisy. Haven't used either yet but they both look pretty good.
NoiseGen
Project: http://primegap.net/2011/10/20/noisegen-generate-background-noise-with-jquery/
Demo: http://www.lucaongaro.eu/demos/noisegen/
Noisy
Project: https://github.com/DanielRapp/Noisy
Demo: http://rappdaniel.com/other/noisy-sample/
Fyi: Base64 is binary data represented as a string.
Most likely the original image still came out of Photoshop and was later encoded into Base64.
This technique helps having less http-requests per page view, as the actual image data can be saved and cached inside the css or html document.
Related
Is it possible to load images from bottom to top?
Assume that I have a long, very long image that needs 60 seconds to load. And the content is readable from bottom to top, can I do anything to make the browsers to load my image from bottom to top so users can read it while the image is loading?
Thank you,
This is a funny "AAAAAND ITS GONE" meme related to this question.
Thanks to all you guys who have answered my question, here are some solutions I have summary:
Solution 1: (Derek's answer)
Flip the image and then display it with -webkit-transform: scaleY(-1);
Demo: http://jsfiddle.net/Nk6VP/
Solution 2 (aloisdg's answer)
Use BMP format, this way browser will load the image "upwards" but BMP is not a good file type to save big images, but its still a good try since you doesn't need to flip the image at server-side.
Demo: http://jsfiddle.net/dfbPz/
(Please disable cache to see the loading in the demo)
In fact, you can. Just use BMP format. This format is stored from the bottom.
You can find a sample of image loading upward here. (You have to click on the button "Bitmap and .rle Images to display the sample.)
From the Bitmap file format at fileformat.info:
[Regarding file header structure] If Height is a positive number, then the image is a "bottom-up" bitmap with the origin in the lower-left corner. If Height is a negative number, then the image is a "top-down" bitmap with the origin in the upper-left corner.
You can find more info on this topic in SO or this one.
You can chop it up into slices in the server and load them separately. This is probably the only way to do this since you don't really have that much control over how contents are sent.
OR, just rotate the image in the server, load it normally, and display it with transform: rotate(-180deg).
I think technology like Spdy (which is a replacement) for Http makes such stuff possible..
And even Browsers like IE/Safari don't support it,
because of the fact, that it's an Google technology
Look at this demo:
https://www.youtube.com/watch?v=zN5MYf8FtN0&feature=youtube_gdata_player
around minute 38
And yes, you would also need to split your image up in multiple parts for this... Like suggested in another comment here
LIVE DEMO
<img src="perfect.jpg" style="background-image:url(imperfect.jpg);">
The huge image will slowly appear over the placeholder by magic!
A bit of CSS for that img like background-size might also come handy. You got the idea.
If your goal is to make your content readable by user when your image loaded, you can use jquery lazy load image plugin, here a demo http://www.appelsiini.net/projects/lazyload/enabled.html
and you still can use jpeg image which have smaller size than bmp
Here is an alternate way that is Backwards-Compatible with uncommon browsers. The flipside (aha) is increased page size and more prep work. You decide if the benefits outweigh the cons for your specific needs.
Step 1: Open the image in an image editor, flip it vertically, and upload it as a new file on your site.
Step 2: Code! Details below...
JSFiddle: http://jsfiddle.net/5uLZD/1/
Libraries: Modernizer, JQuery
HTML:
<!--Source below is the 'unflipped' image-->
<img src="http://i62.tinypic.com/wratsj.jpg" id="bottomtotop">
CSS:
.flipped {
transform: rotate(-180deg);
}
JS:
if (Modernizr.csstransforms) {
// Source below is the 'flipped' image.
$("#bottomtotop").attr('src', 'http://i60.tinypic.com/2qajqqr.jpg').addClass('flipped');
}
You can alleviate the size issue by simplifying the Javascript and getting away from the frameworks (i.e, use "document.getElementById('bottomtotop')" in place of "$('bottomtotop')" and so forth), but that will take a significant amount of time and work.
I'm curious if it's possible (either with canvas or with CSS) to place a mask over a JPG or PNG to make some part of it transparent. Specifically, I want to define a circle over the image, and for the pixels within that circle to stay opaque, but for all the other parts of the image to become transparent.
I'm Java this is a fairly straight forward operation, but I'm not finding any analog in Javascript and am wondering if this is simply not possible.
TIA
Just check this -webkit-mask tutorial from css tricks.
CSS
.circle-mask {
-webkit-mask-box-image: url(mask.png);
}
RESULT
Related links:
CSS3 -webkit-mask property.
Using an Image as a Mask
-webkit-mask-image
You can also use the mask tag from SVG, to actually place images of circles with different gradients, do tell if this helps?
You can use SVG filters to create something like a »blend mode«. You can use i.e. Inkscape to compose these effects. If you become familiar with the syntax you can create a lot of effects. Perhaps you can post an image of the desired effect, than it should be more easy to see what can be done. There are also some js libraries to make certain effects with images.
Here is what I like to do. Let's say I'm loading an image from example.com/test.png on browser and image is not saved on local server. Then, I like to detect blue color in the image and replace/mask the it with red color. In other words, colors appear differently when they load. Is this pratical using javascript, html, ...or any other way?
If image was local, we could use color detection codes and create new image with modified color. However, in real time image loading, the process seems different. I appreciate if anyone can direct me to any api, sample codes, readings,...
Thanks
You could look at CSS3 Filters - specifically the hue() property. Maybe not as precise as you're looking for though, taking a specific pixel hue and changing it conditionally.
Alternatively, you could load the image into a <canvas> tag where you can do whatever you want with it, although there are certain restrictions to consider.
i want to make a demo using html css javascript, and the idea is :
1.i want to make a editor liek a paper
2.you can write word on it like flash , the different from textarea is :
it can be writed on anywhere you clicked, and show the Cursor where you left click
3.it can be Paint simple Graphics like flash
so what can i do??
1.using div ?
2.using canvas ?
3.other
thanks
Use SVG/VML graphics.
Best way to do this is with a library such as Raphael or JSX Graph.
Hope you find what you want between these two libraries.
1 and 2 could be done without Canvas. You could simply catch the click event on the underlying element, and create a div (with contenteditable) or a textarea (nicely styled), to that position.
For number 3 it would be handiest to use the Canvas element.
It also depends on what level of support you need to give to "older" browsers. As you might know Canvas is not supported in IE8 (and lower).
It also depends on whether you want to do something with the final result. Canvas is a canvas, and you can only export it as bitmap image, not vector. You might want to chose SVG to keep the image in a Vector format.
I am working on a plan to build an online image editor with just some basic functions. It should (obviously) contain a canvas working area and support the following functions:
1. Upload an image from your computer or submit a link
2. Resize image (by dragging the corner)
3. Rotate and flip
4. Drag / move / pan
5. Layering (if more then one image is on the canvas, select vertical order)
6. And very important: it should be able to do some sort of background deletion using simple edge detection.
Images I am using are going to be mostly of fashion items so I want to be able to take off the background if its not white. For example automatically make this gray background, white:
Click for image - T-Shirt Black BG
I guess my best starting point is to grab some open source image editor and just use the parts of the code I need. My question is what will be better for me: Flash / Flex, or Javascript based editor. Each have some very nice implementations online, like Sumopaint, Aviary, and obviously Photoshop.net for Flash and some other good ones for JS.
Should I use Flash or go with a Javascript based solution? My gut feeling is towards JS with HTML5 coming around the corner.
Also if you recommend Javascript, can you please include your preferred framework for something like this??
Thanks!
Ajax version would have to use something on the server processing the images, like the GD Library or ImageMagick. With flash you/flex you could do the image processing on the client side, and with Flash Player 10 you can take advantage of Pixel Bender for image processing. I guess it depends on the size of your images. I would be interesting to see a benchmark on some big images, flash vs ajax/php.
Good question.