B2G/gaia/apps/camera/js/filmstrip.js
// thumbnail image as a blob and pass it to the callback.
thumbnail image as a blob and pass it to the callback.
thumbnail image as a blob and pass it to the callback .
function createThumbnailFromPoster(poster, width, height, rotation, callback)
  {
    offscreenImage.src = URL.createObjectURL(poster);
    offscreenImage.onload = function() {
      var thumbnailcanvas = document.createElement('canvas');
      var thumbnailcontext = thumbnailcanvas.getContext('2d');
      thumbnailcanvas.width = THUMBNAIL_WIDTH;
      thumbnailcanvas.height = THUMBNAIL_HEIGHT;
      var scalex = THUMBNAIL_WIDTH / width;
      var scaley = THUMBNAIL_HEIGHT / height;
      var scale = Math.max(scalex, scaley);
      var w = Math.round(THUMBNAIL_WIDTH / scale);
      var h = Math.round(THUMBNAIL_HEIGHT / scale);
      var x = Math.round((width - w) / 2);
      var y = Math.round((height - h) / 2);
      if (rotation) {
        thumbnailcontext.save();
        switch (rotation) {
        case 90:
          thumbnailcontext.translate(THUMBNAIL_WIDTH, 0);
          thumbnailcontext.rotate(Math.PI / 2);
          break;
        case 180:
          thumbnailcontext.translate(THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT);
          thumbnailcontext.rotate(Math.PI);
          break;
        case 270:
          thumbnailcontext.translate(0, THUMBNAIL_HEIGHT);
          thumbnailcontext.rotate(-Math.PI / 2);
          break;
        }
      }
      thumbnailcontext.drawImage(offscreenImage, x, y, w, h,
                                 0, 0, THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT);
      URL.revokeObjectURL(offscreenImage.src);
      offscreenImage.onload = null;
      offscreenImage.src = null;
      if (rotation) {
        thumbnailcontext.restore();
      }
      thumbnailcontext.fillStyle = 'rgba(0, 0, 0, .3)';
      thumbnailcontext.beginPath();
      thumbnailcontext.arc(THUMBNAIL_WIDTH / 2, THUMBNAIL_HEIGHT / 2,
                           THUMBNAIL_HEIGHT / 3, 0, 2 * Math.PI, false);
      thumbnailcontext.fill();
      thumbnailcontext.strokeStyle = 'rgba(255,255,255,.6)';
      thumbnailcontext.lineWidth = 2;
      thumbnailcontext.stroke();
      thumbnailcontext.beginPath();
      thumbnailcontext.fillStyle = 'rgba(255,255,255,.6)';
      var side = THUMBNAIL_HEIGHT / 3;
      var triangle_height = side * Math.sqrt(3) / 2;
      thumbnailcontext.moveTo(THUMBNAIL_WIDTH / 2 + triangle_height * 2 / 3,
                              THUMBNAIL_HEIGHT / 2);
      thumbnailcontext.lineTo(THUMBNAIL_WIDTH / 2 - triangle_height / 3,
                              THUMBNAIL_HEIGHT / 2 - side / 2);
      thumbnailcontext.lineTo(THUMBNAIL_WIDTH / 2 - triangle_height / 3,
                              THUMBNAIL_HEIGHT / 2 + side / 2);
      thumbnailcontext.closePath();
      thumbnailcontext.fill();
      thumbnailcanvas.toBlob(callback, 'image/jpeg');
    };
  }
