├── .gitignore
├── .prettierrc
├── README.md
├── package.json
├── poi.config.js
├── src
    ├── components
    │   └── App.vue
    ├── css
    │   └── global.css
    └── index.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true
4 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # video2gif
 2 | 
 3 | > Convert Video (MP4/OGG/WEBM) to GIF.
 4 | 
 5 | You known that GIF is saved as Video on Twitter, I made this tool to convert those tiny videos to GIFs by using HTML Canvas. Due to performance issue this is not suited for any video that's longer than 10 seconds.
 6 | 
 7 | https://video2gif.egoist.sh
 8 | 
 9 | Example: https://video2gif.egoist.sh?video=https://video.twimg.com/tweet_video/D2aI3aFUkAE84AW.mp4 (Remote video doesn't work on FireFox because of CORS Policy)
10 | 
11 | ## Prior Art
12 | 
13 | [tweet2gif](https://github.com/idiotWu/tweet2gif/).
14 | 
15 | ## Browser Support
16 | 
17 | Doesn't seem to work on Safari.
18 | 
19 | ## License
20 | 
21 | MIT.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "video2gif",
 3 |   "description": "Convert Video to GIF",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "build": "poi --prod",
 7 |     "dev": "poi --serve"
 8 |   },
 9 |   "devDependencies": {
10 |     "gif.js": "^0.2.0",
11 |     "poi": "^12.4.2",
12 |     "vue": "^2.6.10",
13 |     "vue-router": "^3.0.2",
14 |     "vue-template-compiler": "^2.6.10"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/poi.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   entry: 'src/index.js'
3 | }


