Posts

Showing posts with the label canvas

100% Client Side Image Resizing

... I know, I have said " Happy Holidays " already, but yesterday, after a (annoying) picture upload in Facebook , I had a an idea ... why on earth I should have a Java plugin to perform images resizes on Facebook? Why on earth if I don't have such plugin I have to wait the possibly extremely long upload, up to 10x slower for high quality images, stressing Facebook servers for such " simple " operation as an image resize/resample could be? The FileReader Interface In the W3C File API , I guess part of the HTML5 buzzword, we can find all we need to perform the operation we want totally on client side. The interface is called FileReader , and it provides functionalities to read chosen files from an input node with type file, and that's it: we can even disconnect from the network and keep resizing and saving images without problems . The Canvas Trick Still into HTML5 buzzword world, the canvas element and it's 2dContext.drawImage method is the key to perfo...

ellipse and circle for canvas 2d context

These days I am working inside an ExtJS panel to create some sophisticated drawing stuff, and I discovered (too late ...) that there is almost nothing in canvas 2d context to draw circle or ellipse. That's why I have extended Google excanvas library and/or native canvas 2d context prototype to let us create circles and ellipse in the same simple way we can create rectangles. Here the extended proto: (function(){ // Andrea Giammarchi - Mit Style License var extend = { // Circle methods circle:function(aX, aY, aDiameter){ this.ellipse(aX, aY, aDiameter, aDiameter); }, fillCircle:function(aX, aY, aDiameter){ this.beginPath(); this.circle(aX, aY, aDiameter); this.fill(); }, strokeCircle:function(aX, aY, aDiameter){ this.beginPath(); this.circle(aX, aY, aDiameter); this.stroke(); }, // Ellipse methods ellipse:function(aX, aY, aWidth, aHeight){ var hB = (aWidth / 2) * .5522848, ...