整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ue.js 是一個(gè)用于構(gòu)建用戶界面的漸進(jìn)式 JavaScript 框架。它允許開發(fā)人員使用組件化的方式來構(gòu)建復(fù)雜的應(yīng)用程序。Vue.js 提供了很多有用的功能，其中之一就是可以將視頻轉(zhuǎn)換為 GIF。
要將視頻轉(zhuǎn)換為 GIF，我們可以使用 Vue.js 的一些插件和庫。其中一個(gè)常用的插件是 gifshot，它是一個(gè)用于在瀏覽器中創(chuàng)建 GIF 的庫。
首先，我們需要在 Vue.js 項(xiàng)目中安裝 gifshot 插件。可以使用 npm 或 yarn 來安裝：
```
npm install gifshot
```
或者
```
yarn add gifshot
```
安裝完成后，我們可以在 Vue.js 組件中引入 gifshot：
```javascript
import gifshot from 'gifshot';
```
接下來，我們可以使用 gifshot 的 API 來將視頻轉(zhuǎn)換為 GIF。首先，我們需要獲取視頻的 URL 或 Blob 對(duì)象。可以使用 `<video>` 元素來播放視頻，并在用戶選擇視頻后獲取其 URL 或 Blob 對(duì)象。
```html
<template>
<div>
<input type="file" @change="handleFileChange" accept="video/*">
<video ref="videoPlayer" controls></video>
<button @click="convertToGif">Convert to GIF</button>
< img ref="gifImage" v-if="gifData" :src="gifData" alt="Converted GIF">
</div>
</template>
```
在 Vue.js 組件中，我們可以定義一個(gè) `handleFileChange` 方法來處理用戶選擇視頻文件的事件。在該方法中，我們可以使用 `URL.createObjectURL` 方法來獲取視頻的 URL，并將其設(shè)置為 `<video>` 元素的 `src` 屬性。
```javascript
methods: {
handleFileChange(event) {
const file=event.target.files[0];
const videoPlayer=this.$refs.videoPlayer;
videoPlayer.src=URL.createObjectURL(file);
},
convertToGif() {
const videoPlayer=this.$refs.videoPlayer;
const gifImage=this.$refs.gifImage;
gifshot.createGIF({
video: videoPlayer,
gifWidth: 400,
gifHeight: 300
}, function(obj) {
if (!obj.error) {
gifImage.src=obj.image;
}
});
}
}
```
在 `convertToGif` 方法中，我們使用 gifshot 的 `createGIF` 方法來將視頻轉(zhuǎn)換為 GIF。我們可以通過設(shè)置 `video` 屬性來指定要轉(zhuǎn)換的視頻元素，通過設(shè)置 `gifWidth` 和 `gifHeight` 屬性來指定 GIF 的尺寸。
最后，我們可以在 `<img>` 元素中使用 `v-if` 指令來顯示轉(zhuǎn)換后的 GIF 圖像。我們將 `gifData` 綁定到 `src` 屬性，以便在轉(zhuǎn)換完成后更新圖像。
這樣，我們就可以使用 Vue.js 和 gifshot 插件將視頻轉(zhuǎn)換為 GIF。只需選擇視頻文件，然后點(diǎn)擊按鈕即可將視頻轉(zhuǎn)換為 GIF，并在頁面上顯示轉(zhuǎn)換后的 GIF 圖像。
一、項(xiàng)目背景】
生活中經(jīng)常會(huì)見到很多gif圖，那么gif圖到底是什么？GIF是一種位圖。簡單來說就是通過每一張張靜圖，通過控制它的關(guān)鍵幀，從而達(dá)到靜態(tài)圖動(dòng)起來的效果。
這種GIF圖的效果，也可以用html+CSS3結(jié)合來做。
【二、項(xiàng)目目標(biāo)】
完成GIF圖的制作。
【三、項(xiàng)目分析】
1、分析圖片。打開其中一張圖。
2、可以看到這張圖有45張不一樣動(dòng)作的靜態(tài)圖合成。有點(diǎn)擊屬性。如圖所示：
看到這張照片是7020*156，一共有45幀。高度不變，寬度7020/45幀，就可以把每一幀的內(nèi)容顯示出來。
【四、項(xiàng)目準(zhǔn)備】
1、圖片：準(zhǔn)備自己的喜歡的GIF靜態(tài)長圖，保存在文件夾。
2、軟件：Dreamweaver。
【五、項(xiàng)目實(shí)現(xiàn)】
1、創(chuàng)建div 存放圖片和文件，添加class屬性。
<body>
<div class="box">
<div class="box2">
</div>
</div>
</body>2、添加CSS樣式
1） 設(shè)置box的寬、高、位置、背景顏色。
.box{
width: 300px;
height: 300px;
background: #ccc;
position: absolute;
left: 0px;
top: 0;
}2）加載圖片，設(shè)置寬、高，-webkit-animation動(dòng)畫效果。
.box2{
width: 156px;
height: 156px;
background: url("fox45.png");
-webkit-animation:aa 3s steps(45) infinite ;
}
@-webkit-keyframes aa{
100%{
background-position: -7020px 0;
}
}CSS3 animation屬性中的steps實(shí)現(xiàn)GIF動(dòng)圖(逐幀動(dòng)畫)
steps(45)表示讓整個(gè)動(dòng)畫在45個(gè)關(guān)鍵幀之間切換。這個(gè)松鼠的圖片中
包含了45幀，所以這里設(shè)置了45。而且我們的動(dòng)畫時(shí)長是3s，也就是說每一幀
停留1s，這就和普通的GIF動(dòng)圖達(dá)到了一樣的效果。
【六、效果展示】
1、點(diǎn)擊F12運(yùn)行到瀏覽器。
2、點(diǎn)擊圖片，效果如下。
【七、總結(jié)】
1、本項(xiàng)目，就gif圖遇到的一些難點(diǎn)進(jìn)行了分析及提供解決方案。
2、html+css也可以做出網(wǎng)站頁面的效果，在上面顯示圖片標(biāo)題的地方不能用絕對(duì)定位，于是用的relative定位，這個(gè)地方是布局的核心部分。
3、按照操作步驟，自己嘗試去做。自己實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
4、需要本文源碼的小伙伴，后臺(tái)回復(fù)“GIF圖”四個(gè)字，即可獲取。
****看完本文有收獲？請(qǐng)轉(zhuǎn)發(fā)分享給更多的人****
IT共享之家
入群請(qǐng)?jiān)谖⑿藕笈_(tái)回復(fù)【入群】
想學(xué)習(xí)更多Python網(wǎng)絡(luò)爬蟲與數(shù)據(jù)挖掘知識(shí)，可前往專業(yè)網(wǎng)站：http://pdcfighting.com/
周在給學(xué)生講授JavaScript課程中setInterval方法時(shí)，想到了我們?cè)诰W(wǎng)上看到的各類GIF動(dòng)圖比較有意思，就將其引入到教學(xué)中，教學(xué)內(nèi)容設(shè)計(jì)如果通過HTML5與JavaScript實(shí)現(xiàn)網(wǎng)頁類似GIF效果的動(dòng)態(tài)圖。于是在網(wǎng)上搜集了部分gif格式動(dòng)圖，將每一個(gè)Gif動(dòng)圖分解為一組jpg格式圖片，再采用setInterval與html5 Canvas進(jìn)行動(dòng)畫的實(shí)現(xiàn)。通過學(xué)習(xí)可以讓學(xué)生進(jìn)一步了解canvas動(dòng)畫實(shí)現(xiàn)的過程與原理。并將其發(fā)布到頭條，也希望對(duì)有興趣的初學(xué)者了解HTML5 Canvas等有所幫助。圖片分組圖片素材如下：
素材一
實(shí)現(xiàn)動(dòng)畫的素材我們已經(jīng)給出，主要通過gif動(dòng)圖導(dǎo)出一組圖片，下面對(duì)html5動(dòng)畫實(shí)現(xiàn)過程進(jìn)行簡單說明。
實(shí)現(xiàn)其動(dòng)畫的基本思路是通過HTML5提供的canvas元素進(jìn)行圖片的繪制與展示，借助setInterval方法實(shí)現(xiàn)間隔指定時(shí)間調(diào)用新的圖片實(shí)現(xiàn)重新繪圖。其中繪圖主要使用drawImage方法進(jìn)行繪圖，最終通過圖片依次重繪實(shí)現(xiàn)動(dòng)畫效果。具體實(shí)現(xiàn)過程如下：
在頁面body部分添加Canva標(biāo)簽，設(shè)置其id屬性為canv，寬度為600，高度為400,編寫代碼描述如下圖：
添加畫布元素
canvas瀏覽效果
使用Canvas借助JavaScript提供的drawImage方法進(jìn)行繪圖，需要提供要繪制的圖片資源即繪圖的坐標(biāo)位置。該方法原型如下：
drawImage方法原型
因此我們需要加載圖片資源，本例由于需要調(diào)用多個(gè)img實(shí)現(xiàn)定時(shí)不同圖片的繪制，因此我們可以使用數(shù)組存儲(chǔ)所加載的圖片資源。本例圖片數(shù)量為14，因此我們數(shù)組長度為14。使用素組存儲(chǔ)圖片實(shí)現(xiàn)代碼如下：
加載圖片資源代碼
本例設(shè)計(jì)在頁面加載時(shí)自動(dòng)播放動(dòng)畫，因此需要在JavaScript腳本中添加頁面onload事件，在事件中編寫繪圖相關(guān)代碼，主要代碼包括獲取畫布canva與實(shí)例化繪圖對(duì)象context。部分代碼描述如下：
onload事件及繪圖初始化
使用setInterval方法實(shí)現(xiàn)動(dòng)畫主要需要定義回調(diào)函數(shù)與回調(diào)函數(shù)觸發(fā)執(zhí)行的周期，本例中我們使用匿名函數(shù)作為回調(diào)函數(shù)，觸發(fā)周期設(shè)置為100毫秒。setInterval函數(shù)定義如下：
setInterval函數(shù)
在定義完函數(shù)之后可在其匿名函數(shù)函數(shù)體部分寫入繪圖方法dramImage(),實(shí)現(xiàn)周期調(diào)用不同圖片資源進(jìn)行繪圖，最終展示出動(dòng)畫效果。為了保證循環(huán)調(diào)用14張圖片，我們需要設(shè)置一計(jì)數(shù)全局變量i，由于我們圖片采用數(shù)組存儲(chǔ)，下標(biāo)為數(shù)組，且從0-13進(jìn)行編號(hào)，因此當(dāng)計(jì)數(shù)值小于13時(shí)自動(dòng)+1，指向下一數(shù)組下標(biāo)，當(dāng)為13時(shí)，設(shè)置計(jì)數(shù)值為0，回到數(shù)組第一元素，最終實(shí)現(xiàn)數(shù)組訪問下標(biāo)的循環(huán)。setInterval實(shí)現(xiàn)完整代碼如下：
setInterval完整代碼
HTML動(dòng)畫效果展示
本頭條號(hào)長期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓(xùn)。如果您對(duì)以上方面有興趣或代碼錯(cuò)誤、建議與意見，可以聯(lián)系作者，共同探討。期待大家關(guān)注！如需案例完整代碼請(qǐng)關(guān)注并私信，往期前端設(shè)計(jì)文章鏈接如下：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
