一.效果

本案例中只對gif做了處理，預留了非gif的處理，可以自行處理。文章末尾會附上案例地址。

?這張圖片有點大，請耐心等待2秒。

二.思路

相當于就是取裁剪框在圖片中的位置和寬高，再根據幀數，取繪制區域大小及四個頂點的坐標繪制一遍gif。

三.代碼

<template><div id="app"><div class="main cut"><div class="cut-upload-wrap cut-model1"><div class="cut-upload-container"><div class="cut-upload-main"><div class="cut-upload-btn" @click="uploadBtn()">上傳圖片</div><inputtype="file"style="opacity: 0;"accept="image/gif,image/png,image/jpeg,image/jpg"class="cut-upload-file com-input-avatar"ref="J-uploadBtn"id="J-uploadBtn"@change="changeFile"/></div><div class="cut-upload-tip">請上傳50M以內的圖片!&nbsp;&nbsp;支持GIF、PNG、JPG、JPEG</div></div><div class="priview-box"><img :src="previewUrl" alt="" v-if="previewUrl"><span v-else style="color: #666;">暫未裁剪圖片！</span></div></div></div><el-dialogtitle="裁剪":visible.sync="cropFlag"append-to-body:destroy-on-close="true"><div class="cropper-content"><div class="cropper" style="text-align: center"><img id="image" ref="cropper-img" :src="cutImgUrl" /></div></div><div slot="footer" class="dialog-footer"><el-button @click="closeCut()">取 消</el-button><el-button type="primary" @click="finishCut()" :loading="cutLoading">{{cutLoading?'裁剪中...':'確定'}}</el-button></div></el-dialog></div> </template><script> import $ from "jquery";import Cropper from "cropperjs"; import "cropperjs/dist/cropper.css";import GIF from 'gif.js' import { GifToCanvas } from '@/libs/gifToCanvas.js' export default {name: "App",components: {},data() {return {imgType: "image/gif",cutImgUrl: "",myCropper: "",cropFlag: false,cutLoading: false,gifToCanvas:'',gif:'',previewUrl:'',};},methods: {uploadBtn() {let uploadBtn = $("#J-uploadBtn");uploadBtn.click();},dataURLtoBlob(dataurl) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });},fileToBase64(file){return new Promise((resolve)=>{let reader = new FileReader();reader.onload = function (evt) {let base64 = evt.target.result;resolve(base64)};reader.readAsDataURL(file);})},async changeFile(e) {let file = e.target.files[0];if (file) {this.fileinfo = file //保存file信息this.imgType = file.type;this.cutImgUrl = await this.fileToBase64(file);//file轉base64if (file.type == "image/gif") {//gif圖片this.cropFlag = true;this.$nextTick(() => {setTimeout(() => {this.myCropper = new Cropper(this.$refs["cropper-img"], {aspectRatio: 300 / 300,crop(event) {console.log(event.detail.x);console.log(event.detail.y);console.log(event.detail.width);console.log(event.detail.height);console.log(event.detail.rotate);console.log(event.detail.scaleX);console.log(event.detail.scaleY);},});}, 0);});} else {//非gif圖片alert('請上傳gif格式圖片，本工程只處理gif圖，但預留了非gif邏輯空間，有需要請自行補充！')}}},//關閉裁剪closeCut(){this.cropFlag = false;this.cutLoading = false;if(this.myCropper){this.myCropper.destroy()}if(this.gif){this.gif = ''}if(this.gifToCanvas){this.gifToCanvas.clear()}},async finishCut() {if(this.cutLoading)returnthis.cutLoading = trueif(this.imgType == 'image/gif'){//gif處理let blob = await this.cropGifHandle()this.previewUrl = window.URL.createObjectURL(blob)}else{//預留png}this.cutLoading = falsethis.cropFlag = false},//gif裁剪async cropGifHandle() {return new Promise((resolve, reject) => {if (this.myCropper) {const url = URL.createObjectURL(this.dataURLtoBlob(this.myCropper.url));const cropBoxData = this.myCropper.getCropBoxData();const canvasData = this.myCropper.getCanvasData();this.gifToCanvas = new GifToCanvas(url, {targetOffset: {dx: cropBoxData.left - canvasData.left,dy: cropBoxData.top - canvasData.top,width: canvasData.width,height: canvasData.height,sWidth: cropBoxData.width,sHeight: cropBoxData.height,},});this.gif = new GIF({workers: 4,quality: 10,width: cropBoxData.width,height: cropBoxData.height,workerScript: `${window.location.origin}/gif.worker.js`,});const addFrame = (canvas, delay) => {this.gif.addFrame(canvas, { copy: true, delay });};this.gifToCanvas.on("progress", (canvas, delay) => {addFrame(canvas, delay);});this.gifToCanvas.on("finished", (canvas, delay) => {addFrame(canvas, delay);this.gif.render();});this.gif.on("finished", (blob) => {console.log("finished", window.URL.createObjectURL(blob));resolve(blob);});this.gifToCanvas.init();} else {reject();}});},}, }; </script><style lang="less"> #app {background: #000;width: 100%;height: 100%;min-height: 100vh;padding-top: 100px;box-sizing: border-box;.main {width: 1200px;margin: 0 auto;box-sizing: border-box;background: #1b1b1b;&.cut {min-height: 424px !important;padding: 20px;margin-bottom: 30px;box-sizing: border-box;.cut,.cut-upload-main,.cut-upload-wrap {position: relative;}.cut {height: 100%;min-height: 424px !important;padding: 20px;margin-bottom: 30px;}.cut-model2 {display: none;}.cut-upload-wrap {text-align: center;top: 50%;margin-top: 100px;display: flex;justify-content: space-around;}.cut-upload-container {display: inline-block;padding: 35px;border: 5px dashed #262626;}.cut-info,.cut-upload-tip {padding-top: 20px;font-size: 14px;}.cut-upload-btn {width: 385px;height: 60px;line-height: 60px;color: #fff;background: #6418ff;-webkit-transition: 0.2s;-o-transition: 0.2s;transition: 0.2s;cursor: pointer;}.cut-upload-main:hover .cut-upload-btn {background: #5e12fb;}.cut-upload-file {position: absolute;}.cut-upload-tip {color: #666;}}} } </style>

四.案例地址

cropper-gif: vue裁剪gif圖片，裁剪出來的圖片仍然保留動畫的案例，直接down下來就可運行，效果可見：https://root181.blog.csdn.net/article/details/117398384

總結

以上是生活随笔為你收集整理的vue裁剪gif图片并保持动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。