Skip to content

[feature] Ability to specify maxWidth or maxHeight #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

[feature] Ability to specify maxWidth or maxHeight #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3d0cd72
add maxWidth and maxHeight
initplatform Apr 9, 2020
6f0c1a2
readme
initplatform Apr 9, 2020
e93cf17
build for dist
initplatform Apr 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ or
const options = {
maxSizeMB: number, // (default: Number.POSITIVE_INFINITY)
maxWidthOrHeight: number, // compressedFile will scale down by ratio to a point that width or height is smaller than maxWidthOrHeight (default: undefined)
maxWidth: number, // compressedFile will scale down by ratio to a point that width smaller than maxWidth (default: undefined)
maxHeight: number, // compressedFile will scale down by ratio to a point that height is smaller than maxHeight (default: undefined)
useWebWorker: boolean, // optional, use multi-thread web worker, fallback to run in main-thread (default: true)
maxIteration: number, // optional, max number of iteration to compress the image (default: 10)
exifOrientation: number, // optional, see https://stackoverflow.com/a/32490603/10395024
Expand Down
2 changes: 1 addition & 1 deletion coverage/badge.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions coverage/coverage-final.json
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions coverage/coverage-summary.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{"total": {"lines":{"total":197,"covered":156,"skipped":0,"pct":79.19},"statements":{"total":211,"covered":158,"skipped":0,"pct":74.88},"functions":{"total":26,"covered":22,"skipped":0,"pct":84.62},"branches":{"total":101,"covered":56,"skipped":0,"pct":55.45}}
,"/Users/donald/Project/browser-image-compression/lib/image-compression.js": {"lines":{"total":49,"covered":47,"skipped":0,"pct":95.92},"functions":{"total":3,"covered":3,"skipped":0,"pct":100},"statements":{"total":49,"covered":47,"skipped":0,"pct":95.92},"branches":{"total":26,"covered":21,"skipped":0,"pct":80.77}}
,"/Users/donald/Project/browser-image-compression/lib/index.js": {"lines":{"total":28,"covered":25,"skipped":0,"pct":89.29},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":28,"covered":25,"skipped":0,"pct":89.29},"branches":{"total":17,"covered":12,"skipped":0,"pct":70.59}}
,"/Users/donald/Project/browser-image-compression/lib/utils.js": {"lines":{"total":120,"covered":84,"skipped":0,"pct":70},"functions":{"total":22,"covered":18,"skipped":0,"pct":81.82},"statements":{"total":134,"covered":86,"skipped":0,"pct":64.18},"branches":{"total":58,"covered":23,"skipped":0,"pct":39.66}}
{"total": {"lines":{"total":227,"covered":186,"skipped":0,"pct":81.94},"statements":{"total":241,"covered":188,"skipped":0,"pct":78.01},"functions":{"total":28,"covered":24,"skipped":0,"pct":85.71},"branches":{"total":113,"covered":66,"skipped":0,"pct":58.41}}
,"/Users/sam/Projects/browser-image-compression/lib/image-compression.js": {"lines":{"total":53,"covered":51,"skipped":0,"pct":96.23},"functions":{"total":3,"covered":3,"skipped":0,"pct":100},"statements":{"total":53,"covered":51,"skipped":0,"pct":96.23},"branches":{"total":30,"covered":25,"skipped":0,"pct":83.33}}
,"/Users/sam/Projects/browser-image-compression/lib/index.js": {"lines":{"total":30,"covered":27,"skipped":0,"pct":90},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":30,"covered":27,"skipped":0,"pct":90},"branches":{"total":17,"covered":12,"skipped":0,"pct":70.59}}
,"/Users/sam/Projects/browser-image-compression/lib/utils.js": {"lines":{"total":144,"covered":108,"skipped":0,"pct":75},"functions":{"total":24,"covered":20,"skipped":0,"pct":83.33},"statements":{"total":158,"covered":110,"skipped":0,"pct":69.62},"branches":{"total":66,"covered":29,"skipped":0,"pct":43.94}}
}
109 changes: 71 additions & 38 deletions coverage/image-compression.js.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
<div class='clearfix'>

<div class='fl pad1y space-right2'>
<span class="strong">95.92% </span>
<span class="strong">96.23% </span>
<span class="quiet">Statements</span>
<span class='fraction'>47/49</span>
<span class='fraction'>51/53</span>
</div>


<div class='fl pad1y space-right2'>
<span class="strong">80.77% </span>
<span class="strong">83.33% </span>
<span class="quiet">Branches</span>
<span class='fraction'>21/26</span>
<span class='fraction'>25/30</span>
</div>


Expand All @@ -44,9 +44,9 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>


<div class='fl pad1y space-right2'>
<span class="strong">95.92% </span>
<span class="strong">96.23% </span>
<span class="quiet">Lines</span>
<span class='fraction'>47/49</span>
<span class='fraction'>51/53</span>
</div>


Expand Down Expand Up @@ -171,7 +171,21 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
<a name='L112'></a><a href='#L112'>112</a>
<a name='L113'></a><a href='#L113'>113</a>
<a name='L114'></a><a href='#L114'>114</a>
<a name='L115'></a><a href='#L115'>115</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
<a name='L115'></a><a href='#L115'>115</a>
<a name='L116'></a><a href='#L116'>116</a>
<a name='L117'></a><a href='#L117'>117</a>
<a name='L118'></a><a href='#L118'>118</a>
<a name='L119'></a><a href='#L119'>119</a>
<a name='L120'></a><a href='#L120'>120</a>
<a name='L121'></a><a href='#L121'>121</a>
<a name='L122'></a><a href='#L122'>122</a>
<a name='L123'></a><a href='#L123'>123</a>
<a name='L124'></a><a href='#L124'>124</a>
<a name='L125'></a><a href='#L125'>125</a>
<a name='L126'></a><a href='#L126'>126</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
Expand All @@ -195,57 +209,65 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">36x</span>
<span class="cline-any cline-yes">36x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">48x</span>
<span class="cline-any cline-yes">48x</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">15x</span>
<span class="cline-any cline-yes">15x</span>
<span class="cline-any cline-yes">17x</span>
<span class="cline-any cline-yes">17x</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">4x</span>
<span class="cline-any cline-yes">4x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">8x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">2x</span>
Expand Down Expand Up @@ -292,16 +314,20 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
followExifOrientation,
getExifOrientation,
getNewCanvasAndCtx,
handleMaxWidthOrHeight
handleMaxWidthOrHeight,
handleMaxWidth,
handleMaxHeight
} from './utils'
&nbsp;
/**
* Compress an image file.
*
* @param {File} file
* @param {Object} options - { maxSizeMB=Number.POSITIVE_INFINITY, maxWidthOrHeight, useWebWorker=false, maxIteration = 10, exifOrientation, fileType }
* @param {Object} options - { maxSizeMB=Number.POSITIVE_INFINITY, maxWidthOrHeight, maxWidth, maxHeight, useWebWorker=false, maxIteration = 10, exifOrientation, fileType }
* @param {number} [options.maxSizeMB=Number.POSITIVE_INFINITY]
* @param {number} [options.maxWidthOrHeight=undefined]
* @param {number} [options.maxWidth=undefined]
* @param {number} [options.maxHeight=undefined]
* @param {number} [options.maxIteration=10]
* @param {number} [options.exifOrientation] - default to be the exif orientation from the image file
* @param {Function} [options.onProgress] - a function takes one progress argument (progress from 0 to 100)
Expand Down Expand Up @@ -336,15 +362,22 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
&nbsp;
incProgress()
&nbsp;
// handleMaxWidthOrHeight
const maxWidthOrHeightFixedCanvas = handleMaxWidthOrHeight(origCanvas, options)
// handleMaxDimensions
let maxDimensionsCanvas = handleMaxWidthOrHeight(origCanvas, options)
&nbsp;
if (Number.isFinite(options.maxWidth)) {
maxDimensionsCanvas = handleMaxWidth(origCanvas, options)
}
if (Number.isFinite(options.maxHeight)) {
maxDimensionsCanvas = handleMaxHeight(origCanvas, options)
}
&nbsp;
incProgress()
&nbsp;
// exifOrientation
options.exifOrientation = options.exifOrientation || <span class="branch-1 cbranch-no" title="branch not covered" >await getExifOrientation(file)</span>
incProgress()
const orientationFixedCanvas = followExifOrientation(maxWidthOrHeightFixedCanvas, options.exifOrientation)
const orientationFixedCanvas = followExifOrientation(maxDimensionsCanvas, options.exifOrientation)
incProgress()
&nbsp;
let quality = 1
Expand Down Expand Up @@ -392,7 +425,7 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
// ref: https://bugs.webkit.org/show_bug.cgi?id=195325
cleanupCanvasMemory(canvas)
cleanupCanvasMemory(newCanvas)
cleanupCanvasMemory(maxWidthOrHeightFixedCanvas)
cleanupCanvasMemory(maxDimensionsCanvas)
cleanupCanvasMemory(orientationFixedCanvas)
cleanupCanvasMemory(origCanvas)
&nbsp;
Expand All @@ -406,7 +439,7 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
at Wed Mar 25 2020 23:40:22 GMT+0800 (Hong Kong Standard Time)
at Thu Apr 09 2020 14:56:55 GMT-0400 (Eastern Daylight Time)
</div>
</div>
<script src="prettify.js"></script>
Expand Down
Loading