function createThumbnailFromPoster ( poster , width , height , rotation , callback ) { offscreenImage . src = URL . createObjectURL ( poster ) ; offscreenImage . onload = function ( ) { var thumbnailcanvas = document . createElement ( 'canvas' ) ; var thumbnailcontext = thumbnailcanvas . getContext ( '2d' ) ; thumbnailcanvas . width = THUMBNAIL_WIDTH ; thumbnailcanvas . height = THUMBNAIL_HEIGHT ; var scalex = THUMBNAIL_WIDTH / width ; var scaley = THUMBNAIL_HEIGHT / height ; var scale = Math . max ( scalex , scaley ) ; var w = Math . round ( THUMBNAIL_WIDTH / scale ) ; var h = Math . round ( THUMBNAIL_HEIGHT / scale ) ; var x = Math . round ( ( width - w ) / 2 ) ; var y = Math . round ( ( height - h ) / 2 ) ; if ( rotation ) { thumbnailcontext . save ( ) ; switch ( rotation ) { case 90 : thumbnailcontext . translate ( THUMBNAIL_WIDTH , 0 ) ; thumbnailcontext . rotate ( Math . PI / 2 ) ; break ; case 180 : thumbnailcontext . translate ( THUMBNAIL_WIDTH , THUMBNAIL_HEIGHT ) ; thumbnailcontext . rotate ( Math . PI ) ; break ; case 270 : thumbnailcontext . translate ( 0 , THUMBNAIL_HEIGHT ) ; thumbnailcontext . rotate ( - Math . PI / 2 ) ; break ; } } thumbnailcontext . drawImage ( offscreenImage , x , y , w , h , 0 , 0 , THUMBNAIL_WIDTH , THUMBNAIL_HEIGHT ) ; URL . revokeObjectURL ( offscreenImage . src ) ; offscreenImage . onload = null ; offscreenImage . src = null ; if ( rotation ) { thumbnailcontext . restore ( ) ; } thumbnailcontext . fillStyle = 'rgba(0, 0, 0, .3)' ; thumbnailcontext . beginPath ( ) ; thumbnailcontext . arc ( THUMBNAIL_WIDTH / 2 , THUMBNAIL_HEIGHT / 2 , THUMBNAIL_HEIGHT / 3 , 0 , 2 * Math . PI , false ) ; thumbnailcontext . fill ( ) ; thumbnailcontext . strokeStyle = 'rgba(255,255,255,.6)' ; thumbnailcontext . lineWidth = 2 ; thumbnailcontext . stroke ( ) ; thumbnailcontext . beginPath ( ) ; thumbnailcontext . fillStyle = 'rgba(255,255,255,.6)' ; var side = THUMBNAIL_HEIGHT / 3 ; var triangle_height = side * Math . sqrt ( 3 ) / 2 ; thumbnailcontext . moveTo ( THUMBNAIL_WIDTH / 2 + triangle_height * 2 / 3 , THUMBNAIL_HEIGHT / 2 ) ; thumbnailcontext . lineTo ( THUMBNAIL_WIDTH / 2 - triangle_height / 3 , THUMBNAIL_HEIGHT / 2 - side / 2 ) ; thumbnailcontext . lineTo ( THUMBNAIL_WIDTH / 2 - triangle_height / 3 , THUMBNAIL_HEIGHT / 2 + side / 2 ) ; thumbnailcontext . closePath ( ) ; thumbnailcontext . fill ( ) ; thumbnailcanvas . toBlob ( callback , 'image/jpeg' ) ; } ; }
thumbnail image as a blob and pass it to the callback.
thumbnail image as a blob and pass it to the callback .
// Load the poster image into an offscreen image // And when it loads, create a thumbnail from it // Now create a thumbnail // Take the larger of the two scales: we crop the image to the thumbnail // Calculate the region of the image that will be copied to the // canvas to create the thumbnail // If a rotation is specified, rotate the canvas context // Draw that region of the poster into the thumbnail, scaling it down // We're done with the offscreen image now // Restore the default rotation so the play arrow comes out correctly // Superimpose a translucent play button over // the thumbnail to distinguish it from a still photo // thumbnail. First draw a transparent gray circle. // Now outline the circle in white // And add a white play arrow. // The height of an equilateral triangle is sqrt(3)/2 times the side // Get the thumbnail image as a blob and pass it to the callback