Guymon » canvas

Bildeffekte mit Canvas

admin — Fri, 23 Dec 2011 12:59:50 +0000

Zwei interessante Canvas Bibliotheken sind mir heute über den Weg gelaufen. Da ist zum einen PaintbrushJS

PaintbrushJS is a lightweight, browser-based image processing library that can apply various visual filters to images within a web page.

You use it by applying a class to an element on the page and setting a few parameters with some extra HTML attributes. If the element is an img or it has a background-image set in your CSS, PaintbrushJS will create a temporary canvas element and manipulate the image there, before finally saving it back out to the original element.

und zum anderen CamanJS

The main focus of CamanJS is manipulating images using the HTML5 canvas and Javascript. It’s a combination of a simple-to-use interface with advanced and efficient image/canvas editing techniques. It is also completely library independent and can be safely used next to jQuery, YUI, Scriptaculous, MooTools, etc.

CamanJS is very easy to extend with new filters and plugins, and it comes with a wide array of image editing functionality, which is only growing as the community makes more plugins. It has a powerful layering system, much like the one present in Photoshop and GIMP, that makes the sky the limit for your creativity.

Possibly related posts (automatically generated)

Optimize Images with Canvas

admin — Thu, 01 Sep 2011 09:37:44 +0000

Ein interessanter Artikel im smashingmagazine beschäftigt sich mit der Möglichkeit einige Bildmanipulationen clientseitig auszuführen um Bildgrößen gering zu halten.

Da man über das Canvas Element auf jedes Pixel eines Bildes zugreifen kann lassen sich einige nette Sachen machen.

Sehr nett, allerdings sollte man sich die Warnung zu Herzen nehmen:

But use this technique wisely. Putting many unoptimized image generators on a single page could cause the browser to hang for a few seconds. You shouldn’t use this technique if you don’t really understand how it works or know what you’re doing. Always prioritize performance ahead of cool technology.

Possibly related posts (automatically generated)

Cavas Links

admin — Fri, 12 Aug 2011 09:11:44 +0000

Das .net Magazine erklärt wie man einen Page Flip Effect mit Canvas nachbaut.

This tutorial will take you through the process of creating your own page flip effect using the canvas element and plenty of JavaScript. Some of the rudimentary code, such as variable declarations and event listener subscription, has been left out of the snippets in this article, so remember to reference the tutorials files for the complete code.

Der Effekt ist nett, aber ich finde immer noch, dass man dafür zuviel Code schreiben muss. Trotzdem noch ein Canvas Link: Paper.js.

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

Possibly related posts (automatically generated)

Shutter Effect for Photos

admin — Wed, 09 Mar 2011 08:51:15 +0000

Einen sehr schicken Foto Effekt demonstriert Martin Angelov .

In today’s tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.

Sehr cooler Effekt.

Possibly related posts (automatically generated)

daily links

admin — Sun, 06 Feb 2011 16:55:16 +0000

Olark | Features
Chat with visitors on your website from your desktop, your laptop, your iPhone, or your Blackberry. We work with standard chat (IM) clients (like iChat, Pidgin, and Meebo) and services (Google Talk and Jabber) which means YOU get to decide what software to use.
HTML5 Canvas Graphing Solutions Every Web Developers Must Know | Web Designer Aid
For today’s post we’ve collected amazing library, demos and experiments that uses HTML5 canvas element that produces a charting and graphing solutions. We also added links for further readings and a step by step HTML5 tutorials on creating charts and graphs.
atMonitor
atMonitor is the most advanced monitoring tool for Mac OS X that displays system activity in real-time. It is designed to allow quick assessment of computer’s state and it is powerful enough to make it a core utility in anyone’s system troubleshooting toolkit.

Possibly related posts (automatically generated)

daily links

admin — Wed, 02 Feb 2011 19:01:03 +0000

HTML5 Grayscale Image Hover
Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. I’ve put together a demo to show you how to use HTML5 & jQuery to dynamically clone color images into grayscale
Taxonomy Additions | drupal.org
_Adds a delete link in the vocabulary terms list
_Adds an option to not allow duplicate terms in a vocabulary
_Views integration - provides a Views argument handler which adds the capabality of showing the results of related terms’ nodes (e.g. If you have a view list for the term "Drupal", and that term is related to "Drupal core", nodes that are tagged with "Drupal core" will also show up in that view)
Fancy Insert | drupal.org
This module allows users to easily insert images into node posts. When nodes contains a lot of images is very difficult to insert them into the node body.
Fancy insert convert the imagefield widgets in a floating box and by clicking in one image the tag is automatically inserted.
Data Migration - part 2 | Gizra

Possibly related posts (automatically generated)

Quadratic and Bezier Curves

admin — Fri, 31 Dec 2010 15:28:00 +0000

Jim Hoskins erklärt wie Quadratic and Bezier Curves.

In this video we create our own quadratic and bezier curves using the canvas. We look at how the curves are defined, and how to choose your control points.

Possibly related posts (automatically generated)

Canvas Image Effects

admin — Sun, 12 Sep 2010 12:37:31 +0000

Marco Lisci erklärt wie man mittels Canvas einen Schwarz / Weiss Effekt für Bilder erstellt.

With canvas you can perform operations on pixel based artworks. You can write a new image pixel by pixel or import an image in the canvas and modify it as you need.

In this article we’ll show you some fundamentals of pixel manipulation in the canvas, and how to use this knowledge to obtain interesting effects. Let’s start from the beginning.

Possibly related posts (automatically generated)

HTML5 Video And Canvas

admin — Thu, 22 Apr 2010 19:43:44 +0000

Sean Christmann hat mit dem HTML5 Video Element und Canvas herumgespielt.

The api lets you take the contents of specific HTML elements and draw them into a canvas, and the 3rd element in that list is just begging to be abused. Copying video into a canvas element means opening up the ability to manipulate or process video frames at runtime. Two concepts instantly came to mind that seemed like fun to try and figure out, here they are below. Blowing apart fragments of video and 3D Video

Possibly related posts (automatically generated)

Canvas/jQuery: Bar Graphing Plugin

admin — Mon, 12 Apr 2010 07:08:06 +0000

Ein sehr ausführliches Tutorial in zwei Teilen über Canvas und jQuery Plugin Entwicklung.

In this two-part series, we’ll combine the versatile canvas element with the robust jQuery library to create a bar graphing plugin. In this second part, we are going to convert it in to a jQuery plugin, and then add some eye candy and additional features.