diff --git a/README.md b/README.md index f1a1038..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: @@ -19,7 +20,7 @@ document.getElementById('file-input').onchange = function (e) { function (img) { document.body.appendChild(img); }, - {maxWidth: 600} + {width: 600} ); }; ``` @@ -42,7 +43,7 @@ document.getElementById('file-input').onchange = function (e) { function (img) { document.body.appendChild(img); }, - {maxWidth: 600} + {width: 600} ); if (!loadingImage) { // Alternative code ... @@ -59,7 +60,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 +79,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 +101,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 deleted file mode 100644 index 668961d..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 4697f68..03e5eef 100644 --- a/load-image.js +++ b/load-image.js @@ -58,32 +58,61 @@ // as image, else the scaled image: loadImage.scale = function (img, options) { options = options || {}; + var canvas = document.createElement('canvas'), width = img.width, height = img.height, + 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.minWidth || width) / width, - (options.minHeight || height) / height + (options.width || width) / width, + (options.height || height) / height + ); + } else { + // else we have to get lowest + scale = Math.min( + (options.width || width) / width, + (options.height || height) / height ); - if (scale > 1) { - width = parseInt(width * scale, 10); - height = parseInt(height * scale, 10); } - scale = Math.min( - (options.maxWidth || width) / width, - (options.maxHeight || height) / height - ); - if (scale < 1) { + + // if scale factor is below 1, or more then and upscale options is + // then we going to calculate new image size + if (scale < 1 || (scale > 1 && (options.upscale || false))){ width = parseInt(width * scale, 10); height = parseInt(height * scale, 10); } + + // if need to crop, then + if (options.crop || false){ + // 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 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); + } + } + 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, 0, 0, width, height); + .drawImage(img, + 0, 0, img.width, img.height, + x, y, width, height + ); return canvas; } + img.width = width; img.height = height; return img; diff --git a/load-image.min.js b/load-image.min.js deleted file mode 100644 index 0f7ab3f..0000000 --- a/load-image.min.js +++ /dev/null @@ -1 +0,0 @@ -(function(a){"use strict";var b=function(a,c,d){var e=document.createElement("img"),f,g;return e.onerror=c,e.onload=function(){g&&(!d||!d.noRevoke)&&b.revokeObjectURL(g),c(b.scale(e,d))},window.Blob&&a instanceof Blob||window.File&&a instanceof File?f=g=b.createObjectURL(a):f=a,f?(e.src=f,e):b.readFile(a,function(a){e.src=a})},c=window.createObjectURL&&window||window.URL&&URL.revokeObjectURL&&URL||window.webkitURL&&webkitURL;b.scale=function(a,b){b=b||{};var c=document.createElement("canvas"),d=a.width,e=a.height,f=Math.max((b.minWidth||d)/d,(b.minHeight||e)/e);return f>1&&(d=parseInt(d*f,10),e=parseInt(e*f,10)),f=Math.min((b.maxWidth||d)/d,(b.maxHeight||e)/e),f<1&&(d=parseInt(d*f,10),e=parseInt(e*f,10)),a.getContext||b.canvas&&c.getContext?(c.width=d,c.height=e,c.getContext("2d").drawImage(a,0,0,d,e),c):(a.width=d,a.height=e,a)},b.createObjectURL=function(a){return c?c.createObjectURL(a):!1},b.revokeObjectURL=function(a){return c?c.revokeObjectURL(a):!1},b.readFile=function(a,b){if(window.FileReader&&FileReader.prototype.readAsDataURL){var c=new FileReader;return c.onload=function(a){b(a.target.result)},c.readAsDataURL(a),c}return!1},typeof define!="undefined"&&define.amd?define(function(){return b}):a.loadImage=b})(this); \ No newline at end of file diff --git a/package.json b/package.json deleted file mode 100644 index b4b081b..0000000 --- a/package.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "name": "blueimp-load-image", - "version": "1.2.1", - "title": "JavaScript Load Image", - "description": "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.", - "keywords": [ - "javascript", - "load", - "loading", - "image", - "file", - "blob", - "url", - "scale", - "scaling", - "img", - "canvas" - ], - "homepage": "https://github.com/blueimp/JavaScript-Load-Image", - "author": { - "name": "Sebastian Tschan", - "url": "https://blueimp.net/" - }, - "maintainers": [ - { - "name": "Sebastian Tschan", - "url": "https://blueimp.net/" - } - ], - "repository": { - "type": "git", - "url": "git://github.com/blueimp/JavaScript-Load-Image.git" - }, - "bugs": "https://github.com/blueimp/JavaScript-Load-Image/issues", - "licenses": [ - { - "type": "MIT", - "url": "http://www.opensource.org/licenses/MIT" - } - ], - "main": "load-image.js" -} diff --git a/test/index.html b/test/index.html deleted file mode 100644 index 1cc5ac9..0000000 --- a/test/index.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - -JavaScript Load Image Test - - - - -
- - - - - - - - - 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 -));