Skip to content

Commit f205579

Browse files
DonaldcwlDonaldcwl
authored
Merge pull request #65 from Donaldcwl/fix-SSR
resolve #58
2 parents 6b6d85d + 61b4338 commit f205579

File tree

4 files changed

+190
-2
lines changed

4 files changed

+190
-2
lines changed

‎example/Nextjs App/package.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "learn-starter",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start"
9+
},
10+
"dependencies": {
11+
"next": "9.3.5",
12+
"react": "16.13.1",
13+
"react-dom": "16.13.1"
14+
}
15+
}

‎example/Nextjs App/pages/index.js

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
import React from 'react'
2+
import imageCompression from 'browser-image-compression'
3+
4+
export default class App extends React.Component {
5+
constructor (...args) {
6+
super(...args)
7+
this.compressImage = this.compressImage.bind(this)
8+
this.handleChange = this.handleChange.bind(this)
9+
this.state = {
10+
maxSizeMB: 1,
11+
maxWidthOrHeight: 1024,
12+
webWorker: {
13+
progress: null,
14+
inputSize: null,
15+
outputSize: null,
16+
inputUrl: null,
17+
outputUrl: null
18+
},
19+
mainThread: {
20+
progress: null,
21+
inputSize: null,
22+
outputSize: null,
23+
inputUrl: null,
24+
outputUrl: null
25+
}
26+
}
27+
}
28+
29+
handleChange (target) {
30+
return (e) => {
31+
this.setState({ [target]: e.currentTarget.value })
32+
}
33+
}
34+
35+
onProgress (p, useWebWorker) {
36+
const targetName = useWebWorker ? 'webWorker' : 'mainThread'
37+
this.setState(prevState => ({
38+
...prevState,
39+
[targetName]: {
40+
...prevState[targetName],
41+
progress: p
42+
}
43+
}))
44+
}
45+
46+
async compressImage (event, useWebWorker) {
47+
const file = event.target.files[0]
48+
console.log('input', file)
49+
console.log(
50+
'ExifOrientation',
51+
await imageCompression.getExifOrientation(file)
52+
)
53+
const targetName = useWebWorker ? 'webWorker' : 'mainThread'
54+
this.setState(prevState => ({
55+
...prevState,
56+
[targetName]: {
57+
...prevState[targetName],
58+
inputSize: (file.size / 1024 / 1024).toFixed(2),
59+
inputUrl: URL.createObjectURL(file)
60+
}
61+
}))
62+
var options = {
63+
maxSizeMB: this.state.maxSizeMB,
64+
maxWidthOrHeight: this.state.maxWidthOrHeight,
65+
useWebWorker,
66+
onProgress: p => this.onProgress(p, useWebWorker)
67+
}
68+
const output = await imageCompression(file, options)
69+
console.log('output', output)
70+
this.setState(prevState => ({
71+
...prevState,
72+
[targetName]: {
73+
...prevState[targetName],
74+
outputSize: (output.size / 1024 / 1024).toFixed(2),
75+
outputUrl: URL.createObjectURL(output)
76+
}
77+
}))
78+
}
79+
80+
render () {
81+
const { webWorker, mainThread, maxSizeMB, maxWidthOrHeight } = this.state
82+
return (
83+
<div className="App">
84+
<div>
85+
Options:<br />
86+
<label htmlFor="maxSizeMB">maxSizeMB: <input type="number" id="maxSizeMB" name="maxSizeMB"
87+
value={maxSizeMB}
88+
onChange={this.handleChange('maxSizeMB')} /></label><br />
89+
<label htmlFor="maxWidthOrHeight">maxWidthOrHeight: <input type="number" id="maxWidthOrHeight"
90+
name="maxWidthOrHeight"
91+
value={maxWidthOrHeight}
92+
onChange={this.handleChange('maxWidthOrHeight')} /></label>
93+
<hr />
94+
<label htmlFor="web-worker">
95+
Compress in web-worker{' '}
96+
{webWorker.progress && <span>{webWorker.progress} %</span>}
97+
<input
98+
id="web-worker"
99+
type="file"
100+
accept="image/*"
101+
onChange={e => this.compressImage(e, true)}
102+
/>
103+
</label>
104+
<p>
105+
{webWorker.inputSize && (
106+
<span>Source image size: {webWorker.inputSize} mb</span>
107+
)}
108+
{webWorker.outputSize && (
109+
<span>, Output image size: {webWorker.outputSize}</span>
110+
)}
111+
</p>
112+
</div>
113+
<div>
114+
<label htmlFor="main-thread">
115+
Compress in main-thread{' '}
116+
{mainThread.progress && <span>{mainThread.progress} %</span>}
117+
<input
118+
id="main-thread"
119+
type="file"
120+
accept="image/*"
121+
onChange={e => this.compressImage(e, false)}
122+
/>
123+
</label>
124+
<p>
125+
{mainThread.inputSize && (
126+
<span>Source image size: {mainThread.inputSize} mb</span>
127+
)}
128+
{mainThread.outputSize && (
129+
<span>, Output image size: {mainThread.outputSize}</span>
130+
)}
131+
</p>
132+
</div>
133+
{(mainThread.inputUrl || webWorker.inputUrl) && (
134+
<table>
135+
<thead>
136+
<tr>
137+
<td>input preview</td>
138+
<td>output preview</td>
139+
</tr>
140+
</thead>
141+
<tbody>
142+
<tr>
143+
<td><img src={mainThread.inputUrl || webWorker.inputUrl} alt="input" /></td>
144+
<td><img src={mainThread.outputUrl || webWorker.outputUrl} alt="output" /></td>
145+
</tr>
146+
</tbody>
147+
</table>
148+
)}
149+
<style jsx>{`
150+
.App {
151+
font-family: sans-serif;
152+
}
153+
154+
table,
155+
th,
156+
td {
157+
border: 1px solid black;
158+
border-collapse: collapse;
159+
}
160+
161+
td {
162+
vertical-align: top;
163+
width: 50%;
164+
}
165+
166+
img {
167+
max-width: 100%;
168+
}
169+
`}</style>
170+
</div>
171+
)
172+
}
173+
};

‎example/Nextjs App/public/favicon.ico

14.7 KB
Binary file not shown.

‎lib/utils.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const CustomFileReader = isBrowser && ((moduleMapper && moduleMapper.getO
77

88
// Check if browser supports automatic image orientation
99
// see https://github.com/blueimp/JavaScript-Load-Image/blob/1e4df707821a0afcc11ea0720ee403b8759f3881/js/load-image-orientation.js#L37-L53
10-
export const isAutoOrientationInBrowser = (async () => {
10+
export const isAutoOrientationInBrowser = isBrowser && (async () => {
1111
// black 2x1 JPEG, with the following meta information set:
1212
// EXIF Orientation: 6 (Rotated 90° CCW)
1313
const testImageURL =
@@ -56,7 +56,7 @@ export function getFilefromDataUrl (dataUrl, filename, lastModified = Date.now()
5656
return new Promise((resolve) => {
5757
const arr = dataUrl.split(',')
5858
const mime = arr[0].match(/:(.*?);/)[1]
59-
const bstr = atob(arr[1])
59+
const bstr = window.atob(arr[1])
6060
let n = bstr.length
6161
const u8arr = new Uint8Array(n)
6262
while (n--) {

0 commit comments

Comments
 (0)