From 88bd98b4e331d4cd7594b8e72be1be9b9a20b6cb Mon Sep 17 00:00:00 2001 From: Sergey Russkih Date: Fri, 17 Aug 2012 13:48:36 +0300 Subject: [PATCH 1/3] update --- README.md | 24 +++--- index.html | 4 +- load-image.js | 45 +++++++--- load-image.min.js | 1 - package.json | 42 ---------- test/index.html | 37 -------- test/test.js | 209 ---------------------------------------------- 7 files changed, 48 insertions(+), 314 deletions(-) delete mode 100644 load-image.min.js delete mode 100644 package.json delete mode 100644 test/index.html delete mode 100644 test/test.js diff --git a/README.md b/README.md index f1a1038..a6e39fe 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ document.getElementById('file-input').onchange = function (e) { function (img) { document.body.appendChild(img); }, - {maxWidth: 600} + {width: 600} ); }; ``` @@ -42,7 +42,7 @@ document.getElementById('file-input').onchange = function (e) { function (img) { document.body.appendChild(img); }, - {maxWidth: 600} + {width: 600} ); if (!loadingImage) { // Alternative code ... @@ -59,7 +59,7 @@ document.getElementById('file-input').onchange = function (e) { function (img) { document.body.appendChild(img); }, - {maxWidth: 600} + {width: 600} ); loadingImage.onload = loadingImage.onerror = null; }; @@ -78,16 +78,16 @@ window.loadImage( document.body.appendChild(img); } }, - {maxWidth: 600} + {width: 600} ); ``` The optional third argument is a map of options: -* **maxWidth**: Defines the maximum width of the img/canvas element. -* **maxHeight**: Defines the maximum height of the img/canvas element. -* **minWidth**: Defines the minimum width of the img/canvas element. -* **minHeight**: Defines the minimum height of the img/canvas element. +* **width**: Defines the width of the img/canvas element. +* **height**: Defines the height of the img/canvas element. +* **crop**: Defines croping of the canvas element. (for now works only for canvas) +* **upscale**: Define upscaling of the img/canvas element. * **canvas**: Defines if the returned element should be a [canvas](https://developer.mozilla.org/en/HTML/Canvas) element. * **noRevoke**: By default, the [created object URL](https://developer.mozilla.org/en/DOM/window.URL.createObjectURL) is revoked after the image has been loaded, except when this option is set to *true*. @@ -100,10 +100,10 @@ window.loadImage( document.body.appendChild(img); }, { - maxWidth: 600, - maxHeight: 300, - minWidth: 100, - minHeight: 50, + width: 600, + height: 300, + crop: true, + upsacel: true, canvas: true, noRevoke: true } diff --git a/index.html b/index.html index 668961d..3a0c70b 100644 --- a/index.html +++ b/index.html @@ -69,9 +69,9 @@

Result

- + - + - - - - - - - - diff --git a/test/test.js b/test/test.js deleted file mode 100644 index 350738f..0000000 --- a/test/test.js +++ /dev/null @@ -1,209 +0,0 @@ -/* - * JavaScript Load Image Test 1.2.1 - * https://github.com/blueimp/JavaScript-Load-Image - * - * Copyright 2011, Sebastian Tschan - * https://blueimp.net - * - * Licensed under the MIT license: - * http://www.opensource.org/licenses/MIT - */ - -/*global window, describe, it, expect */ - -(function (expect, loadImage) { - 'use strict'; - - // 80x60px GIF image (color black, base64 data): - var b64Data = 'R0lGODdhUAA8AIABAAAAAP///ywAAAAAUAA8AAACS4SPqcvtD6' + - 'OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofE' + - 'ovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5PKsAAA7', - imageUrl = 'data:image/gif;base64,' + b64Data, - blob = window.dataURLtoBlob && window.dataURLtoBlob(imageUrl); - - describe('Loading', function () { - - it('Return the img element or FileReader object to allow aborting the image load', function () { - var img = loadImage(blob, function () {}); - expect(img).to.be.an(Object); - expect(img.onload).to.be.a('function'); - expect(img.onerror).to.be.a('function'); - }); - - it('Load image url', function (done) { - expect(loadImage(imageUrl, function (img) { - done(); - expect(img.width).to.be(80); - expect(img.height).to.be(60); - })).to.be.ok(); - }); - - it('Load image blob', function (done) { - expect(loadImage(blob, function (img) { - done(); - expect(img.width).to.be(80); - expect(img.height).to.be(60); - })).to.be.ok(); - }); - - it('Return image loading error to callback', function (done) { - expect(loadImage('404', function (img) { - done(); - expect(img).to.be.a(window.Event); - expect(img.type).to.be('error'); - })).to.be.ok(); - }); - - it('Keep object URL if options.noRevoke is true', function (done) { - expect(loadImage(blob, function (img) { - loadImage(img.src, function (img2) { - done(); - expect(img.width).to.be(img2.width); - expect(img.height).to.be(img2.height); - }); - }, {noRevoke: true})).to.be.ok(); - }); - - it('Discard object URL if options.noRevoke is undefined or false', function (done) { - expect(loadImage(blob, function (img) { - loadImage(img.src, function (img2) { - done(); - expect(img2).to.be.a(window.Event); - expect(img2.type).to.be('error'); - }); - })).to.be.ok(); - }); - - }); - - describe('Scaling', function () { - - it('Scale to options.maxWidth', function (done) { - expect(loadImage(blob, function (img) { - done(); - expect(img.width).to.be(40); - expect(img.height).to.be(30); - }, {maxWidth: 40})).to.be.ok(); - }); - - it('Scale to options.maxHeight', function (done) { - expect(loadImage(blob, function (img) { - done(); - expect(img.width).to.be(20); - expect(img.height).to.be(15); - }, {maxHeight: 15})).to.be.ok(); - }); - - it('Scale to options.minWidth', function (done) { - expect(loadImage(blob, function (img) { - done(); - expect(img.width).to.be(160); - expect(img.height).to.be(120); - }, {minWidth: 160})).to.be.ok(); - }); - - it('Scale to options.minHeight', function (done) { - expect(loadImage(blob, function (img) { - done(); - expect(img.width).to.be(320); - expect(img.height).to.be(240); - }, {minHeight: 240})).to.be.ok(); - }); - - it('Scale to options.minWidth but respect options.maxWidth', function (done) { - expect(loadImage(blob, function (img) { - done(); - expect(img.width).to.be(160); - expect(img.height).to.be(120); - }, {minWidth: 240, maxWidth: 160})).to.be.ok(); - }); - - it('Scale to options.minHeight but respect options.maxHeight', function (done) { - expect(loadImage(blob, function (img) { - done(); - expect(img.width).to.be(160); - expect(img.height).to.be(120); - }, {minHeight: 180, maxHeight: 120})).to.be.ok(); - }); - - it('Scale to options.minWidth but respect options.maxHeight', function (done) { - expect(loadImage(blob, function (img) { - done(); - expect(img.width).to.be(160); - expect(img.height).to.be(120); - }, {minWidth: 240, maxHeight: 120})).to.be.ok(); - }); - - it('Scale to options.minHeight but respect options.maxWidth', function (done) { - expect(loadImage(blob, function (img) { - done(); - expect(img.width).to.be(160); - expect(img.height).to.be(120); - }, {minHeight: 180, maxWidth: 160})).to.be.ok(); - }); - - it('Do not scale to max settings without min settings', function (done) { - expect(loadImage(blob, function (img) { - done(); - expect(img.width).to.be(80); - expect(img.height).to.be(60); - }, {maxWidth: 160, maxHeight: 120})).to.be.ok(); - }); - - it('Do not scale to min settings without max settings', function (done) { - expect(loadImage(blob, function (img) { - done(); - expect(img.width).to.be(80); - expect(img.height).to.be(60); - }, {minWidth: 40, minHeight: 30})).to.be.ok(); - }); - - }); - - describe('Canvas', function () { - - it('Return img element to callback if options.canvas is not true', function (done) { - expect(loadImage(blob, function (img) { - done(); - expect(img.getContext).to.not.be.ok(); - expect(img.nodeName.toLowerCase()).to.be('img'); - })).to.be.ok(); - }); - - it('Return canvas element to callback if options.canvas is true', function (done) { - expect(loadImage(blob, function (img) { - done(); - expect(img.getContext).to.be.ok(); - expect(img.nodeName.toLowerCase()).to.be('canvas'); - }, {canvas: true})).to.be.ok(); - }); - - it('Return scaled canvas element to callback', function (done) { - expect(loadImage(blob, function (img) { - done(); - expect(img.getContext).to.be.ok(); - expect(img.nodeName.toLowerCase()).to.be('canvas'); - expect(img.width).to.be(40); - expect(img.height).to.be(30); - }, {canvas: true, maxWidth: 40})).to.be.ok(); - }); - - it('Accept a canvas element as parameter for loadImage.scale', function (done) { - expect(loadImage(blob, function (img) { - done(); - img = loadImage.scale(img, { - maxWidth: 40 - }); - expect(img.getContext).to.be.ok(); - expect(img.nodeName.toLowerCase()).to.be('canvas'); - expect(img.width).to.be(40); - expect(img.height).to.be(30); - }, {canvas: true})).to.be.ok(); - }); - - }); - -}( - this.expect, - this.loadImage -)); From b4840306b201dea9aa0e15eb6eec7c4d9ec66461 Mon Sep 17 00:00:00 2001 From: Sergey Russkih Date: Fri, 17 Aug 2012 15:24:41 +0300 Subject: [PATCH 2/3] fix croping --- index.html | 106 -------------------------------------------------- load-image.js | 32 ++++++++------- 2 files changed, 19 insertions(+), 119 deletions(-) delete mode 100644 index.html diff --git a/index.html b/index.html deleted file mode 100644 index 3a0c70b..0000000 --- a/index.html +++ /dev/null @@ -1,106 +0,0 @@ - - - - - - -JavaScript Load Image - - - - - - - - - -
-
-
- - - - - - JavaScript Load Image -
- -
-
-
-
-
-
-

JavaScript Load Image Demo

-
-
-

JavaScript Load Image is a function to load images provided as File or Blob objects or via URL.
- It returns an optionally scaled HTML img or canvas element.

-
-
-
-
-

Select an image file

-

-

Notice Or drag & drop an image file onto this webpage.

-
-
-

Result

-

Notice This demo works only in browsers with support for the URL or FileReader API.

-
-
-
- - - - - - - diff --git a/load-image.js b/load-image.js index bc850f7..03e5eef 100644 --- a/load-image.js +++ b/load-image.js @@ -62,20 +62,20 @@ var canvas = document.createElement('canvas'), width = img.width, height = img.height, - x = 0, y = 0, + x = 0, y = 0, dx = 0, dy = 0, scale; // if crop in options then we have to get biggest scale factor if (options.crop || false){ scale = Math.max( - (options.width) / width, - (options.height) / height + (options.width || width) / width, + (options.height || height) / height ); } else { // else we have to get lowest scale = Math.min( - (options.width) / width, - (options.height) / height + (options.width || width) / width, + (options.height || height) / height ); } @@ -86,13 +86,14 @@ height = parseInt(height * scale, 10); } + // if need to crop, then if (options.crop || false){ - var dx = width - Math.min(width, options.width || width), - dy = height - Math.min(height, options.height || height); + // we have to get difference between required size and image size + dx = width - Math.min(width, options.width || width); + dy = height - Math.min(height, options.height || height); - // if we have difference with required size and - // currently calculated size, we have to calculate - // image offset to got correct croping + // if we have difference is, then we have to get + // image offset in canvas, to crop the image correctly if (dx || dy) { x = -1 * parseInt(dx / 2, 10); y = -1 * parseInt(dy / 2, 10); @@ -100,10 +101,15 @@ } if (img.getContext || (options.canvas && canvas.getContext)) { - canvas.width = width; - canvas.height = height; + // if was have to crop our image, thne we have use + // required image sizes for canvas + canvas.width = width - dx; + canvas.height = height - dy; canvas.getContext('2d') - .drawImage(img, x, y, width, height); + .drawImage(img, + 0, 0, img.width, img.height, + x, y, width, height + ); return canvas; } From 97f0793b6e8040cd7c3563e11793b2659f210cc4 Mon Sep 17 00:00:00 2001 From: Sergey Russkih Date: Fri, 17 Aug 2012 15:26:00 +0300 Subject: [PATCH 3/3] update README --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a6e39fe..bae72a0 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,8 @@ # JavaScript Load Image ## Demo -[JavaScript Load Image Demo](http://blueimp.github.com/JavaScript-Load-Image/) +[JavaScript Load Image Demo](http://srusskih.github.com/JavaScript-Load-Image/demo.html) + ## Usage Include the (minified) JavaScript Load Image script in your HTML markup: