Skip to content

Commit

Permalink
Merge pull request #80 from Donaldcwl/dev
Browse files Browse the repository at this point in the history 
Release of v1.0.13
  • Loading branch information
@Donaldcwl
Donaldcwl authored Nov 8, 2020
2 parents 9fcc363 + fc8e929 commit b775715
Show file tree
Hide file tree
Showing 27 changed files with 624 additions and 393 deletions.
3 changes: 3 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,3 +89,6 @@ Temporary Items
.idea/
dist/
/example/*/yarn.lock

.next/
build/
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
## v1.0.13 (11 Aug 2020)
* added: new option for setting initial quality level [#64](https://github.com/Donaldcwl/browser-image-compression/issues/64), [#78](https://github.com/Donaldcwl/browser-image-compression/issues/78)
* fixed: options object being altered by the compress func [#71](https://github.com/Donaldcwl/browser-image-compression/pull/71)
* fixed: issue with output size of png compression [#57](https://github.com/Donaldcwl/browser-image-compression/issues/57)

## v1.0.12 (4 June 2020)
* fixed: issue with SSR [#58](https://github.com/Donaldcwl/browser-image-compression/issues/58)

Expand Down
11 changes: 7 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ yarn add browser-image-compression
```
or use a CDN like [delivrjs]:
```
https://cdn.jsdelivr.net/npm/browser-image-compression@1.0.12/dist/browser-image-compression.js
https://cdn.jsdelivr.net/npm/browser-image-compression@1.0.13/dist/browser-image-compression.js
or
https://cdn.jsdelivr.net/npm/browser-image-compression@latest/dist/browser-image-compression.js
```
Expand All @@ -37,7 +37,7 @@ or

#### In html file ####
```html
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browser-image-compression@latest/dist/browser-image-compression.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browser-image-compression@1.0.13/dist/browser-image-compression.js"></script>
```

## API ##
Expand All @@ -47,11 +47,14 @@ 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)
onProgress: Function, // optional, a function takes one progress argument (percentage from 0 to 100)
useWebWorker: boolean, // optional, use multi-thread web worker, fallback to run in main-thread (default: true)

// following options are for advanced user
maxIteration: number, // optional, max number of iteration to compress the image (default: 10)
exifOrientation: number, // optional, see https://stackoverflow.com/a/32490603/10395024
onProgress: Function, // optional, a function takes one progress argument (percentage from 0 to 100)
fileType: string // optional, fileType override
fileType: string, // optional, fileType override
initialQuality: number // optional, initial quality value between 0 and 1 (default: 1)
}

imageCompression(file: File, options): Promise<File | Blob>
Expand Down
2 changes: 1 addition & 1 deletion coverage/badge.svg
View file
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

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions coverage/coverage-summary.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{"total": {"lines":{"total":206,"covered":167,"skipped":0,"pct":81.07},"statements":{"total":220,"covered":169,"skipped":0,"pct":76.82},"functions":{"total":28,"covered":24,"skipped":0,"pct":85.71},"branches":{"total":105,"covered":60,"skipped":0,"pct":57.14}}
,"D:\\Projects\\browser-image-compression\\lib\\image-compression.js": {"lines":{"total":47,"covered":47,"skipped":0,"pct":100},"functions":{"total":3,"covered":3,"skipped":0,"pct":100},"statements":{"total":47,"covered":47,"skipped":0,"pct":100},"branches":{"total":24,"covered":20,"skipped":0,"pct":83.33}}
{"total": {"lines":{"total":219,"covered":173,"skipped":0,"pct":79},"statements":{"total":226,"covered":175,"skipped":0,"pct":77.43},"functions":{"total":28,"covered":24,"skipped":0,"pct":85.71},"branches":{"total":107,"covered":61,"skipped":0,"pct":57.01}}
,"D:\\Projects\\browser-image-compression\\lib\\image-compression.js": {"lines":{"total":53,"covered":53,"skipped":0,"pct":100},"functions":{"total":3,"covered":3,"skipped":0,"pct":100},"statements":{"total":53,"covered":53,"skipped":0,"pct":100},"branches":{"total":26,"covered":21,"skipped":0,"pct":80.77}}
,"D:\\Projects\\browser-image-compression\\lib\\index.js": {"lines":{"total":30,"covered":27,"skipped":0,"pct":90},"functions":{"total":2,"covered":2,"skipped":0,"pct":100},"statements":{"total":30,"covered":27,"skipped":0,"pct":90},"branches":{"total":19,"covered":13,"skipped":0,"pct":68.42}}
,"D:\\Projects\\browser-image-compression\\lib\\utils.js": {"lines":{"total":129,"covered":93,"skipped":0,"pct":72.09},"functions":{"total":23,"covered":19,"skipped":0,"pct":82.61},"statements":{"total":143,"covered":95,"skipped":0,"pct":66.43},"branches":{"total":62,"covered":27,"skipped":0,"pct":43.55}}
,"D:\\Projects\\browser-image-compression\\lib\\utils.js": {"lines":{"total":136,"covered":93,"skipped":0,"pct":68.38},"functions":{"total":23,"covered":19,"skipped":0,"pct":82.61},"statements":{"total":143,"covered":95,"skipped":0,"pct":66.43},"branches":{"total":62,"covered":27,"skipped":0,"pct":43.55}}
}
82 changes: 56 additions & 26 deletions coverage/image-compression.js.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,14 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Statements</span>
<span class='fraction'>47/47</span>
<span class='fraction'>53/53</span>
</div>


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


Expand All @@ -46,7 +46,7 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Lines</span>
<span class='fraction'>47/47</span>
<span class='fraction'>53/53</span>
</div>


Expand Down Expand Up @@ -170,7 +170,19 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
<a name='L111'></a><a href='#L111'>111</a>
<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></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
<a name='L114'></a><a href='#L114'>114</a>
<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></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>
Expand Down Expand Up @@ -203,8 +215,8 @@ <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">15x</span>
<span class="cline-any cline-yes">15x</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">9x</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>
Expand Down Expand Up @@ -237,6 +249,9 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
<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-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 @@ -253,25 +268,30 @@ <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-yes">2x</span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</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 All @@ -298,13 +318,15 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
* Compress an image file.
*
* @param {File} file
* @param {Object} options - { maxSizeMB=Number.POSITIVE_INFINITY, maxWidthOrHeight, useWebWorker=false, maxIteration = 10, exifOrientation, fileType }
* @param {Object} options
* @param {number} [options.maxSizeMB=Number.POSITIVE_INFINITY]
* @param {number} [options.maxWidthOrHeight=undefined]
* @param {boolean} [options.useWebWorker=false]
* @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)
* @param {string} [options.fileType] - default to be the original mime type from the image file
* @param {number} [options.initialQuality=1.0]
* @returns {Promise&lt;File | Blob&gt;}
*/
export default async function compress (file, options) {
Expand Down Expand Up @@ -337,14 +359,17 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
incProgress()
&nbsp;
// exifOrientation
options.exifOrientation = options.exifOrientation || <span class="branch-1 cbranch-no" title="branch not covered" >await getExifOrientation(file)</span>
const exifOrientation = options.exifOrientation || <span class="branch-1 cbranch-no" title="branch not covered" >await getExifOrientation(file)</span>
incProgress()
const orientationFixedCanvas = (await isAutoOrientationInBrowser) ? <span class="branch-0 cbranch-no" title="branch not covered" >maxWidthOrHeightFixedCanvas </span>: followExifOrientation(maxWidthOrHeightFixedCanvas, options.exifOrientation)
const orientationFixedCanvas = (await isAutoOrientationInBrowser) ? <span class="branch-0 cbranch-no" title="branch not covered" >maxWidthOrHeightFixedCanvas </span>: followExifOrientation(maxWidthOrHeightFixedCanvas, exifOrientation)
incProgress()
&nbsp;
let quality = 1
let quality = options.initialQuality || 1.0
&nbsp;
let tempFile = await canvasToFile(orientationFixedCanvas, options.fileType || file.type, file.name, file.lastModified, quality)
const tempFileType = 'image/jpeg'
const outputFileType = options.fileType || file.type
&nbsp;
let tempFile = await canvasToFile(orientationFixedCanvas, outputFileType, file.name, file.lastModified, quality)
incProgress()
&nbsp;
const origExceedMaxSize = tempFile.size &gt; maxSizeByte
Expand Down Expand Up @@ -374,10 +399,10 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
&nbsp;
ctx.drawImage(canvas, 0, 0, newWidth, newHeight)
&nbsp;
if (file.type === 'image/jpeg') {
<span class="missing-if-branch" title="else path not taken" >E</span>if (tempFileType === 'image/jpeg') {
quality *= 0.95
}
compressedFile = await canvasToFile(newCanvas, options.fileType || file.type, file.name, file.lastModified, quality)
compressedFile = await canvasToFile(newCanvas, tempFileType, file.name, file.lastModified, quality)
&nbsp;
cleanupCanvasMemory(canvas)
&nbsp;
Expand All @@ -386,6 +411,11 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
currentSize = compressedFile.size
setProgress(Math.min(99, Math.floor((renderedSize - currentSize) / (renderedSize - maxSizeByte) * 100)))
}
if (tempFileType !== outputFileType) {
compressedFile = new Blob([compressedFile], { type: outputFileType })
compressedFile.name = file.name
compressedFile.lastModified = file.lastModified
}
&nbsp;
cleanupCanvasMemory(canvas)
cleanupCanvasMemory(newCanvas)
Expand All @@ -403,7 +433,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 Thu Jun 04 2020 13:37:49 GMT+0800 (香港標準時間)
at Sun Nov 08 2020 23:03:52 GMT+0800 (Hong Kong Standard Time)
</div>
</div>
<script src="prettify.js"></script>
Expand Down
26 changes: 13 additions & 13 deletions coverage/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@ <h1>All files</h1>
<div class='clearfix'>

<div class='fl pad1y space-right2'>
<span class="strong">76.82% </span>
<span class="strong">77.43% </span>
<span class="quiet">Statements</span>
<span class='fraction'>169/220</span>
<span class='fraction'>175/226</span>
</div>


<div class='fl pad1y space-right2'>
<span class="strong">57.14% </span>
<span class="strong">57.01% </span>
<span class="quiet">Branches</span>
<span class='fraction'>60/105</span>
<span class='fraction'>61/107</span>
</div>


Expand All @@ -44,9 +44,9 @@ <h1>All files</h1>


<div class='fl pad1y space-right2'>
<span class="strong">81.07% </span>
<span class="strong">79% </span>
<span class="quiet">Lines</span>
<span class='fraction'>167/206</span>
<span class='fraction'>173/219</span>
</div>


Expand Down Expand Up @@ -78,13 +78,13 @@ <h1>All files</h1>
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="47" class="abs high">47/47</td>
<td data-value="83.33" class="pct high">83.33%</td>
<td data-value="24" class="abs high">20/24</td>
<td data-value="53" class="abs high">53/53</td>
<td data-value="80.77" class="pct high">80.77%</td>
<td data-value="26" class="abs high">21/26</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="3" class="abs high">3/3</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="47" class="abs high">47/47</td>
<td data-value="53" class="abs high">53/53</td>
</tr>

<tr>
Expand Down Expand Up @@ -113,8 +113,8 @@ <h1>All files</h1>
<td data-value="62" class="abs low">27/62</td>
<td data-value="82.61" class="pct high">82.61%</td>
<td data-value="23" class="abs high">19/23</td>
<td data-value="72.09" class="pct medium">72.09%</td>
<td data-value="129" class="abs medium">93/129</td>
<td data-value="68.38" class="pct medium">68.38%</td>
<td data-value="136" class="abs medium">93/136</td>
</tr>

</tbody>
Expand All @@ -125,7 +125,7 @@ <h1>All files</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 Thu Jun 04 2020 13:37:49 GMT+0800 (香港標準時間)
at Sun Nov 08 2020 23:03:52 GMT+0800 (Hong Kong Standard Time)
</div>
</div>
<script src="prettify.js"></script>
Expand Down
4 changes: 2 additions & 2 deletions coverage/index.js.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -333,7 +333,7 @@ <h1><a href="index.html">All files</a> index.js</h1>
imageCompression.handleMaxWidthOrHeight = handleMaxWidthOrHeight
imageCompression.followExifOrientation = followExifOrientation
imageCompression.cleanupMemory = cleanupCanvasMemory
imageCompression.version = '1.0.12'
imageCompression.version = '1.0.13'
&nbsp;
export default imageCompression
&nbsp;</pre></td></tr></table></pre>
Expand All @@ -343,7 +343,7 @@ <h1><a href="index.html">All files</a> index.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 Thu Jun 04 2020 13:37:49 GMT+0800 (香港標準時間)
at Sun Nov 08 2020 23:03:52 GMT+0800 (Hong Kong Standard Time)
</div>
</div>
<script src="prettify.js"></script>
Expand Down
Loading

0 comments on commit b775715

Please sign in to comment.