Categories
Code

Convert Image to Base64 Data URI

In Spreadsheet Paintings, you upload a photograph from the local disk and it transforms the picture into pixel art. Internally, the JavaScript resizes the image using the HTML5 Canvas API and then uploads the base64-encoded representation of the canvas data to the Google Script using the HTMLService where the pixels are converted into RGB colors.




Categories
Code

How to Use HTML5 Data Attributes with JavaScript

HTML5 supports data attributes that you can use to store extra information with any DOM elements. The name of these data attributes are prefixed with data-* (lowercase) and these can be easily parsed with the HTML5 dataset API.

For instance, if you an element has data attributes as data-name=”apple” and data-color=”red”, you can access them from JavaScript as elem.dataset.name and elem.dataset.color respectively. There’s no need to attach custom class names to attach properties to an HTML element.

The data-* attributes are supported in IE 10+ and all other browsers. Here’s a complete snippet.



  
    
    HTML5 data-* atributes
  
  
    
    
Categories
Code

How to Use the Web Speech API in HTML5

The Voice Dictation app uses the Web Speech API to convert your spoken words into text. There’s a simple JavaScript API that lets you integrate Speech Recognition on any website.

The Web Speech API is currently implemented in Chrome and Firefox.




Categories
Code

Background Video with CSS

The YouTube Fan Fest website is a good example of a web page that uses background video to add life to an otherwise boring page. The HTML5 video autoplays in the background in a loop. The video is however hidden when the website is viewed on a mobile device and a static background image is used instead.

Here’s the HTML code:

 
    
  

The site uses CSS media queries to hide the video element on mobile devices (device width < 768 pixels).



Categories
Code

HTML5 Speech Input with Voice Recognition

HTML5 support speech input (x-webkit-speech) and this has been implemented in the newer versions of Google Chrome. Dictation is an online speech recognition app that uses Google’s Chrome speech engine to help you convert your spoken words into text.

This piece of jQuery / JavaScript code powers the Dictation app.


// Written by Amit Agarwal on 10/08/2012
// See ctrlq.org/dictation for live demo

$(document).ready(function () {

// Check if the user's web browser supports HTML5 Speech Input API
  if(document.createElement('input').webkitSpeech == undefined) {
    $(".answer").append("We are sorry but Dictation requires Google Chrome.");
  }
  else {

// Get the default locale of the user's browser (e.g. en-US, or de)
    var language = window.navigator.userLanguage || window.navigator.language;
    $("#speech").attr("lang", language).focus();

// Make the text region editable to easily fix transcription errors
    $(".answer").click(function () {
       $('.answer').attr('contentEditable', 'true');
    });
  }

// This is called when Chrome successfully transcribes the spoken word
  $("#speech").bind("webkitspeechchange", function (e) {
     var val = $(this).val();

// Did the user say Delete? Then clear the canvas.
     if(val == "delete everything") {
       $(".answer").text("");
       return;
     }
	
// For "new line" commands, add double line breaks.
     if(val == "new line") 
        val = "

"; else { // Capitalize the first letter of the sentence. val = val.substr(0, 1).toUpperCase() + val.substr(1); // If the last letter is a alphanumeric character, add a period (full stop) if(val.match(/[a-zA-Z]$/)) val = val + "."; } // Append the transcribed text but set the focus to the hidden speech input. // This enables keyboard shortcut Ctrl+Shift+Period (.) for speech mode. $(".answer").append(val + " ").fadeIn(); $(this).val("").focus(); }); });