delete webtry from main skia repo; it's been moved to buildbots

experimental/webtry/res/imp/zoom.html

-<script type="text/javascript" charset="utf-8">
-  /**
-   * A reusable HTML Import to enable zooming on images.
-   *
-   * To use, simply include this HTML Import and add the class 'zoom' to any
-   * images you want zoomable.
-   *
-   *     <link rel='import' type='text/html' href='/res/imp/zoom.html'>
-   *
-   *     <img src="http://..." class="zoom"/>
-   *
-   * Any number of images on a page can be zoomable.
-   *
-   * If you want to display the rgb colors of the pixel at the center of the
-   * zoom then add an id of 'zoomHex' to any element that supports
-   * textContent, such as a div, p, span, etc.
-   *
-   *     <p id=zoomHex></p>
-   *
-   * Note that HTML Imports need to be polyfilled in the near term.
-   */
-  (function () {
-    function onLoad() {
-      var PIXELS       = 20; // The number of pixels in width and height in a zoom.
-      var clientX      = 0;
-      var clientY      = 0;
-      var lastClientX  = 0;
-      var lastClientY  = 0;
-      var ctx          = null; // The 2D canvas context of the zoom.
-      var currentImage = null; // The img node we are zooming for, otherwise null.
-      var hex          = document.getElementById('zoomHex');
-      var canvasCopy   = null;
-      function zoomMove(e) {
-        clientX = e.clientX;
-        clientY = e.clientY;
-      }
-      function zoomMouseDown(e) {
-        e.preventDefault();
-        // Only do zooming on the primary mouse button.
-        if (e.button != 0) {
-          return
-        }
-        currentImage = e.target;
-        clientX = e.clientX;
-        clientY = e.clientY;
-        lastClientX = clientX-1;
-        lastClientY = clientY-1;
-        document.body.style.cursor = 'crosshair';
-        canvas = document.createElement('canvas');
-        canvas.width = 1024;
-        canvas.height = 1024;
-        canvas.classList.add('zoomCanvas');
-        ctx = canvas.getContext('2d');
-        ctx.imageSmoothingEnabled = false;
-        this.parentNode.insertBefore(canvas, this);
-        // Copy the image over to a canvas so we can read RGBA values for each point.
-        if (hex) {
-          canvasCopy = document.createElement('canvas');
-          canvasCopy.width = currentImage.width;
-          canvasCopy.height = currentImage.height;
-          canvasCopy.id = 'zoomCopy';
-          canvasCopy.getContext('2d').drawImage(currentImage, 0, 0, currentImage.width, currentImage.height);
-          this.parentNode.insertBefore(canvasCopy, this);
-        }
-        document.body.addEventListener('pointermove',   zoomMove,     true);
-        document.body.addEventListener('pointerup',     zoomFinished);
-        document.body.addEventListener('pointerleave',  zoomFinished);
-        // Kick off the drawing.
-        setTimeout(drawZoom, 1);
-      }
-      function hexify(i) {
-        var s = i.toString(16).toUpperCase();
-        // Pad out to two hex digits if necessary.
-        if (s.length < 2) {
-          s = '0' + s;
-        }
-        return s;
-      }
-      function drawZoom() {
-        if (currentImage) {
-          // Only draw if the mouse has moved from the last time we drew.
-          if (lastClientX != clientX || lastClientY != clientY) {
-            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-            var x = clientX - currentImage.x;
-            var y = clientY - currentImage.y;
-            var dx = Math.floor(ctx.canvas.width/PIXELS);
-            var dy = Math.floor(ctx.canvas.height/PIXELS);
-            ctx.lineWidth = 1;
-            ctx.strokeStyle = '#000';
-            // Draw out each pixel as a rect on the target canvas, as this works around
-            // FireFox doing a blur as it copies from one canvas to another.
-            var colors = canvasCopy.getContext('2d').getImageData(x, y, PIXELS, PIXELS).data;
-            for (var i=0; i<PIXELS; i++) {
-              for (var j=0; j<PIXELS; j++) {
-                var offset = (j*PIXELS+i)*4; // Offset into the colors array.
-                ctx.fillStyle = 'rgba(' + colors[offset] + ', ' + colors[offset+1] + ', ' + colors[offset+2] + ', ' + colors[offset+3]/255.0 + ')';
-                ctx.fillRect(i*dx, j*dy, dx-1, dy-1);
-                // Box and label one selected pixel with its rgba values.
-                if (hex && i==PIXELS/2 && j == PIXELS/2) {
-                  ctx.strokeRect(i*dx, j*dy, dx-1, dy-1);
-                  hex.textContent = 'rgba('
-                    + colors[offset] + ', '
-                    + colors[offset+1] + ', '
-                    + colors[offset+2] + ', '
-                    + colors[offset+3] + ') '
-                    + hexify(colors[offset])
-                    + hexify(colors[offset+1])
-                    + hexify(colors[offset+2])
-                    + hexify(colors[offset+3]);
-                }
-              }
-            }
-            lastClientX = clientX;
-            lastClientY = clientY;
-          }
-          setTimeout(drawZoom, 1000/30);
-        }
-      }
-      function zoomFinished() {
-        currentImage = null;
-        if (hex) {
-          hex.textContent = '';
-        }
-        document.body.style.cursor = 'default';
-        ctx.canvas.parentNode.removeChild(ctx.canvas);
-        canvasCopy.parentNode.removeChild(canvasCopy);
-        document.body.removeEventListener('pointermove',  zoomMove,     true);
-        document.body.removeEventListener('pointerup',    zoomFinished);
-        document.body.removeEventListener('pointerleave', zoomFinished);
-      }
-
-      var zoomables = document.body.querySelectorAll('.zoom');
-      for (var i=0; i<zoomables.length; i++) {
-        zoomables[i].addEventListener('pointerdown', zoomMouseDown);
-      }
-    }
-
-    // If loaded via HTML Imports then DOMContentLoaded will be long done.
-    if (document.readyState != "loading") {
-      onLoad();
-    } else {
-      this.addEventListener('DOMContentLoaded', onLoad);
-    }
-  })();
-</script>
-
-<style type="text/css" media="screen">
-  .zoom {
-    cursor: crosshair;
-  }
-
-  .zoomCanvas {
-    position: absolute;
-    width: vmin;
-    height: vmin;
-    top: 3em;
-    right: 1em;
-    z-index: -1;
-  }
-
-  #zoomCopy {
-    display: none;
-  }
-
-  #zoomHex {
-    text-shadow: 1px 1px #eee;
-  }
-</style>
-