StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It sounds like you're trying to do two things:</p> <ol> <li>Display a user-selected photo on the client side (before it goes to the server).</li> <li>Transform that image so it appears in the correct position on a cake.</li> </ol> <p>Both of these functions traditionally fall in the domain of backend processing, but thanks to the HTML5 and CSS3 draft standards, they are available in at least Chrome and Firefox. The below solutions aren't universal and you <strong>will</strong> have to fall back to a server based solution for non-supporting browsers, but it's worth mentioning:</p> <p><strong>Displaying a user-selected image</strong></p> <p>When a user selects a file from <code><input type=file></code>, it dispatches a <code>change</code> event. When this occurs, the DOM object has a <code>FileList</code> property called <code>files</code> allowing you to read the contents of these files. <code>URL.createObjectURL</code> lets you convert the file into a URL you can use for an image source:</p> <pre><code>input.addEventListener('change', function () { preview.src = URL.createObjectURL(this.files[0]); }); preview.addEventListener('load', function () { URL.revokeObjectURL(this.src); }); </code></pre> <p>See <a href="http://jsfiddle.net/bnickel/yP7Bb/" rel="nofollow">http://jsfiddle.net/bnickel/yP7Bb/</a> for a demo.</p> <p><strong>Transforming to look like a cake top</strong></p> <p>CSS3 3d transforms make it possible to transform a surface to look 3D. I've experimented and found the following very convincing. The 0.7 compresses it vertically and the -0.008 is a rotation to add perspective.</p> <pre><code>-webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.7, 0, -0.008, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 0.7, 0, -0.008, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 0.7, 0, -0.008, 0, 0, 1, 0, 0, 0, 0, 1); </code></pre> <p>You can play with values here: <a href="http://jsfiddle.net/bnickel/v9Jat/" rel="nofollow">http://jsfiddle.net/bnickel/v9Jat/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload