GET STARTED
GET STARTED
Using Javascript to encode images as DataURL

Using Javascript to encode images as DataURL

The following example shows how to draw an image on an HTML 5 Canvas element and encode the image as data-url schema. Being able to convert images into string, opens some interesting possibilities. In browsers that support HTML5 local data storage you can optimize the performance of you site by loading images once and saving them as string in the local database.


Keep in mind that the conversion of an image into text is very costly. An 8 Kb image might become 74 Kb when converted into text. However, reducing the number of HTTP requests by loading resources from a local database is a desirable benefit.


After drawing the image on a Canvas element you can get the data-url by calling toDataURL(). This will return a base64 encoded string, similarly to what you could achieve using PHP or other server side languages. When using Javascript to accomplish this task, be aware that images must be hosted in the same domain of your script. If you try to load images hosted in a different domain, toDataURL() will throw a ‘Security error code: 1000‘.



0 Comments
Add Comment
UPPER HEADLINE

Mobile

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

COMPANY
PRODUCT
LEGAL

© 2024 Appcropolis, LLC

Your cart is empty Continue
Shopping Cart
Subtotal:
Discount 
Discount 
View Details
- +
Sold Out