vue裁剪gif图片并保持动画效果

一.效果

本案例中只对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图片并保持动画效果相关推荐

如何把HTML转换成动图,html5实现图片转圈的动画效果——让页面动起来
1.先瞧瞧效果: 2.代码是这样的: @mixin ani-btnRotate{ @keyframes btnRotate{ from{transform: rotateZ(0);} to{trans ...
照片转换为动画 html5,如何使用html5让图片转圈的动画效果
如何使用html5让图片转圈的动画效果发布时间:2020-10-26 09:33:22 来源:亿速云阅读:78 作者:小新如何使用html5让图片转圈的动画效果?这个问题可能是我们日常学习或工作 ...
html怎样让图片自动转圈,html5怎样做出图片转圈的动画效果
这次给大家带来html5怎样做出图片转圈的动画效果,h5做出图片转圈的动画效果的注意事项有哪些,下面就是实战案例,一起来看一下. @mixin ani-btnRotate{ @keyframes bt ...
python炫酷动画源代码_Python tkinter实现的图片移动碰撞动画效果【附源码下载】...
本文实例讲述了Python tkinter实现的图片移动碰撞动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: #!/usr/bin/python # -*- coding ...
flash图片如何镜像翻转_在canvas上实现元素图片镜像翻转动画效果的方法
这篇文章主要介绍了在canvas上实现元素图片镜像翻转动画效果的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧! 一.Canvas图片水平镜像翻转效果预览 ...
仿腾讯新闻客户端图片新闻幻灯片动画效果
正在做一个类似腾讯新闻客户端图片新闻幻灯片动画效果,借着这个机会又看了一下android的动画. 源码http://download.csdn.net/detail/u012598233/853134 ...
html图片自动循环,css实现图片循环的动画效果（代码）
本篇文章给大家带来的内容是关于css实现图片循环的动画效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. *{margin: 0;padding: 0;} .robot{ w ...
vue如何使用原生js写动画效果_手摸手，带你用 vue 动画实现原生 app 切换效果，丝滑般的体验...
先来看效果图完整源码在 github 中欢迎 star: 准备开始之前您需要有 vue 基础,以及安装好 vue-cli 开始新建 vue 项目:vue init webpack vuexle ...
8.图片组件和动画效果--从零起步实现基于Html5的WEB设计器Jquery插件（含源码）...
前面示例我建立了三种形状的组件,圆.矩形.椭圆,本节我将再扩展两种类型:图片和动画,并通过这个过程来论证前面OOP的编程是如何简化扩展工作的: 首先要在工具条里增加这两个组件,以便可以拖动: < ...