-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.tsx
53 lines (46 loc) · 1.28 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import type { NextPage } from 'next'
// import Head from 'next/head'
// import Image from 'next/image'
import { useCallback, useEffect, useState } from 'react'
import image from '../public/cat.gif'
const Home: NextPage = () => {
const imgUrl = image.src
const [newUrl, setNewUrl] = useState('')
const lookGifInfo = useCallback(async () => {
const { buildInputFile, execute } = await import('@xn-sakina/image-magick')
const { stdout, stderr, exitCode, outputFiles } = await execute({
inputFiles: [await buildInputFile(imgUrl, 'image.gif')],
commands: [
`convert image.gif -coalesce -crop 140x140+160+70 +repage -resize 200x100! -layers optimize result.gif`,
],
})
const file = outputFiles?.[0]
if (file?.blob) {
setNewUrl(window.URL.createObjectURL(file.blob))
}
}, [])
useEffect(() => {
if (process.browser) {
lookGifInfo()
}
}, [])
return (
<div style={{ margin: 20 }}>
<div>
origin:
<img
src={imgUrl}
alt="gif"
style={{
width: 400,
}}
/>
</div>
<div style={{ marginTop: 20 }}>
new:
{newUrl && <img src={newUrl} alt="result-gif" style={{ width: 140 }} />}
</div>
</div>
)
}
export default Home