CODEWITHSUNDEEP
javascripthtmlimage-processingcanvas
chazbot7
chazbot7

Reputation: 596

Bending a user-submitted image with HTML Canvas or Javascript? (or both?)

Basically, I have webpage that allows a user to preview what a label what look like on a tin. Achieved through z-indexs by putting a div within a png background image on top of another div where the user submitted image is shown. The image is previewed using the HTML 5 FileViewer API with some Javascript, so no uploading is necessary.

I want to use a cylindrical tin next, but having a flat image here will just look like crap. Is there a way to bend an image using Javascript or HTML Canvas? I'm fairly new to both, any help is extremely appreciated. Thanks!

Upvotes: 0

Views: 371

Answers (1)

markE
markE

Reputation: 105035

WebGL can texture a cylinder with material.

You could look at three.js

Here's example code (not mine):

http://www.skjapp.com/cylindergeometry-and-cone-example-using-webgl-three-js/#.UfsLN2l8OUk

And here's a demo (not mine):

http://www.skjapp.com/wp-content/uploads/2012/09/CylinderExample.html

Upvotes: 1

Related Questions