feature: GIF support Merge pull request #7 from HomeArchbishop/main

feature: GIF support

document.js

@@ -83,6 +83,13 @@ const request = (method,uri,data,callback)=>{
 	}).then(res => res.json()).then(data => callback(data)).catch(error => console.error(error))
 };
 
+const isGIF = async (src) => {
+  return await fetch(src)
+    .then(response => response.arrayBuffer())
+    .then(arrBuff => new Uint8Array(arrBuff).map(byte => byte.toString(16).padStart(2, '0')).slice(0, 4).join(''))
+    .then(str => str === '47494638')
+    .catch(() => null)
+}
 
 
 const isImageRegex = /^image\/(.+)$/;
@@ -118,6 +125,9 @@ let defaultConfig = {
 };
 
 const userNamesText = `卜卜口
+拆家大主教
+HomeArchbishop
+_Home_Archbishop_
 _蒸_気_機_
 能不能好好说话
 神奇海螺_0000
@@ -189,6 +199,8 @@ const data = {
 	src:'totoro-avatar.jpg',
 	// src:'hibike-capture.png',
 	// src:'IMG_7076.JPG',
+  // src: 'chiya.gif',
+  // src: 'panda.gif',
 	output:null,
 	img:null,
 	direction:'vertical',
@@ -199,7 +211,11 @@ const data = {
 	width:400,
 	userNamesText,
 	superMode:false,
-  convoluteNames
+  convoluteNames,
+  isGIF: false,
+  isLoadingGIF: false,
+  isPackingGIF: false,
+  lastConfig: {}
 };
 
 
@@ -210,14 +226,18 @@ const app = new Vue({
 	data,
 	methods:{
 		patina(){
-			patina(this.$refs.img,this.config,app)
+      if (this.isGIF) {
+        patinaGIF(this.$refs.img,this.config,app)
+      } else {
+        patina(this.$refs.img,this.config,app)
+      }
 		},
 		_patina(){
 
 			clearTimeout(this.T)
 			this.T = setTimeout(this.patina,300)
 		},
-		load(){
+		async load(){
 			const imageEl = this.$refs.img;
 			let _width  = imageEl.naturalWidth;
 			let _height = imageEl.naturalHeight;
@@ -226,6 +246,8 @@ const app = new Vue({
 			let scale = _width / _height;
 			let direction = scale > 1.2 ? 'horizontal' : 'vertical';
 
+      this.isGIF = await isGIF(imageEl.src)
+
 			app.direction = direction;
 			app.patina();
 		},
@@ -249,7 +271,9 @@ const app = new Vue({
 				console.log(config)
 				const maxWidth = config.maxWidth;
 				document.documentElement.style.setProperty('--max-width', `${maxWidth}px`);
-				this._patina();
+				if (!this.isGIF) {
+          this._patina();
+        }
 			}
 		},
 		userNamesText(text){
@@ -260,7 +284,9 @@ const app = new Vue({
 		}
 	},
 	computed:{
-
+		isShouldRedoGIF () {
+      return JSON.stringify(this.lastConfig) !== JSON.stringify(this.config)
+    }
 	}
 })
 

document.less

@@ -28,6 +28,7 @@ button,input{
 }
 a{
 	color:#34a133;
+	cursor: pointer;
 }
 ::selection{
 	background: #215200;
@@ -251,6 +252,13 @@ blockquote{
 	padding:15px;
     p{
         margin:0;
+		time{
+			opacity: 0.5;
+			&:after{
+				content: ':';
+				margin-right:.1em;
+			}
+		}
     }
 }
 .post-box{

index.html

@@ -10,14 +10,15 @@ <h1>电子包浆 图片赛博做旧</h1>
         <p>给表情赋予年份</p>
     </header>
     <div class="output-box" :data-direction="direction">
-        <img class="source-image" :src="src" ref="img" @load="load()" :data-width="`${width}px`">
+        <img class="source-image" :src="src" ref="img" @load="load()" :data-width="`${width}px`" rel:auto_play="0">
         <img class="output-image" :src="output" v-if="output" :data-width="`${width}px`">
     </div>
 
     <div class="ctrl-box" v-if="config" v-cloak>
         <div class="input-box">
             <button @click="chooseFileAndSetImageSrc">选择或粘贴拖拽图片</button>
             <button @click="save">保存图片</button>
+            <button v-if="isShouldRedoGIF && isGIF" @click="_patina">重新渲染GIF</button>
         </div>
         <div class="input-box" style="padding:10px 0;">
             <label>
@@ -28,11 +29,15 @@ <h1>电子包浆 图片赛博做旧</h1>
                 <input type="checkbox" v-model="config.watermark">
                 水印
             </label>
-            <label>
+            <label v-if="!isGIF">
                 <input type="checkbox" v-model="config.isPop">
                 波普
             </label>
-            <span v-if="current" style="display:inline-block;width:5em;text-align:right">{{current}}/{{config.isPop?config.pop*config.pop:config.round}}</span>
+            <span style="display:inline-block;text-align:right;margin-left:3em;">
+                <span v-if="isLoadingGIF">正在读取 GIF...</span>
+                <span v-else-if="isPackingGIF">正在生成 GIF...</span>
+                <span v-else-if="current">{{current}}/{{config.isPop?config.pop*config.pop:config.round}}</span>
+            </span>
             <!-- <input type="range" min=1 max=100 step="1" v-model.number="config.green"> {{config.green}} -->
         </div>
 
@@ -187,6 +192,14 @@ <h4>卷积 <small>convolute</small></h4>
     <blockquote>
         <h2>「电子包浆」 图片做旧工具，赛博包浆虚拟器🤢</h2>
         <p>&nbsp;</p>
+        <p>
+            <time>220802</time>
+            支持 <b>GIF</b> 动图啦！
+            <a @click="src='chiya.gif'">试一试</a>
+            <a href="https://github.com/itorr/patina/pull/7" target="_blank">#7</a>
+            <a href="https://github.com/HomeArchbishop" target="_blank">@拆家大主教</a>
+        </p>
+        <p>&nbsp;</p>
         <p>支持 <b>图片绿化</b>、<b>虚拟水印</b>、<b>虚拟传播年份</b>、<b>高效率模糊</b>、<b>浮雕锐化</b>、<b>噪点颗粒</b>、<b>像素不对齐</b>、<b>作假多次包浆绿化</b> 和 基础 <b>对比度</b>、<b>亮度</b>调整 以及 <b>波普重复</b>功能😈</p>
         <p>&nbsp;</p>
         <p>水印用户名可自定义</p>
@@ -210,7 +223,7 @@ <h2>「电子包浆」 图片做旧工具，赛博包浆虚拟器🤢</h2>
             <br>
             <a href="https://weibo.com/1197780522/Lmoup2eDs" target="_blank">转发到微博</a>
             <br>
-            全做：<a href="https://weibo.com/reiove" target="_blank">@卜卜口</a>
+            <a href="https://weibo.com/reiove" target="_blank">@卜卜口</a>
             <hr>
             反馈：<a href="https://github.com/itorr/patina" target="_blank">GitHub</a>
             <hr>
@@ -260,5 +273,9 @@ <h4>Use libjpeg-turbo for YUV->RGB conversion in jpeg encoder</h4>
 </div>
 
 <script src="/vue.2.6.11.min.js"></script>
+<script src="patina-gif/lib/libgif.js"></script>
+<script src="patina-gif/lib/rubbable.js"></script>
+<script src="patina-gif/lib/gif.js"></script>
 <script src="patina.js"></script>
+<script src="patina-gif/patina-gif.js"></script>
 <script src="document.js"></script>