Tilt-Shift photo effect in Canvas — OZONE Asylum, home of the Mad Scientists

DHTML/Javascript

Tilt-Shift photo effect in Canvas

This page's ID: 30755

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	uh oh, the script got screwed up above it's calling [numbers] some other name. I'll wrap it in code tags. sorry. [code] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML lang="en"> <HEAD> <TITLE>HTML</title> <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META name="Content-Script-Type" content="text/javascript"> <META name="Content-Style-Type" content="text/css"> <STYLE type="text/css"> <!-- BODY {margin: 0;padding: 0;background-color: #000;color: #FFF;font-family: arial;font-size: 10pt;line-height: 200%;} CANVAS {background-color: #FFF;} --> </STYLE> <SCRIPT type="text/javascript"> <!-- const Refinement=1//sets size of slices less for better refinement const x=100 const y=200 var pic=new Image(); pic.src="http://www.ozoneasylum.com/images/layouts/ozoneasylum/logos/default.jpg" CanvasRenderingContext2D.prototype.skew=function(src, co){ this.save();var height=src.height;var width=src.width;var cr8ctx=document.createElement('CANVAS').getContext('2d'); var leftSpace=Math.min(co[0][0], co[2][0]);//topleftX or bottmleftX return smallest var totalWidth=Math.max(co[1][0], co[3][0])-leftSpace;// top right or bottom right return biggest - smallest cr8ctx.canvas.setAttribute('width', totalWidth);//biggest-smallest cr8ctx.canvas.setAttribute('height', height);// actual image height if (co[2][0]<co[0][0]) cr8ctx.translate(co[0][0]-co[2][0], 0);// if BL<TL translate(TL-BL,0) var topWidth=co[1][0]-co[0][0];//TR-TL var botWidth=co[3][0]-co[2][0];//BR-BL var leftChange=co[2][0]-co[0][0];//BL-TL for (var i=0; i<height; i+=Refinement) cr8ctx.drawImage(src, 0, i, width, Refinement, leftChangei/height, i, Math.abs((topWidth(height-i)+botWidthi)/height), Refinement); var leftTop=co[0][1]-(co[1][1]-co[0][1])(co[0][0]-leftSpace)/(co[1][0]-co[0][0]); var rightTop=co[1][1]+(co[1][1]-co[0][1])(leftSpace+totalWidth-co[1][0])/(co[1][0]-co[0][0]); var leftBot=co[2][1]-(co[3][1]-co[2][1])(co[2][0]-leftSpace)/(co[3][0]-co[2][0])-leftTop; var rightBot=co[3][1]+(co[3][1]-co[2][1])(leftSpace+totalWidth-co[3][0])/(co[3][0]-co[2][0])-rightTop; for (var i=0; i<totalWidth; i+=Refinement) this.drawImage(cr8ctx.canvas, i, 0, Refinement, height, leftSpace+i, (leftTop(totalWidth-i)+rightTopi)/totalWidth, Refinement, (leftBot(totalWidth-i)+rightBoti)/totalWidth); this.restore(); } function skewpic(dot){ var canvas=document.getElementById('canvas').getContext('2d'); for (var i=0; i<4; i++) {canvas.skew(pic, dot);} } // //Number.prototype.sqr=function(){return thisthis}; \|0 [0][0]=p0x 1 [1][0]=p1x // topleft topright bottomleft bottomright \| [0][1]=p0y [1][1]=p1y //THIS SCRIPT ADAPTED FROM BEN JOFFES'S CANVAS SKEW. PLEASE RETAIN THIS NOTICE. THANK(YOU) //var dot=[[30,30],[380,100],[130,280],[180,80]]; \|2 [2][0]=p2x 3 [3][0]=p3x // \| [2][1]=p2x [3][1]=p3x //--> </SCRIPT> </HEAD> <BODY onload="skewpic([[30,240],[440,180],[200,460],[540,260]])"> <CANVAS id="canvas" width="800" height="500"></CANVAS><BR> <B>Canvas Skew</B> <a href="javascript:skewpic([[30,70],[380,10],[200,460],[280,180]])">hey</a> </BODY> </HTML> [/code] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu