From 50bc1f13405f236578239912ad96543daf4631a0 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Wed, 22 Aug 2018 21:21:42 +0200 Subject: [PATCH 01/41] added callback to resize function, added test case, edited README.md --- README.md | 42 +++++++++++++------ index.js | 36 ---------------- package.json | 6 ++- src/index.js | 37 ++++++++++++++++ ...esizeBase64ImageFrom320x240ToMax75x75.html | 21 ++++++++++ 5 files changed, 93 insertions(+), 49 deletions(-) delete mode 100644 index.js create mode 100644 src/index.js create mode 100644 test/resizeBase64ImageFrom320x240ToMax75x75.html diff --git a/README.md b/README.md index a839b85..c6ccd75 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,39 @@ -## When passing an image base64 as first argument to the function, it returns the base64 of the resized image. maxWidth and maxHeight are optional. +# resize-base64 -#### Note: This is a font-end package. +A function that resizes a Base64 image. Pass a Base64 string of an image, the maximum width, the maximum size, and a callback to the function and it returns the resized image as soon as the resizing is done. +## Restrictions -#### What is it for? -`If you have a base64 image and you would like to resize it, this function will return a base64 image resizes to your height and width specifications.` +The function can only be used in frontend code. +## Example -#### How do I install it? -`bower install resize-base64 --save` - - - -##### To use ``` -var image = resizebase64(base64, maxWidth, maxHeight); - + + + + + + + + + + + ``` +See test/resizeBase64ImageFrom320x240ToMax75x75.html for details. + +## Installation +`bower install resize-base64 --save` \ No newline at end of file diff --git a/index.js b/index.js deleted file mode 100644 index ceeb5e2..0000000 --- a/index.js +++ /dev/null @@ -1,36 +0,0 @@ - resizebase64 = function(base64, maxWidth, maxHeight){ - - -// Max size for thumbnail - if(typeof(maxWidth) === 'undefined') maxWidth = 500; - if(typeof(maxHeight) === 'undefined') maxHeight = 500; - - // Create and initialize two canvas - var canvas = document.createElement("canvas"); - var ctx = canvas.getContext("2d"); - var canvasCopy = document.createElement("canvas"); - var copyContext = canvasCopy.getContext("2d"); - - // Create original image - var img = new Image(); - img.src = base64; - - // Determine new ratio based on max size - var ratio = 1; - if(img.width > maxWidth) - ratio = maxWidth / img.width; - else if(img.height > maxHeight) - ratio = maxHeight / img.height; - - // Draw original image in second canvas - canvasCopy.width = img.width; - canvasCopy.height = img.height; - copyContext.drawImage(img, 0, 0); - - // Copy and resize second canvas to first canvas - canvas.width = img.width * ratio; - canvas.height = img.height * ratio; - ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height); - - return canvas.toDataURL(); -} \ No newline at end of file diff --git a/package.json b/package.json index d5443bb..f1139f7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "resize-base64", - "version": "1.0.13", + "version": "1.0.14", "description": "A function that resizes a base64 image", "main": "index.js", "scripts": { @@ -13,6 +13,10 @@ "picture" ], "author": "Daniel Izhar (http://daniwebmaster.com)", + "contributors": [ + { + "name": "Hendrik Scholz" + }], "license": "ISC", "dependencies": { "create-readme": "^1.1.0" diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..8499684 --- /dev/null +++ b/src/index.js @@ -0,0 +1,37 @@ +resizebase64 = function(base64, maxWidth, maxHeight, callback) { + + // Max size for thumbnail + if(typeof(maxWidth) === 'undefined') maxWidth = 500; + if(typeof(maxHeight) === 'undefined') maxHeight = 500; + + // Create and initialize two canvas + let canvas = document.createElement("canvas"); + let ctx = canvas.getContext("2d"); + let canvasCopy = document.createElement("canvas"); + let copyContext = canvasCopy.getContext("2d"); + + // Create original image + let img = new Image(); + img.src = base64; + + img.onload = function() { + // Determine new ratio based on max size + let ratio = 1; + if(img.width > maxWidth) + ratio = maxWidth / img.width; + else if(img.height > maxHeight) + ratio = maxHeight / img.height; + + // Draw original image in second canvas + canvasCopy.width = img.width; + canvasCopy.height = img.height; + copyContext.drawImage(img, 0, 0); + + // Copy and resize second canvas to first canvas + canvas.width = img.width * ratio; + canvas.height = img.height * ratio; + ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height); + + callback(canvas.toDataURL()); + }; +} \ No newline at end of file diff --git a/test/resizeBase64ImageFrom320x240ToMax75x75.html b/test/resizeBase64ImageFrom320x240ToMax75x75.html new file mode 100644 index 0000000..f4a87db --- /dev/null +++ b/test/resizeBase64ImageFrom320x240ToMax75x75.html @@ -0,0 +1,21 @@ + + + + + + + + + + + \ No newline at end of file From 466a5eb714ab8b6083e4f4fa1e091df9d6d77aa6 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Wed, 22 Aug 2018 22:09:58 +0200 Subject: [PATCH 02/41] moved index.js, edited README.md --- README.md | 23 +++++++++++++++---- src/index.js => index.js | 2 +- ...esizeBase64ImageFrom320x240ToMax75x75.html | 2 +- 3 files changed, 20 insertions(+), 7 deletions(-) rename src/index.js => index.js (99%) diff --git a/README.md b/README.md index c6ccd75..a859ec3 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,23 @@ A function that resizes a Base64 image. Pass a Base64 string of an image, the ma The function can only be used in frontend code. +## Installation + +``` +bower install https://github.com/hendrik-scholz/resize-base64/archive/master.zip +``` + +``` +npm install https://github.com/hendrik-scholz/resize-base64/#master +``` + +Add the following line to your package.json and call 'npm install' from the directory +where your package.json is saved. + +``` +"resize-base64": "https://github.com/hendrik-scholz/resize-base64/#master" +``` + ## Example ``` @@ -32,8 +49,4 @@ The function can only be used in frontend code. ``` -See test/resizeBase64ImageFrom320x240ToMax75x75.html for details. - -## Installation - -`bower install resize-base64 --save` \ No newline at end of file +See test/resizeBase64ImageFrom320x240ToMax75x75.html for details. \ No newline at end of file diff --git a/src/index.js b/index.js similarity index 99% rename from src/index.js rename to index.js index 8499684..fab5ab1 100644 --- a/src/index.js +++ b/index.js @@ -34,4 +34,4 @@ resizebase64 = function(base64, maxWidth, maxHeight, callback) { callback(canvas.toDataURL()); }; -} \ No newline at end of file +}; \ No newline at end of file diff --git a/test/resizeBase64ImageFrom320x240ToMax75x75.html b/test/resizeBase64ImageFrom320x240ToMax75x75.html index f4a87db..7437a5d 100644 --- a/test/resizeBase64ImageFrom320x240ToMax75x75.html +++ b/test/resizeBase64ImageFrom320x240ToMax75x75.html @@ -2,7 +2,7 @@ - + - + ``` diff --git a/index.js b/index.js index fab5ab1..c611663 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,4 @@ -resizebase64 = function(base64, maxWidth, maxHeight, callback) { +resizeBase64 = function(base64, maxWidth, maxHeight, callback) { // Max size for thumbnail if(typeof(maxWidth) === 'undefined') maxWidth = 500; diff --git a/test/resizeBase64ImageFrom320x240ToMax75x75.html b/test/resizeBase64ImageFrom320x240ToMax75x75.html index a221d9f..cb46d99 100644 --- a/test/resizeBase64ImageFrom320x240ToMax75x75.html +++ b/test/resizeBase64ImageFrom320x240ToMax75x75.html @@ -9,13 +9,13 @@ let maxHeight = 75; let callback = function(resizedImage) { - document.getElementById('smallImage').src = resizedImage; + document.getElementById('resizedImage').src = resizedImage; } - resizebase64(base64Image_320x240, maxWidth, maxHeight, callback); + resizeBase64(base64Image_320x240, maxWidth, maxHeight, callback); - + \ No newline at end of file From 52856694de37ebb3f05687454c9ce4617a2f214e Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Thu, 23 Aug 2018 00:01:44 +0200 Subject: [PATCH 05/41] added input validation --- README.md | 15 ++- index.js | 92 +++++++++++-------- package.json | 2 +- ...esizeBase64ImageFrom320x240ToMax75x75.html | 13 ++- .../resizeBase64ImageInvalidBase64String.html | 25 +++++ test/resizeBase64ImageInvalidPrefix.html | 25 +++++ ...zeBase64ImageMaxHeightNotOfTypeNumber.html | 25 +++++ test/resizeBase64ImageMaxHeightNull.html | 25 +++++ test/resizeBase64ImageMaxHeightUndefined.html | 25 +++++ ...izeBase64ImageMaxWidthNotOfTypeNumber.html | 25 +++++ test/resizeBase64ImageMaxWidthNull.html | 25 +++++ test/resizeBase64ImageMaxWidthUndefined.html | 25 +++++ test/resizeBase64ImageNull.html | 25 +++++ test/resizeBase64ImageUndefined.html | 25 +++++ 14 files changed, 328 insertions(+), 44 deletions(-) create mode 100644 test/resizeBase64ImageInvalidBase64String.html create mode 100644 test/resizeBase64ImageInvalidPrefix.html create mode 100644 test/resizeBase64ImageMaxHeightNotOfTypeNumber.html create mode 100644 test/resizeBase64ImageMaxHeightNull.html create mode 100644 test/resizeBase64ImageMaxHeightUndefined.html create mode 100644 test/resizeBase64ImageMaxWidthNotOfTypeNumber.html create mode 100644 test/resizeBase64ImageMaxWidthNull.html create mode 100644 test/resizeBase64ImageMaxWidthUndefined.html create mode 100644 test/resizeBase64ImageNull.html create mode 100644 test/resizeBase64ImageUndefined.html diff --git a/README.md b/README.md index 1a6af29..7f55f72 100644 --- a/README.md +++ b/README.md @@ -30,20 +30,27 @@ where your package.json is saved. - + + + diff --git a/index.js b/index.js index c611663..ff70732 100644 --- a/index.js +++ b/index.js @@ -1,37 +1,57 @@ -resizeBase64 = function(base64, maxWidth, maxHeight, callback) { - - // Max size for thumbnail - if(typeof(maxWidth) === 'undefined') maxWidth = 500; - if(typeof(maxHeight) === 'undefined') maxHeight = 500; - - // Create and initialize two canvas - let canvas = document.createElement("canvas"); - let ctx = canvas.getContext("2d"); - let canvasCopy = document.createElement("canvas"); - let copyContext = canvasCopy.getContext("2d"); - - // Create original image - let img = new Image(); - img.src = base64; - - img.onload = function() { - // Determine new ratio based on max size - let ratio = 1; - if(img.width > maxWidth) - ratio = maxWidth / img.width; - else if(img.height > maxHeight) - ratio = maxHeight / img.height; - - // Draw original image in second canvas - canvasCopy.width = img.width; - canvasCopy.height = img.height; - copyContext.drawImage(img, 0, 0); - - // Copy and resize second canvas to first canvas - canvas.width = img.width * ratio; - canvas.height = img.height * ratio; - ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height); - - callback(canvas.toDataURL()); - }; +resizeBase64 = function(base64String, maxWidth, maxHeight, successCallback, errorCallback) { + if(base64String === undefined) { + errorCallback('The input parameter base64String is undefined.'); + } else if(base64String === null) { + errorCallback('The input parameter base64String is null.'); + } else if(!base64String.startsWith('data:image')) { + errorCallback('The input parameter base64String does not start with \'data:image\'.'); + } else if(maxWidth === undefined) { + errorCallback('The input parameter maxWidth is undefined.'); + } else if(maxWidth === null) { + errorCallback('The input parameter maxWidth is null.'); + } else if(typeof(maxWidth) != 'number') { + errorCallback('The input parameter maxWidth is not of type \'number\'.'); + } else if(maxHeight === undefined) { + errorCallback('The input parameter maxHeight is undefined.'); + } else if(maxHeight === null) { + errorCallback('The input parameter maxHeight is null.'); + } else if(typeof(maxHeight) != 'number') { + errorCallback('The input parameter maxHeight is not of type \'number\'.'); + } else { + // Create and initialize two canvas + let canvas = document.createElement("canvas"); + let ctx = canvas.getContext("2d"); + let canvasCopy = document.createElement("canvas"); + let copyContext = canvasCopy.getContext("2d"); + + // Create original image + let img = new Image(); + img.src = base64String; + + img.onload = () => { + // Determine new ratio based on max size + let ratio = 1; + if(img.width > maxWidth) { + ratio = maxWidth / img.width; + } else if(img.height > maxHeight) { + ratio = maxHeight / img.height; + } + + // Draw original image in second canvas + canvasCopy.width = img.width; + canvasCopy.height = img.height; + copyContext.drawImage(img, 0, 0); + + // Copy and resize second canvas to first canvas + canvas.width = img.width * ratio; + canvas.height = img.height * ratio; + ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height); + + successCallback(canvas.toDataURL()); + }; + + img.onerror = () => { + errorCallback('Error while loading image.'); + }; + } }; \ No newline at end of file diff --git a/package.json b/package.json index f1139f7..d79333f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "resize-base64", - "version": "1.0.14", + "version": "1.0.15", "description": "A function that resizes a base64 image", "main": "index.js", "scripts": { diff --git a/test/resizeBase64ImageFrom320x240ToMax75x75.html b/test/resizeBase64ImageFrom320x240ToMax75x75.html index cb46d99..d8e00a8 100644 --- a/test/resizeBase64ImageFrom320x240ToMax75x75.html +++ b/test/resizeBase64ImageFrom320x240ToMax75x75.html @@ -8,14 +8,21 @@ let maxWidth = 75; let maxHeight = 75; - let callback = function(resizedImage) { + let successCallback = function(resizedImage) { + document.getElementById('originalImage').src = base64Image_320x240; document.getElementById('resizedImage').src = resizedImage; - } + }; - resizeBase64(base64Image_320x240, maxWidth, maxHeight, callback); + let errorCallback = function(errorMessage) { + alert(errorMessage); + }; + + resizeBase64(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); + + \ No newline at end of file diff --git a/test/resizeBase64ImageInvalidBase64String.html b/test/resizeBase64ImageInvalidBase64String.html new file mode 100644 index 0000000..bc31def --- /dev/null +++ b/test/resizeBase64ImageInvalidBase64String.html @@ -0,0 +1,25 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/test/resizeBase64ImageInvalidPrefix.html b/test/resizeBase64ImageInvalidPrefix.html new file mode 100644 index 0000000..3d1a40c --- /dev/null +++ b/test/resizeBase64ImageInvalidPrefix.html @@ -0,0 +1,25 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/test/resizeBase64ImageMaxHeightNotOfTypeNumber.html b/test/resizeBase64ImageMaxHeightNotOfTypeNumber.html new file mode 100644 index 0000000..bdbe453 --- /dev/null +++ b/test/resizeBase64ImageMaxHeightNotOfTypeNumber.html @@ -0,0 +1,25 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/test/resizeBase64ImageMaxHeightNull.html b/test/resizeBase64ImageMaxHeightNull.html new file mode 100644 index 0000000..7c818a9 --- /dev/null +++ b/test/resizeBase64ImageMaxHeightNull.html @@ -0,0 +1,25 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/test/resizeBase64ImageMaxHeightUndefined.html b/test/resizeBase64ImageMaxHeightUndefined.html new file mode 100644 index 0000000..ca0a7e0 --- /dev/null +++ b/test/resizeBase64ImageMaxHeightUndefined.html @@ -0,0 +1,25 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/test/resizeBase64ImageMaxWidthNotOfTypeNumber.html b/test/resizeBase64ImageMaxWidthNotOfTypeNumber.html new file mode 100644 index 0000000..be4586a --- /dev/null +++ b/test/resizeBase64ImageMaxWidthNotOfTypeNumber.html @@ -0,0 +1,25 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/test/resizeBase64ImageMaxWidthNull.html b/test/resizeBase64ImageMaxWidthNull.html new file mode 100644 index 0000000..f82acbd --- /dev/null +++ b/test/resizeBase64ImageMaxWidthNull.html @@ -0,0 +1,25 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/test/resizeBase64ImageMaxWidthUndefined.html b/test/resizeBase64ImageMaxWidthUndefined.html new file mode 100644 index 0000000..bf69534 --- /dev/null +++ b/test/resizeBase64ImageMaxWidthUndefined.html @@ -0,0 +1,25 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/test/resizeBase64ImageNull.html b/test/resizeBase64ImageNull.html new file mode 100644 index 0000000..dda6d89 --- /dev/null +++ b/test/resizeBase64ImageNull.html @@ -0,0 +1,25 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/test/resizeBase64ImageUndefined.html b/test/resizeBase64ImageUndefined.html new file mode 100644 index 0000000..3bc5ae5 --- /dev/null +++ b/test/resizeBase64ImageUndefined.html @@ -0,0 +1,25 @@ + + + + + + + + + + + \ No newline at end of file From c550ae509c2fc3bfb013b7c612956daf1aeac14d Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Thu, 23 Aug 2018 07:00:36 +0200 Subject: [PATCH 06/41] added typeof check to Base64 input parameter --- index.js | 4 +++- test/resizeBase64ImageNotOfTypeString.html | 25 ++++++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 test/resizeBase64ImageNotOfTypeString.html diff --git a/index.js b/index.js index ff70732..dc97758 100644 --- a/index.js +++ b/index.js @@ -3,6 +3,8 @@ resizeBase64 = function(base64String, maxWidth, maxHeight, successCallback, erro errorCallback('The input parameter base64String is undefined.'); } else if(base64String === null) { errorCallback('The input parameter base64String is null.'); + } else if(typeof(base64String) != 'string') { + errorCallback('The input parameter base64String is not of type \'string\'.'); } else if(!base64String.startsWith('data:image')) { errorCallback('The input parameter base64String does not start with \'data:image\'.'); } else if(maxWidth === undefined) { @@ -32,7 +34,7 @@ resizeBase64 = function(base64String, maxWidth, maxHeight, successCallback, erro // Determine new ratio based on max size let ratio = 1; if(img.width > maxWidth) { - ratio = maxWidth / img.width; + ratio = maxWidth / img.width; } else if(img.height > maxHeight) { ratio = maxHeight / img.height; } diff --git a/test/resizeBase64ImageNotOfTypeString.html b/test/resizeBase64ImageNotOfTypeString.html new file mode 100644 index 0000000..af0d85b --- /dev/null +++ b/test/resizeBase64ImageNotOfTypeString.html @@ -0,0 +1,25 @@ + + + + + + + + + + + \ No newline at end of file From 91a484cd978a89ad8f2990d288acdd193120bfe9 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Thu, 23 Aug 2018 07:20:50 +0200 Subject: [PATCH 07/41] edited description, authors, dependencies, and version number --- bower.json | 5 +++-- package.json | 9 +++------ 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/bower.json b/bower.json index 44c9ce2..6328f35 100644 --- a/bower.json +++ b/bower.json @@ -1,9 +1,10 @@ { "name": "resize-base64", - "description": "A function that resizes a base64 image", + "description": "A function that resizes a Base64 image", "main": "index.js", "authors": [ - "Daniel Izhar (http://daniwebmaster.com)" + "Daniel Izhar (http://daniwebmaster.com)", + "Hendrik Scholz" ], "license": "ISC", "keywords": [ diff --git a/package.json b/package.json index d79333f..5d8cc02 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "resize-base64", - "version": "1.0.15", - "description": "A function that resizes a base64 image", + "version": "1.0.16", + "description": "A function that resizes a Base64 image", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" @@ -17,8 +17,5 @@ { "name": "Hendrik Scholz" }], - "license": "ISC", - "dependencies": { - "create-readme": "^1.1.0" - } + "license": "ISC" } From 9f564c5a60a13c1aaa71d0dd619260e19096c981 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Thu, 23 Aug 2018 20:55:02 +0200 Subject: [PATCH 08/41] added description of input parameters --- README.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7f55f72..41d3170 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,15 @@ # resize-base64 -A function that resizes a Base64 image. Pass a Base64 string of an image, the maximum width, the maximum size, and a callback to the function and it returns the resized image as soon as the resizing is done. +A function that resizes a Base64 image. Pass a Base64 string of an image, the maximum width, the maximum size, a success callback, and an error callback to the function. The function returns the resized image in the success callback. + +| Parameter | Description | +| ------ | ----------- | +| base64String | the image to resize as a Base64 string | +| maxWidth | the maxmium width that the image should be resized to | +| maxHeight | the maxmium height that the image should be resized to | +| successCallback | the callback the contains the resized image as a Base64 string | +| errorCallback | the callback that contains the error that occurred during resizing | + ## Restrictions From 9b45062ecf89eafde87db29d7e34c4c6e32cbdde Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Thu, 23 Aug 2018 21:03:42 +0200 Subject: [PATCH 09/41] changed indentation --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index dc97758..7818b40 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,6 @@ resizeBase64 = function(base64String, maxWidth, maxHeight, successCallback, errorCallback) { if(base64String === undefined) { - errorCallback('The input parameter base64String is undefined.'); + errorCallback('The input parameter base64String is undefined.'); } else if(base64String === null) { errorCallback('The input parameter base64String is null.'); } else if(typeof(base64String) != 'string') { @@ -34,7 +34,7 @@ resizeBase64 = function(base64String, maxWidth, maxHeight, successCallback, erro // Determine new ratio based on max size let ratio = 1; if(img.width > maxWidth) { - ratio = maxWidth / img.width; + ratio = maxWidth / img.width; } else if(img.height > maxHeight) { ratio = maxHeight / img.height; } From e6d0edddd424e7d654f229f6575e4f5d849ad9ab Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Thu, 23 Aug 2018 21:34:12 +0200 Subject: [PATCH 10/41] added export --- index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 7818b40..5bd3cfc 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,4 @@ -resizeBase64 = function(base64String, maxWidth, maxHeight, successCallback, errorCallback) { +function resizeBase64(base64String, maxWidth, maxHeight, successCallback, errorCallback) { if(base64String === undefined) { errorCallback('The input parameter base64String is undefined.'); } else if(base64String === null) { @@ -56,4 +56,6 @@ resizeBase64 = function(base64String, maxWidth, maxHeight, successCallback, erro errorCallback('Error while loading image.'); }; } -}; \ No newline at end of file +}; + +export { resizeBase64 }; \ No newline at end of file From eff6e5b9157a51cbb24038d9ceb4837e3d3bce96 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Thu, 23 Aug 2018 21:49:28 +0200 Subject: [PATCH 11/41] increased version number, added description of usage --- README.md | 13 +++++++++++++ package.json | 2 +- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 41d3170..f39f384 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,19 @@ where your package.json is saved. "resize-base64": "https://github.com/hendrik-scholz/resize-base64/#master" ``` +## Usage + +### Angular + +Add the following line to the TS file to import the resize function. + +``` +import { resizeBase64 } from 'resize-base64'; +``` + +Call the resize function as shown in the example below. + + ## Example ``` diff --git a/package.json b/package.json index 5d8cc02..997352a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "resize-base64", - "version": "1.0.16", + "version": "1.0.17", "description": "A function that resizes a Base64 image", "main": "index.js", "scripts": { From ff25e251f82676e3120dbbde29a6b6317526b5b0 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Fri, 24 Aug 2018 07:29:28 +0200 Subject: [PATCH 12/41] added input validation for height and width --- README.md | 3 +++ index.js | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/README.md b/README.md index f39f384..11ac765 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,9 @@ import { resizeBase64 } from 'resize-base64'; Call the resize function as shown in the example below. +## Test + +Tests have to be run with 'export { resizeBase64 };' commented out in the index.js. ## Example diff --git a/index.js b/index.js index 5bd3cfc..c01b9fd 100644 --- a/index.js +++ b/index.js @@ -13,12 +13,16 @@ function resizeBase64(base64String, maxWidth, maxHeight, successCallback, errorC errorCallback('The input parameter maxWidth is null.'); } else if(typeof(maxWidth) != 'number') { errorCallback('The input parameter maxWidth is not of type \'number\'.'); + } else if(maxWidth < 2) { + errorCallback('The input parameter maxWidth must be at least 2 pixel.'); } else if(maxHeight === undefined) { errorCallback('The input parameter maxHeight is undefined.'); } else if(maxHeight === null) { errorCallback('The input parameter maxHeight is null.'); } else if(typeof(maxHeight) != 'number') { errorCallback('The input parameter maxHeight is not of type \'number\'.'); + } else if(maxHeight < 2) { + errorCallback('The input parameter maxHeight must be at least 2 pixel.'); } else { // Create and initialize two canvas let canvas = document.createElement("canvas"); From dcb343c078ffc5bc6b3cb7e4ab780e094c15ccc3 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Fri, 24 Aug 2018 07:33:19 +0200 Subject: [PATCH 13/41] increased version number --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 997352a..7e6a04e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "resize-base64", - "version": "1.0.17", + "version": "1.0.18", "description": "A function that resizes a Base64 image", "main": "index.js", "scripts": { From 0ba0d7b692cbe8ca51b3c95ec4877d1a314b6c0b Mon Sep 17 00:00:00 2001 From: Hendrik Scholz Date: Fri, 24 Aug 2018 08:42:27 +0200 Subject: [PATCH 14/41] made function IE compatible --- index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index c01b9fd..ff65af6 100644 --- a/index.js +++ b/index.js @@ -1,3 +1,9 @@ +if (!String.prototype.startsWith) { + String.prototype.startsWith = function(search, pos) { + return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search; + }; +} + function resizeBase64(base64String, maxWidth, maxHeight, successCallback, errorCallback) { if(base64String === undefined) { errorCallback('The input parameter base64String is undefined.'); @@ -34,7 +40,7 @@ function resizeBase64(base64String, maxWidth, maxHeight, successCallback, errorC let img = new Image(); img.src = base64String; - img.onload = () => { + img.onload = function() { // Determine new ratio based on max size let ratio = 1; if(img.width > maxWidth) { @@ -56,7 +62,7 @@ function resizeBase64(base64String, maxWidth, maxHeight, successCallback, errorC successCallback(canvas.toDataURL()); }; - img.onerror = () => { + img.onerror = function() { errorCallback('Error while loading image.'); }; } From 71ba9f280079ff6ff969a7bb36628d1cfc51a7f1 Mon Sep 17 00:00:00 2001 From: Hendrik Scholz Date: Fri, 24 Aug 2018 08:45:11 +0200 Subject: [PATCH 15/41] increased version number --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7e6a04e..a797b43 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "resize-base64", - "version": "1.0.18", + "version": "1.0.19", "description": "A function that resizes a Base64 image", "main": "index.js", "scripts": { From 1f8ded456820684db07e10f754fe03c9d88e9c95 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Fri, 24 Aug 2018 20:14:37 +0200 Subject: [PATCH 16/41] added test cases for input validation of height and width --- ...izeBase64ImageMaxHeightLessThan2Pixel.html | 26 +++++++++++++++++++ ...sizeBase64ImageMaxWidthLessThan2Pixel.html | 26 +++++++++++++++++++ 2 files changed, 52 insertions(+) create mode 100644 test/resizeBase64ImageMaxHeightLessThan2Pixel.html create mode 100644 test/resizeBase64ImageMaxWidthLessThan2Pixel.html diff --git a/test/resizeBase64ImageMaxHeightLessThan2Pixel.html b/test/resizeBase64ImageMaxHeightLessThan2Pixel.html new file mode 100644 index 0000000..04dd8e5 --- /dev/null +++ b/test/resizeBase64ImageMaxHeightLessThan2Pixel.html @@ -0,0 +1,26 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/test/resizeBase64ImageMaxWidthLessThan2Pixel.html b/test/resizeBase64ImageMaxWidthLessThan2Pixel.html new file mode 100644 index 0000000..ecf084c --- /dev/null +++ b/test/resizeBase64ImageMaxWidthLessThan2Pixel.html @@ -0,0 +1,26 @@ + + + + + + + + + + + \ No newline at end of file From 7cd9894e66aad2ad75683954cef76a9aac789867 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Sat, 25 Aug 2018 07:42:57 +0200 Subject: [PATCH 17/41] added files array to exclude test folder --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index a797b43..6afc4e1 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "resize-base64", "version": "1.0.19", "description": "A function that resizes a Base64 image", + "files": ["index.js", "README.md"], "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" From 817f8cfc794f037181a62b5d0c2f9759345f85f2 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Sat, 25 Aug 2018 07:56:39 +0200 Subject: [PATCH 18/41] added URL to issue tracker --- package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/package.json b/package.json index 6afc4e1..b629f37 100644 --- a/package.json +++ b/package.json @@ -18,5 +18,8 @@ { "name": "Hendrik Scholz" }], + "bugs": { + "url": "https://github.com/hendrik-scholz/resize-base64/issues" + }, "license": "ISC" } From 81ac51a8cc9b404fec11da805194402b278dca66 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Sat, 25 Aug 2018 21:08:46 +0200 Subject: [PATCH 19/41] added link to Angular example project --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 11ac765..8f5d30d 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,8 @@ import { resizeBase64 } from 'resize-base64'; Call the resize function as shown in the example below. +See https://github.com/hendrik-scholz/resize-base64-angular-example for details. + ## Test Tests have to be run with 'export { resizeBase64 };' commented out in the index.js. From acff59e84ce61f86a173f99ce664f51306f435a2 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Sat, 25 Aug 2018 21:19:28 +0200 Subject: [PATCH 20/41] fixed typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8f5d30d..ae392f4 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ A function that resizes a Base64 image. Pass a Base64 string of an image, the ma | base64String | the image to resize as a Base64 string | | maxWidth | the maxmium width that the image should be resized to | | maxHeight | the maxmium height that the image should be resized to | -| successCallback | the callback the contains the resized image as a Base64 string | +| successCallback | the callback that contains the resized image as a Base64 string | | errorCallback | the callback that contains the error that occurred during resizing | From 7343b0ef4bc23153568df70d441cf4833f8bc312 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Sun, 26 Aug 2018 11:32:17 +0200 Subject: [PATCH 21/41] edited input validation --- index.js | 18 +++++-------- package.json | 2 +- ... => resizeBase64ImageMaxHeight0Pixel.html} | 0 test/resizeBase64ImageMaxHeight1Pixel.html | 26 +++++++++++++++++++ ...l => resizeBase64ImageMaxWidth0Pixel.html} | 0 test/resizeBase64ImageMaxWidth1Pixel.html | 26 +++++++++++++++++++ 6 files changed, 59 insertions(+), 13 deletions(-) rename test/{resizeBase64ImageMaxHeightLessThan2Pixel.html => resizeBase64ImageMaxHeight0Pixel.html} (100%) create mode 100644 test/resizeBase64ImageMaxHeight1Pixel.html rename test/{resizeBase64ImageMaxWidthLessThan2Pixel.html => resizeBase64ImageMaxWidth0Pixel.html} (100%) create mode 100644 test/resizeBase64ImageMaxWidth1Pixel.html diff --git a/index.js b/index.js index ff65af6..d7cb845 100644 --- a/index.js +++ b/index.js @@ -5,26 +5,20 @@ if (!String.prototype.startsWith) { } function resizeBase64(base64String, maxWidth, maxHeight, successCallback, errorCallback) { - if(base64String === undefined) { - errorCallback('The input parameter base64String is undefined.'); - } else if(base64String === null) { - errorCallback('The input parameter base64String is null.'); + if(!base64String) { + errorCallback('The input parameter base64String is ' + base64String + '.'); } else if(typeof(base64String) != 'string') { errorCallback('The input parameter base64String is not of type \'string\'.'); } else if(!base64String.startsWith('data:image')) { errorCallback('The input parameter base64String does not start with \'data:image\'.'); - } else if(maxWidth === undefined) { - errorCallback('The input parameter maxWidth is undefined.'); - } else if(maxWidth === null) { - errorCallback('The input parameter maxWidth is null.'); + } else if(!maxWidth) { + errorCallback('The input parameter maxWidth is ' + maxWidth + '.'); } else if(typeof(maxWidth) != 'number') { errorCallback('The input parameter maxWidth is not of type \'number\'.'); } else if(maxWidth < 2) { errorCallback('The input parameter maxWidth must be at least 2 pixel.'); - } else if(maxHeight === undefined) { - errorCallback('The input parameter maxHeight is undefined.'); - } else if(maxHeight === null) { - errorCallback('The input parameter maxHeight is null.'); + } else if(!maxHeight) { + errorCallback('The input parameter maxHeight is ' + maxHeight + '.'); } else if(typeof(maxHeight) != 'number') { errorCallback('The input parameter maxHeight is not of type \'number\'.'); } else if(maxHeight < 2) { diff --git a/package.json b/package.json index b629f37..2ba2bee 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "resize-base64", - "version": "1.0.19", + "version": "1.0.20", "description": "A function that resizes a Base64 image", "files": ["index.js", "README.md"], "main": "index.js", diff --git a/test/resizeBase64ImageMaxHeightLessThan2Pixel.html b/test/resizeBase64ImageMaxHeight0Pixel.html similarity index 100% rename from test/resizeBase64ImageMaxHeightLessThan2Pixel.html rename to test/resizeBase64ImageMaxHeight0Pixel.html diff --git a/test/resizeBase64ImageMaxHeight1Pixel.html b/test/resizeBase64ImageMaxHeight1Pixel.html new file mode 100644 index 0000000..a14676c --- /dev/null +++ b/test/resizeBase64ImageMaxHeight1Pixel.html @@ -0,0 +1,26 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/test/resizeBase64ImageMaxWidthLessThan2Pixel.html b/test/resizeBase64ImageMaxWidth0Pixel.html similarity index 100% rename from test/resizeBase64ImageMaxWidthLessThan2Pixel.html rename to test/resizeBase64ImageMaxWidth0Pixel.html diff --git a/test/resizeBase64ImageMaxWidth1Pixel.html b/test/resizeBase64ImageMaxWidth1Pixel.html new file mode 100644 index 0000000..3fdc9b6 --- /dev/null +++ b/test/resizeBase64ImageMaxWidth1Pixel.html @@ -0,0 +1,26 @@ + + + + + + + + + + + \ No newline at end of file From ec0c73971672d4485eb4f2f564eff85a0f389062 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Sun, 26 Aug 2018 16:43:08 +0200 Subject: [PATCH 22/41] edited retrictions section and usage section --- README.md | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index ae392f4..2e1f800 100644 --- a/README.md +++ b/README.md @@ -10,10 +10,10 @@ A function that resizes a Base64 image. Pass a Base64 string of an image, the ma | successCallback | the callback that contains the resized image as a Base64 string | | errorCallback | the callback that contains the error that occurred during resizing | - ## Restrictions -The function can only be used in frontend code. +* The function can only be used in frontend code. +* Since enlarging images is not desirable due to the loss of quality, the function does not support it. Create a feature request for enlarging images if necessary. ## Installation @@ -36,19 +36,15 @@ where your package.json is saved. ### Angular -Add the following line to the TS file to import the resize function. - -``` -import { resizeBase64 } from 'resize-base64'; -``` +See https://github.com/hendrik-scholz/resize-base64-angular-example for details. -Call the resize function as shown in the example below. +### Vue -See https://github.com/hendrik-scholz/resize-base64-angular-example for details. +See https://github.com/hendrik-scholz/resize-base64-vue-example for details. ## Test -Tests have to be run with 'export { resizeBase64 };' commented out in the index.js. +The tests in the test folder have to be run with 'export { resizeBase64 };' commented out in the index.js. ## Example From 0673ee8514bdd83f0e400937539e523cc4da1b39 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Thu, 27 Sep 2018 19:59:57 +0200 Subject: [PATCH 23/41] moved input validation to separate function --- index.js | 128 +++++++++++++++++++++++++++++++------------------------ 1 file changed, 73 insertions(+), 55 deletions(-) diff --git a/index.js b/index.js index d7cb845..3c15221 100644 --- a/index.js +++ b/index.js @@ -4,62 +4,80 @@ if (!String.prototype.startsWith) { }; } +function validateInput(base64String, maxWidth, maxHeight) { + let validationResult = { + isValid: false, + errorMessage: 'An error occurred.' + }; + + if(!base64String) { + validationResult.errorMessage = 'The input parameter base64String is ' + base64String + '.'; + } else if(typeof(base64String) != 'string') { + validationResult.errorMessage = 'The input parameter base64String is not of type \'string\'.'; + } else if(!base64String.startsWith('data:image')) { + validationResult.errorMessage = 'The input parameter base64String does not start with \'data:image\'.'; + } else if(!maxWidth) { + validationResult.errorMessage = 'The input parameter maxWidth is ' + maxWidth + '.'; + } else if(typeof(maxWidth) != 'number') { + validationResult.errorMessage = 'The input parameter maxWidth is not of type \'number\'.'; + } else if(maxWidth < 2) { + validationResult.errorMessage = 'The input parameter maxWidth must be at least 2 pixel.'; + } else if(!maxHeight) { + validationResult.errorMessage = 'The input parameter maxHeight is ' + maxHeight + '.'; + } else if(typeof(maxHeight) != 'number') { + validationResult.errorMessage = 'The input parameter maxHeight is not of type \'number\'.'; + } else if(maxHeight < 2) { + validationResult.errorMessage = 'The input parameter maxHeight must be at least 2 pixel.'; + } else { + validationResult.isValid = true; + validationResult.errorMessage = null; + } + + return validationResult; +} + function resizeBase64(base64String, maxWidth, maxHeight, successCallback, errorCallback) { - if(!base64String) { - errorCallback('The input parameter base64String is ' + base64String + '.'); - } else if(typeof(base64String) != 'string') { - errorCallback('The input parameter base64String is not of type \'string\'.'); - } else if(!base64String.startsWith('data:image')) { - errorCallback('The input parameter base64String does not start with \'data:image\'.'); - } else if(!maxWidth) { - errorCallback('The input parameter maxWidth is ' + maxWidth + '.'); - } else if(typeof(maxWidth) != 'number') { - errorCallback('The input parameter maxWidth is not of type \'number\'.'); - } else if(maxWidth < 2) { - errorCallback('The input parameter maxWidth must be at least 2 pixel.'); - } else if(!maxHeight) { - errorCallback('The input parameter maxHeight is ' + maxHeight + '.'); - } else if(typeof(maxHeight) != 'number') { - errorCallback('The input parameter maxHeight is not of type \'number\'.'); - } else if(maxHeight < 2) { - errorCallback('The input parameter maxHeight must be at least 2 pixel.'); - } else { - // Create and initialize two canvas - let canvas = document.createElement("canvas"); - let ctx = canvas.getContext("2d"); - let canvasCopy = document.createElement("canvas"); - let copyContext = canvasCopy.getContext("2d"); - - // Create original image - let img = new Image(); - img.src = base64String; - - img.onload = function() { - // Determine new ratio based on max size - let ratio = 1; - if(img.width > maxWidth) { - ratio = maxWidth / img.width; - } else if(img.height > maxHeight) { - ratio = maxHeight / img.height; - } - - // Draw original image in second canvas - canvasCopy.width = img.width; - canvasCopy.height = img.height; - copyContext.drawImage(img, 0, 0); - - // Copy and resize second canvas to first canvas - canvas.width = img.width * ratio; - canvas.height = img.height * ratio; - ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height); - - successCallback(canvas.toDataURL()); - }; - - img.onerror = function() { - errorCallback('Error while loading image.'); - }; - } + let validationResult = validateInput(base64String, maxWidth, maxHeight); + + if(validationResult.isValid === true) { + // Create and initialize two canvas + let canvas = document.createElement("canvas"); + let ctx = canvas.getContext("2d"); + let canvasCopy = document.createElement("canvas"); + let copyContext = canvasCopy.getContext("2d"); + + // Create original image + let img = new Image(); + img.src = base64String; + + img.onload = function() { + // Determine new ratio based on max size + let ratio = 1; + if(img.width > maxWidth) { + ratio = maxWidth / img.width; + } else if(img.height > maxHeight) { + ratio = maxHeight / img.height; + } + + // Draw original image in second canvas + canvasCopy.width = img.width; + canvasCopy.height = img.height; + copyContext.drawImage(img, 0, 0); + + // Copy and resize second canvas to first canvas + canvas.width = img.width * ratio; + canvas.height = img.height * ratio; + ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height); + + successCallback(canvas.toDataURL()); + }; + + img.onerror = function() { + errorCallback('Error while loading image.'); + }; + } else { + errorCallback(validationResult.errorMessage); + } }; export { resizeBase64 }; \ No newline at end of file From c9b3358c7d180575ac968e27e7f3bb1c46be6e53 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Thu, 27 Sep 2018 21:15:50 +0200 Subject: [PATCH 24/41] created functions for proportional and free resizing --- README.md | 22 ++- index.js | 140 +++++++++++++----- package.json | 2 +- ...eBase64ImageFrom320x240ToMaxHeight120.html | 28 ++++ ...eBase64ImageFrom320x240ToMaxHeight480.html | 28 ++++ ...From320x240ToMaxWidth100xMaxHeight100.html | 28 ++++ ...eBase64ImageFrom320x240ToMaxWidth160.html} | 6 +- ...zeBase64ImageFrom320x240ToMaxWidth640.html | 28 ++++ .../resizeBase64ImageInvalidBase64String.html | 2 +- test/resizeBase64ImageInvalidPrefix.html | 2 +- test/resizeBase64ImageMaxHeight0Pixel.html | 2 +- test/resizeBase64ImageMaxHeight1Pixel.html | 2 +- ...zeBase64ImageMaxHeightNotOfTypeNumber.html | 2 +- test/resizeBase64ImageMaxHeightNull.html | 2 +- test/resizeBase64ImageMaxHeightUndefined.html | 2 +- test/resizeBase64ImageMaxWidth0Pixel.html | 2 +- test/resizeBase64ImageMaxWidth1Pixel.html | 2 +- ...izeBase64ImageMaxWidthNotOfTypeNumber.html | 2 +- test/resizeBase64ImageMaxWidthNull.html | 2 +- test/resizeBase64ImageMaxWidthUndefined.html | 2 +- test/resizeBase64ImageNotOfTypeString.html | 2 +- test/resizeBase64ImageNull.html | 2 +- test/resizeBase64ImageUndefined.html | 2 +- 23 files changed, 250 insertions(+), 62 deletions(-) create mode 100644 test/resizeBase64ImageFrom320x240ToMaxHeight120.html create mode 100644 test/resizeBase64ImageFrom320x240ToMaxHeight480.html create mode 100644 test/resizeBase64ImageFrom320x240ToMaxWidth100xMaxHeight100.html rename test/{resizeBase64ImageFrom320x240ToMax75x75.html => resizeBase64ImageFrom320x240ToMaxWidth160.html} (99%) create mode 100644 test/resizeBase64ImageFrom320x240ToMaxWidth640.html diff --git a/README.md b/README.md index 2e1f800..411942d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,12 @@ # resize-base64 -A function that resizes a Base64 image. Pass a Base64 string of an image, the maximum width, the maximum size, a success callback, and an error callback to the function. The function returns the resized image in the success callback. +Functions that resize a Base64 image. Pass a Base64 string of an image, the maximum width, the maximum size, a success callback, and an error callback to the function. The function returns the resized image in the success callback. + +| Function | Description | +| ------ | ----------- | +| resizeBase64ForMaxWidth | resizes an image to the maximum width, the aspect ratio of the image is maintained | +| resizeBase64ForMaxHeight | resizes an image to the maximum height, the aspect ratio of the image is maintained | +| resizeBase64ForMaxWidthAndMaxHeight | resizes an image to the maximum width and maximum height given, the aspect ratio of the image is not maintained | | Parameter | Description | | ------ | ----------- | @@ -44,7 +50,11 @@ See https://github.com/hendrik-scholz/resize-base64-vue-example for details. ## Test -The tests in the test folder have to be run with 'export { resizeBase64 };' commented out in the index.js. +The tests in the test folder have to be run with the following lines commented out in the index.js: + +export { resizeBase64ForMaxWidth }; +export { resizeBase64ForMaxHeight }; +export { resizeBase64ForMaxWidthAndMaxHeight }; ## Example @@ -56,8 +66,8 @@ The tests in the test folder have to be run with 'export { resizeBase64 };' comm @@ -79,4 +89,4 @@ The tests in the test folder have to be run with 'export { resizeBase64 };' comm ``` -See test/resizeBase64ImageFrom320x240ToMax75x75.html for details. \ No newline at end of file +See test/resizeBase64ImageFrom320x240ToMaxHeight120.html for details. \ No newline at end of file diff --git a/index.js b/index.js index 3c15221..84af277 100644 --- a/index.js +++ b/index.js @@ -4,6 +4,8 @@ if (!String.prototype.startsWith) { }; } +const DEFAULT_RATION = 1; + function validateInput(base64String, maxWidth, maxHeight) { let validationResult = { isValid: false, @@ -36,48 +38,112 @@ function validateInput(base64String, maxWidth, maxHeight) { return validationResult; } -function resizeBase64(base64String, maxWidth, maxHeight, successCallback, errorCallback) { +function maxWidthRatioFunction(imageWidth, imageHeight, targetWidth, targetHeight) { + let ratio = DEFAULT_RATION; + + if(imageWidth > targetWidth) { + ratio = targetWidth / imageWidth; + } + + return { + width: ratio, + height: ratio + }; +} + +function maxHeightRatioFunction(imageWidth, imageHeight, targetWidth, targetHeight) { + let ratio = DEFAULT_RATION; + + if(imageHeight > targetHeight) { + ratio = targetHeight / imageHeight; + } + + return { + width: ratio, + height: ratio + }; +} + +function maxWidthMaxHeightRationFunction(imageWidth, imageHeight, targetWidth, targetHeight) { + let widthRation = DEFAULT_RATION; + let heightRation = DEFAULT_RATION; + + if(imageWidth > targetWidth && + imageHeight > targetHeight) { + widthRation = targetWidth / imageWidth; + heightRation = targetHeight / imageHeight; + } + + return { + width: widthRation, + height: heightRation + }; +} + +function resizeBase64ForMaxWidth(base64String, maxWidth, maxHeight, successCallback, errorCallback) { let validationResult = validateInput(base64String, maxWidth, maxHeight); if(validationResult.isValid === true) { - // Create and initialize two canvas - let canvas = document.createElement("canvas"); - let ctx = canvas.getContext("2d"); - let canvasCopy = document.createElement("canvas"); - let copyContext = canvasCopy.getContext("2d"); - - // Create original image - let img = new Image(); - img.src = base64String; - - img.onload = function() { - // Determine new ratio based on max size - let ratio = 1; - if(img.width > maxWidth) { - ratio = maxWidth / img.width; - } else if(img.height > maxHeight) { - ratio = maxHeight / img.height; - } - - // Draw original image in second canvas - canvasCopy.width = img.width; - canvasCopy.height = img.height; - copyContext.drawImage(img, 0, 0); - - // Copy and resize second canvas to first canvas - canvas.width = img.width * ratio; - canvas.height = img.height * ratio; - ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height); - - successCallback(canvas.toDataURL()); - }; - - img.onerror = function() { - errorCallback('Error while loading image.'); - }; + resizeBase64(base64String, maxWidth, maxHeight, maxWidthRatioFunction, successCallback, errorCallback); } else { errorCallback(validationResult.errorMessage); } +} + +function resizeBase64ForMaxHeight(base64String, maxWidth, maxHeight, successCallback, errorCallback) { + let validationResult = validateInput(base64String, maxWidth, maxHeight); + + if(validationResult.isValid === true) { + resizeBase64(base64String, maxWidth, maxHeight, maxHeightRatioFunction, successCallback, errorCallback); + } else { + errorCallback(validationResult.errorMessage); + } +} + +function resizeBase64ForMaxWidthAndMaxHeight(base64String, maxWidth, maxHeight, successCallback, errorCallback) { + let validationResult = validateInput(base64String, maxWidth, maxHeight); + + if(validationResult.isValid === true) { + resizeBase64(base64String, maxWidth, maxHeight, maxWidthMaxHeightRationFunction, successCallback, errorCallback); + } else { + errorCallback(validationResult.errorMessage); + } +} + +function resizeBase64(base64String, maxWidth, maxHeight, ratioFunction, successCallback, errorCallback) { + // Create and initialize two canvas + let canvas = document.createElement("canvas"); + let ctx = canvas.getContext("2d"); + let canvasCopy = document.createElement("canvas"); + let copyContext = canvasCopy.getContext("2d"); + + // Create original image + let img = new Image(); + img.src = base64String; + + img.onload = function() { + let rationResult = ratioFunction(img.width, img.height, maxWidth, maxHeight); + widthRatio = rationResult.width; + heightRatio = rationResult.height; + + // Draw original image in second canvas + canvasCopy.width = img.width; + canvasCopy.height = img.height; + copyContext.drawImage(img, 0, 0); + + // Copy and resize second canvas to first canvas + canvas.width = img.width * widthRatio; + canvas.height = img.height * heightRatio; + ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height); + + successCallback(canvas.toDataURL()); + }; + + img.onerror = function() { + errorCallback('Error while loading image.'); + }; }; -export { resizeBase64 }; \ No newline at end of file +export { resizeBase64ForMaxWidth }; +export { resizeBase64ForMaxHeight }; +export { resizeBase64ForMaxWidthAndMaxHeight }; \ No newline at end of file diff --git a/package.json b/package.json index 2ba2bee..6c90679 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "resize-base64", - "version": "1.0.20", + "version": "1.1.0", "description": "A function that resizes a Base64 image", "files": ["index.js", "README.md"], "main": "index.js", diff --git a/test/resizeBase64ImageFrom320x240ToMaxHeight120.html b/test/resizeBase64ImageFrom320x240ToMaxHeight120.html new file mode 100644 index 0000000..2a996e7 --- /dev/null +++ b/test/resizeBase64ImageFrom320x240ToMaxHeight120.html @@ -0,0 +1,28 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/resizeBase64ImageFrom320x240ToMaxHeight480.html b/test/resizeBase64ImageFrom320x240ToMaxHeight480.html new file mode 100644 index 0000000..8fed3e0 --- /dev/null +++ b/test/resizeBase64ImageFrom320x240ToMaxHeight480.html @@ -0,0 +1,28 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/resizeBase64ImageFrom320x240ToMaxWidth100xMaxHeight100.html b/test/resizeBase64ImageFrom320x240ToMaxWidth100xMaxHeight100.html new file mode 100644 index 0000000..5f33f34 --- /dev/null +++ b/test/resizeBase64ImageFrom320x240ToMaxWidth100xMaxHeight100.html @@ -0,0 +1,28 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/resizeBase64ImageFrom320x240ToMax75x75.html b/test/resizeBase64ImageFrom320x240ToMaxWidth160.html similarity index 99% rename from test/resizeBase64ImageFrom320x240ToMax75x75.html rename to test/resizeBase64ImageFrom320x240ToMaxWidth160.html index d8e00a8..fb2a61e 100644 --- a/test/resizeBase64ImageFrom320x240ToMax75x75.html +++ b/test/resizeBase64ImageFrom320x240ToMaxWidth160.html @@ -5,8 +5,8 @@ diff --git a/test/resizeBase64ImageFrom320x240ToMaxWidth640.html b/test/resizeBase64ImageFrom320x240ToMaxWidth640.html new file mode 100644 index 0000000..adc5153 --- /dev/null +++ b/test/resizeBase64ImageFrom320x240ToMaxWidth640.html @@ -0,0 +1,28 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/resizeBase64ImageInvalidBase64String.html b/test/resizeBase64ImageInvalidBase64String.html index bc31def..c0a41b5 100644 --- a/test/resizeBase64ImageInvalidBase64String.html +++ b/test/resizeBase64ImageInvalidBase64String.html @@ -16,7 +16,7 @@ alert(errorMessage); }; - resizeBase64(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); + resizeBase64ForMaxWidthAndMaxHeight(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); diff --git a/test/resizeBase64ImageInvalidPrefix.html b/test/resizeBase64ImageInvalidPrefix.html index 3d1a40c..1ce980c 100644 --- a/test/resizeBase64ImageInvalidPrefix.html +++ b/test/resizeBase64ImageInvalidPrefix.html @@ -16,7 +16,7 @@ alert(errorMessage); }; - resizeBase64(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); + resizeBase64ForMaxWidthAndMaxHeight(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); diff --git a/test/resizeBase64ImageMaxHeight0Pixel.html b/test/resizeBase64ImageMaxHeight0Pixel.html index 04dd8e5..463252e 100644 --- a/test/resizeBase64ImageMaxHeight0Pixel.html +++ b/test/resizeBase64ImageMaxHeight0Pixel.html @@ -17,7 +17,7 @@ alert(errorMessage); }; - resizeBase64(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); + resizeBase64ForMaxWidthAndMaxHeight(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); diff --git a/test/resizeBase64ImageMaxHeight1Pixel.html b/test/resizeBase64ImageMaxHeight1Pixel.html index a14676c..1915940 100644 --- a/test/resizeBase64ImageMaxHeight1Pixel.html +++ b/test/resizeBase64ImageMaxHeight1Pixel.html @@ -17,7 +17,7 @@ alert(errorMessage); }; - resizeBase64(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); + resizeBase64ForMaxWidthAndMaxHeight(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); diff --git a/test/resizeBase64ImageMaxHeightNotOfTypeNumber.html b/test/resizeBase64ImageMaxHeightNotOfTypeNumber.html index bdbe453..f7cba77 100644 --- a/test/resizeBase64ImageMaxHeightNotOfTypeNumber.html +++ b/test/resizeBase64ImageMaxHeightNotOfTypeNumber.html @@ -16,7 +16,7 @@ alert(errorMessage); }; - resizeBase64(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); + resizeBase64ForMaxWidthAndMaxHeight(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); diff --git a/test/resizeBase64ImageMaxHeightNull.html b/test/resizeBase64ImageMaxHeightNull.html index 7c818a9..9157f59 100644 --- a/test/resizeBase64ImageMaxHeightNull.html +++ b/test/resizeBase64ImageMaxHeightNull.html @@ -16,7 +16,7 @@ alert(errorMessage); }; - resizeBase64(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); + resizeBase64ForMaxWidthAndMaxHeight(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); diff --git a/test/resizeBase64ImageMaxHeightUndefined.html b/test/resizeBase64ImageMaxHeightUndefined.html index ca0a7e0..59f08b0 100644 --- a/test/resizeBase64ImageMaxHeightUndefined.html +++ b/test/resizeBase64ImageMaxHeightUndefined.html @@ -16,7 +16,7 @@ alert(errorMessage); }; - resizeBase64(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); + resizeBase64ForMaxWidthAndMaxHeight(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); diff --git a/test/resizeBase64ImageMaxWidth0Pixel.html b/test/resizeBase64ImageMaxWidth0Pixel.html index ecf084c..25d6ad4 100644 --- a/test/resizeBase64ImageMaxWidth0Pixel.html +++ b/test/resizeBase64ImageMaxWidth0Pixel.html @@ -17,7 +17,7 @@ alert(errorMessage); }; - resizeBase64(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); + resizeBase64ForMaxWidthAndMaxHeight(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); diff --git a/test/resizeBase64ImageMaxWidth1Pixel.html b/test/resizeBase64ImageMaxWidth1Pixel.html index 3fdc9b6..bab5966 100644 --- a/test/resizeBase64ImageMaxWidth1Pixel.html +++ b/test/resizeBase64ImageMaxWidth1Pixel.html @@ -17,7 +17,7 @@ alert(errorMessage); }; - resizeBase64(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); + resizeBase64ForMaxWidthAndMaxHeight(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); diff --git a/test/resizeBase64ImageMaxWidthNotOfTypeNumber.html b/test/resizeBase64ImageMaxWidthNotOfTypeNumber.html index be4586a..d98b064 100644 --- a/test/resizeBase64ImageMaxWidthNotOfTypeNumber.html +++ b/test/resizeBase64ImageMaxWidthNotOfTypeNumber.html @@ -16,7 +16,7 @@ alert(errorMessage); }; - resizeBase64(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); + resizeBase64ForMaxWidthAndMaxHeight(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); diff --git a/test/resizeBase64ImageMaxWidthNull.html b/test/resizeBase64ImageMaxWidthNull.html index f82acbd..8d01297 100644 --- a/test/resizeBase64ImageMaxWidthNull.html +++ b/test/resizeBase64ImageMaxWidthNull.html @@ -16,7 +16,7 @@ alert(errorMessage); }; - resizeBase64(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); + resizeBase64ForMaxWidthAndMaxHeight(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); diff --git a/test/resizeBase64ImageMaxWidthUndefined.html b/test/resizeBase64ImageMaxWidthUndefined.html index bf69534..b5872e3 100644 --- a/test/resizeBase64ImageMaxWidthUndefined.html +++ b/test/resizeBase64ImageMaxWidthUndefined.html @@ -16,7 +16,7 @@ alert(errorMessage); }; - resizeBase64(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); + resizeBase64ForMaxWidthAndMaxHeight(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); diff --git a/test/resizeBase64ImageNotOfTypeString.html b/test/resizeBase64ImageNotOfTypeString.html index af0d85b..f19ff31 100644 --- a/test/resizeBase64ImageNotOfTypeString.html +++ b/test/resizeBase64ImageNotOfTypeString.html @@ -16,7 +16,7 @@ alert(errorMessage); }; - resizeBase64(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); + resizeBase64ForMaxWidthAndMaxHeight(base64Image_320x240, maxWidth, maxHeight, successCallback, errorCallback); diff --git a/test/resizeBase64ImageNull.html b/test/resizeBase64ImageNull.html index dda6d89..764bfa8 100644 --- a/test/resizeBase64ImageNull.html +++ b/test/resizeBase64ImageNull.html @@ -16,7 +16,7 @@ alert(errorMessage); }; - resizeBase64(base64ImageError, maxWidth, maxHeight, successCallback, errorCallback); + resizeBase64ForMaxWidthAndMaxHeight(base64ImageError, maxWidth, maxHeight, successCallback, errorCallback); diff --git a/test/resizeBase64ImageUndefined.html b/test/resizeBase64ImageUndefined.html index 3bc5ae5..d808a99 100644 --- a/test/resizeBase64ImageUndefined.html +++ b/test/resizeBase64ImageUndefined.html @@ -16,7 +16,7 @@ alert(errorMessage); }; - resizeBase64(base64ImageError, maxWidth, maxHeight, successCallback, errorCallback); + resizeBase64ForMaxWidthAndMaxHeight(base64ImageError, maxWidth, maxHeight, successCallback, errorCallback); From 844f1a41a7b1b394287a0eccc354b308af68cdde Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Thu, 27 Sep 2018 21:18:40 +0200 Subject: [PATCH 25/41] edited description --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 411942d..fffd534 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,9 @@ Functions that resize a Base64 image. Pass a Base64 string of an image, the maxi | ------ | ----------- | | resizeBase64ForMaxWidth | resizes an image to the maximum width, the aspect ratio of the image is maintained | | resizeBase64ForMaxHeight | resizes an image to the maximum height, the aspect ratio of the image is maintained | -| resizeBase64ForMaxWidthAndMaxHeight | resizes an image to the maximum width and maximum height given, the aspect ratio of the image is not maintained | +| resizeBase64ForMaxWidthAndMaxHeight | resizes an image to the maximum width and maximum height, the aspect ratio of the image is not maintained | + +Every function takes the parameters listed below. | Parameter | Description | | ------ | ----------- | From e1859fa3f3a0d20da16723610a3ecd626693e641 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Thu, 27 Sep 2018 21:32:47 +0200 Subject: [PATCH 26/41] added ration for width and height --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 84af277..558ad53 100644 --- a/index.js +++ b/index.js @@ -123,8 +123,8 @@ function resizeBase64(base64String, maxWidth, maxHeight, ratioFunction, successC img.onload = function() { let rationResult = ratioFunction(img.width, img.height, maxWidth, maxHeight); - widthRatio = rationResult.width; - heightRatio = rationResult.height; + let widthRatio = rationResult.width; + let heightRatio = rationResult.height; // Draw original image in second canvas canvasCopy.width = img.width; From f658ec050927682c534f76f34e62d7f86357b27a Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Thu, 27 Sep 2018 21:36:06 +0200 Subject: [PATCH 27/41] increased version number --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6c90679..53f1701 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "resize-base64", - "version": "1.1.0", + "version": "1.1.1", "description": "A function that resizes a Base64 image", "files": ["index.js", "README.md"], "main": "index.js", From 5de13bce8c99062f41fee88f3f8fc25b12cbad14 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Thu, 27 Sep 2018 22:08:08 +0200 Subject: [PATCH 28/41] edited test description --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index fffd534..26f5f42 100644 --- a/README.md +++ b/README.md @@ -54,9 +54,11 @@ See https://github.com/hendrik-scholz/resize-base64-vue-example for details. The tests in the test folder have to be run with the following lines commented out in the index.js: +``` export { resizeBase64ForMaxWidth }; export { resizeBase64ForMaxHeight }; export { resizeBase64ForMaxWidthAndMaxHeight }; +``` ## Example From d3fc503c5f87e66871c68637cec4a4d31bca2b27 Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Sat, 29 Sep 2018 17:33:29 +0200 Subject: [PATCH 29/41] fixed typo --- index.js | 28 ++++++++++++++-------------- package.json | 2 +- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/index.js b/index.js index 558ad53..d53088d 100644 --- a/index.js +++ b/index.js @@ -4,7 +4,7 @@ if (!String.prototype.startsWith) { }; } -const DEFAULT_RATION = 1; +const DEFAULT_RATIO = 1; function validateInput(base64String, maxWidth, maxHeight) { let validationResult = { @@ -39,7 +39,7 @@ function validateInput(base64String, maxWidth, maxHeight) { } function maxWidthRatioFunction(imageWidth, imageHeight, targetWidth, targetHeight) { - let ratio = DEFAULT_RATION; + let ratio = DEFAULT_RATIO; if(imageWidth > targetWidth) { ratio = targetWidth / imageWidth; @@ -52,7 +52,7 @@ function maxWidthRatioFunction(imageWidth, imageHeight, targetWidth, targetHeigh } function maxHeightRatioFunction(imageWidth, imageHeight, targetWidth, targetHeight) { - let ratio = DEFAULT_RATION; + let ratio = DEFAULT_RATIO; if(imageHeight > targetHeight) { ratio = targetHeight / imageHeight; @@ -64,19 +64,19 @@ function maxHeightRatioFunction(imageWidth, imageHeight, targetWidth, targetHeig }; } -function maxWidthMaxHeightRationFunction(imageWidth, imageHeight, targetWidth, targetHeight) { - let widthRation = DEFAULT_RATION; - let heightRation = DEFAULT_RATION; +function maxWidthMaxHeightRatioFunction(imageWidth, imageHeight, targetWidth, targetHeight) { + let widthRatio = DEFAULT_RATIO; + let heightRatio = DEFAULT_RATIO; if(imageWidth > targetWidth && imageHeight > targetHeight) { - widthRation = targetWidth / imageWidth; - heightRation = targetHeight / imageHeight; + widthRatio = targetWidth / imageWidth; + heightRatio = targetHeight / imageHeight; } return { - width: widthRation, - height: heightRation + width: widthRatio, + height: heightRatio }; } @@ -104,7 +104,7 @@ function resizeBase64ForMaxWidthAndMaxHeight(base64String, maxWidth, maxHeight, let validationResult = validateInput(base64String, maxWidth, maxHeight); if(validationResult.isValid === true) { - resizeBase64(base64String, maxWidth, maxHeight, maxWidthMaxHeightRationFunction, successCallback, errorCallback); + resizeBase64(base64String, maxWidth, maxHeight, maxWidthMaxHeightRatioFunction, successCallback, errorCallback); } else { errorCallback(validationResult.errorMessage); } @@ -122,9 +122,9 @@ function resizeBase64(base64String, maxWidth, maxHeight, ratioFunction, successC img.src = base64String; img.onload = function() { - let rationResult = ratioFunction(img.width, img.height, maxWidth, maxHeight); - let widthRatio = rationResult.width; - let heightRatio = rationResult.height; + let ratioResult = ratioFunction(img.width, img.height, maxWidth, maxHeight); + let widthRatio = ratioResult.width; + let heightRatio = ratioResult.height; // Draw original image in second canvas canvasCopy.width = img.width; diff --git a/package.json b/package.json index 53f1701..5d01d11 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "resize-base64", - "version": "1.1.1", + "version": "1.1.2", "description": "A function that resizes a Base64 image", "files": ["index.js", "README.md"], "main": "index.js", From 94faa3e64d1d951212379418537c59971a2dd10a Mon Sep 17 00:00:00 2001 From: hendrik-scholz Date: Thu, 1 Nov 2018 15:23:21 +0100 Subject: [PATCH 30/41] changed way of test execution --- README.md | 14 +++++--------- ...resizeBase64ImageFrom320x240ToMaxHeight120.html | 5 +++-- ...resizeBase64ImageFrom320x240ToMaxHeight480.html | 5 +++-- ...ImageFrom320x240ToMaxWidth100xMaxHeight100.html | 5 +++-- .../resizeBase64ImageFrom320x240ToMaxWidth160.html | 5 +++-- .../resizeBase64ImageFrom320x240ToMaxWidth640.html | 5 +++-- test/resizeBase64ImageInvalidBase64String.html | 5 +++-- test/resizeBase64ImageInvalidPrefix.html | 5 +++-- test/resizeBase64ImageMaxHeight0Pixel.html | 5 +++-- test/resizeBase64ImageMaxHeight1Pixel.html | 5 +++-- .../resizeBase64ImageMaxHeightNotOfTypeNumber.html | 5 +++-- test/resizeBase64ImageMaxHeightNull.html | 5 +++-- test/resizeBase64ImageMaxHeightUndefined.html | 5 +++-- test/resizeBase64ImageMaxWidth0Pixel.html | 5 +++-- test/resizeBase64ImageMaxWidth1Pixel.html | 5 +++-- test/resizeBase64ImageMaxWidthNotOfTypeNumber.html | 5 +++-- test/resizeBase64ImageMaxWidthNull.html | 5 +++-- test/resizeBase64ImageMaxWidthUndefined.html | 5 +++-- test/resizeBase64ImageNotOfTypeString.html | 5 +++-- test/resizeBase64ImageNull.html | 5 +++-- test/resizeBase64ImageUndefined.html | 5 +++-- 21 files changed, 65 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index 26f5f42..ba0996c 100644 --- a/README.md +++ b/README.md @@ -52,13 +52,8 @@ See https://github.com/hendrik-scholz/resize-base64-vue-example for details. ## Test -The tests in the test folder have to be run with the following lines commented out in the index.js: - -``` -export { resizeBase64ForMaxWidth }; -export { resizeBase64ForMaxHeight }; -export { resizeBase64ForMaxWidthAndMaxHeight }; -``` +1. Copy the index.js and the test folder with all its files to an HTTP server. +2. Request the HTML file for the test case in the browser, e.g. http://localhost/resize-base64/test/resizeBase64ImageFrom320x240ToMaxHeight120.html ## Example @@ -67,8 +62,9 @@ export { resizeBase64ForMaxWidthAndMaxHeight }; - - - - - - - - - - - - - - - - - - - - - -