html5-canvas

How to fix getImageData() error The canvas has been tainted by cross-origin data?

As others have said you are “tainting” the canvas by loading from a cross origins domain. https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image However, you may be able to prevent this by simply setting: img.crossOrigin = “Anonymous”; This only works if the remote server sets the following header appropriately: Access-Control-Allow-Origin “*” The Dropbox file chooser when using the “direct link” option … Read more

Resize image with javascript canvas (smoothly)

You can use down-stepping to achieve better results. Most browsers seem to use linear interpolation rather than bi-cubic when resizing images. (Update There has been added a quality property to the specs, imageSmoothingQuality which is currently available in Chrome only.) Unless one chooses no smoothing or nearest neighbor the browser will always interpolate the image … Read more

HTML5 Canvas Rotate Image

You can use canvas’ context.translate & context.rotate to do rotate your image Here’s a function to draw an image that is rotated by the specified degrees: function drawRotated(degrees){ context.clearRect(0,0,canvas.width,canvas.height); // save the unrotated context of the canvas so we can restore it later // the alternative is to untranslate & unrotate after drawing context.save(); // … Read more

JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

The github project JavaScript-Load-Image provides a complete solution to the EXIF orientation problem, correctly rotating/mirroring images for all 8 exif orientations. See the online demo of javascript exif orientation The image is drawn onto an HTML5 canvas. Its correct rendering is implemented in js/load-image-orientation.js through canvas operations. Hope this saves somebody else some time, and … Read more

how to draw smooth curve through N points using javascript HTML5 canvas?

The problem with joining subsequent sample points together with disjoint “curveTo” type functions, is that where the curves meet is not smooth. This is because the two curves share an end point but are influenced by completely disjoint control points. One solution is to “curve to” the midpoints between the next 2 subsequent sample points. … Read more

Resize HTML5 canvas to fit window

I believe I have found an elegant solution to this: JavaScript /* important! for alignment, you should make things * relative to the canvas’ current width/height. */ function draw() { var ctx = (a canvas context); ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; //…drawing code… } CSS html, body { width: 100%; height: 100%; margin: 0; … Read more

How to save a PNG image server-side, from a base64 data URI

You need to extract the base64 image data from that string, decode it and then you can save it to disk, you don’t need GD since it already is a png. $data=”data:image/png;base64,AAAFBfj42Pj4″; list($type, $data) = explode(‘;’, $data); list(, $data) = explode(‘,’, $data); $data = base64_decode($data); file_put_contents(‘/tmp/image.png’, $data); And as a one-liner: $data = base64_decode(preg_replace(‘#^data:image/\w+;base64,#i’, ”, … Read more