--------------------------------------------------------------------------------
/src/components/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <header class="header">
  4 |       <h1 class="site-title">Convert Video to GIF</h1>
  5 |     </header>
  6 |     <div class="select-file" @click="$refs.file.click()">Select .mp4 / .ogg / .webm file</div>
  7 |     <input
  8 |       type="file"
  9 |       ref="file"
 10 |       aria-label="Select file"
 11 |       style="display:none"
 12 |       @change="handleFile"
 13 |       accept=".mp4, .ogg, .webm"
 14 |     >
 15 |     <div class="preview">
 16 |       <div v-if="videoUrl" class="preview-item">
 17 |         <video crossorigin="anonymous" class="video" :src="videoUrl" muted loop controls></video>
 18 |       </div>
 19 |       <div v-if="videoUrl" class="preview-item">
 20 |         <img v-if="gif" class="gif" :src="gif" alt>
 21 |         <div v-else class="progress">{{ progress }}</div>
 22 |       </div>
 23 |     </div>
 24 |     <footer class="footer">
 25 |       Made by
 26 |       <a href="https://egoist.sh" target="_blank">EGOIST</a> -
 27 |       <a href="https://github.com/egoist/video2gif" target="_blank">Read Source Code on GitHub</a>
 28 |     </footer>
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script>
 33 | import GIF from 'gif.js'
 34 | import workerScript from '!file-loader!gif.js/dist/gif.worker'
 35 | 
 36 | export default {
 37 |   data() {
 38 |     return {
 39 |       videoUrl: this.$route.query.video,
 40 |       gif: null,
 41 |       videoWidth: 800,
 42 |       progress: null
 43 |     }
 44 |   },
 45 | 
 46 |   watch: {
 47 |     progress() {
 48 |       console.log(this.progress)
 49 |     }
 50 |   },
 51 | 
 52 |   mounted() {
 53 |     if (this.videoUrl) {
 54 |       this.convert()
 55 |     }
 56 |   },
 57 | 
 58 |   methods: {
 59 |     async handleFile(e) {
 60 |       this.videoUrl = URL.createObjectURL(e.target.files[0])
 61 |       await this.convert()
 62 |     },
 63 | 
 64 |     reset() {
 65 |       this.gif = null
 66 |       this.progress = null
 67 |     },
 68 | 
 69 |     async convert() {
 70 |       this.reset()
 71 |       const video = await this.createVideo(this.videoUrl)
 72 |       const blob = await this.encodeGIF(video)
 73 |       const gifUrl = URL.createObjectURL(blob)
 74 |       this.gif = gifUrl
 75 |     },
 76 | 
 77 |     createVideo(url) {
 78 |       const video = document.createElement('video')
 79 | 
 80 |       video.crossOrigin = 'anonymous'
 81 |       video.muted = true
 82 |       video.src = url
 83 |       video.width = this.videoWidth
 84 | 
 85 |       this.progress = `Loading video..`
 86 | 
 87 |       return new Promise((resolve, reject) => {
 88 |         video.onerror = reject
 89 |         video.addEventListener('loadeddata', () => resolve(video))
 90 |       })
 91 |     },
 92 | 
 93 |     async encodeGIF(video) {
 94 |       this.progress = 'Converting..'
 95 | 
 96 |       const canvas = document.createElement('canvas')
 97 |       const ctx = canvas.getContext('2d')
 98 | 
 99 |       const width = (canvas.width =
100 |         this.videoWidth > video.videoWidth ? video.videoWidth : this.videoWidth)
101 |       const widthRatio = width / video.videoWidth
102 |       const height = (canvas.height = widthRatio * video.videoHeight)
103 | 
104 |       const gif = new GIF({
105 |         width,
106 |         height,
107 |         workers: 4,
108 |         workerScript
109 |       })
110 | 
111 |       return new Promise((resolve, reject) => {
112 |         let lastTime = video.currentTime
113 |         let lastPixels
114 | 
115 |         const capture = () => {
116 |           ctx.drawImage(video, 0, 0, width, height)
117 |           const pixels = ctx.getImageData(0, 0, width, height)
118 | 
119 |           const duration = video.currentTime - lastTime
120 |           this.progress = `Reading Video ${((video.currentTime /
121 |             video.duration) *
122 |             100) |
123 |             0}%..`
124 | 
125 |           if (!lastPixels || !isSameFrame(lastPixels, pixels)) {
126 |             lastPixels = pixels
127 |             lastTime = video.currentTime
128 | 
129 |             gif.addFrame(canvas, {
130 |               copy: true,
131 |               delay: duration * 1000
132 |             })
133 |           }
134 | 
135 |           if (!video.ended) {
136 |             requestAnimationFrame(capture)
137 |           } else {
138 |             gif.render()
139 |           }
140 |         }
141 | 
142 |         requestAnimationFrame(capture)
143 | 
144 |         gif.on('finished', blob => {
145 |           resolve(blob)
146 |         })
147 | 
148 |         gif.on('progress', p => {
149 |           this.progress = `Converting ${(p * 100) | 0}%..`
150 |         })
151 | 
152 |         video.play()
153 |         video.onerror = reject
154 |       })
155 |     }
156 |   }
157 | }
158 | 
159 | // let width = 400
160 | // let height = video.videoHeight
161 | // let heightRatio = 1
162 | // if (video.videoWidth > 400) {
163 | //   heightRatio = 400 / video.videoWidth
164 | // }
165 | // height = height * heightRatio
166 | 
167 | // canvas.height = height
168 | // canvas.width = width
169 | function isSameFrame(a, b) {
170 |   if (a.data.length !== b.data.length) {
171 |     return false
172 |   }
173 | 
174 |   const max = a.data.length
175 | 
176 |   for (let i = 0; i < max; i++) {
177 |     if (a.data[i] !== b.data[i]) {
178 |       return false
179 |     }
180 |   }
181 | 
182 |   return true
183 | }
184 | </script>
185 | 
186 | <style scoped>
187 | #app {
188 |   max-width: 500px;
189 |   margin: 0 auto;
190 |   padding: 10px;
191 | }
192 | 
193 | .select-file {
194 |   border: 3px dashed #ccc;
195 |   border-radius: 3px;
196 |   padding: 40px 10px;
197 |   text-align: center;
198 | }
199 | 
200 | .select-file:hover {
201 |   background: #f9f9f9;
202 |   cursor: pointer;
203 | }
204 | 
205 | .video,
206 | .gif {
207 |   width: 100%;
208 | }
209 | 
210 | .preview-item {
211 |   margin-top: 20px;
212 | }
213 | 
214 | .footer {
215 |   margin-top: 20px;
216 |   padding-top: 20px;
217 |   border-top: 1px solid #e2e2e2;
218 | }
219 | </style>
220 | 


--------------------------------------------------------------------------------
/src/css/global.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 3 |   margin: 0;
 4 |   text-rendering: optimizeLegibility;
 5 |   -webkit-font-smoothing: antialiased;
 6 | }
 7 | 
 8 | * {
 9 |   box-sizing: border-box;
10 | }
11 | 
12 | a {
13 |   text-decoration: none;
14 |   color: blue;
15 | }
16 | 
17 | a:hover {
18 |   text-decoration: underline;
19 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import './css/global.css'
 2 | import Vue from 'vue'
 3 | import Router from 'vue-router'
 4 | import App from './components/App.vue'
 5 | 
 6 | Vue.use(Router)
 7 | 
 8 | const router = new Router({
 9 |   mode: 'history',
10 |   routes: [
11 |     {
12 |       path: '/',
13 |       component: App
14 |     }
15 |   ]
16 | })
17 | 
18 | new Vue({
19 |   el: '#app',
20 |   router,
21 |   render: h => h('router-view')
22 | })
23 | 


--------------------------------------------------------------------------------