Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1204)

Unified Diff: experimental/webtry/res/imp/zoom.html

Issue 688713002: delete webtry from main skia repo; it's been moved to buildbots (Closed) Base URL: https://skia.googlesource.com/skia.git@master
Patch Set: Created 6 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « experimental/webtry/res/img/skia.png ('k') | experimental/webtry/res/js/cm/clike.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: experimental/webtry/res/imp/zoom.html
diff --git a/experimental/webtry/res/imp/zoom.html b/experimental/webtry/res/imp/zoom.html
deleted file mode 100644
index 33aab9b44c2705e10ff9980228ec1262dca45619..0000000000000000000000000000000000000000
--- a/experimental/webtry/res/imp/zoom.html
+++ /dev/null
@@ -1,169 +0,0 @@
-<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>
-
« no previous file with comments | « experimental/webtry/res/img/skia.png ('k') | experimental/webtry/res/js/cm/clike.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698