Tag: data uri

In appmator, I wanted to avoid traditional web elements like 'Save As' buttons. Instead, I implemented a drag-to-desktop feature using Chrome's drag-and-drop functionality. By setting a 'DownloadURL' with a data URI or regular URL on the 'dragstart' event, users can drag data directly to their desktop. This method bypasses the need for a save button. The code example demonstrates how to use the dataTransfer.setData() method with the DownloadURL type. It leverages the JSZip library to generate ZIP files as data URIs for dragging. This approach is Chrome-specific and has no feature detection available.

This post details how to use the HTML5 canvas element to dynamically create visually appealing custom markers for Google Maps. Instead of using a server to generate marker icons, we leverage the canvas API to draw rounded rectangles with gradients, center text within them and ultimately convert them into data URIs. Using the HSL color model allows for the creation of a harmonious range of colors by adjusting the hue while maintaining consistent saturation and luminance. This client-side approach offers flexibility and control over marker appearance, specifically highlighting techniques for rounded corners, gradients, and text centering. The code examples provided demonstrate the process of generating these markers and integrating them into a map.