vue+eleme upload 上传图片(含gif动图) canvas压缩,base64转blob对象

突然新增个需求，下、图片上传需要支持gif动图
以前的项目是通过canvas压缩的方式，但是通过这种方式，出现即使结果是.gif文件，但实际上，并不是动图
直接看下面代码

// 压缩图片compress(img) {const canvas = document.createElement("canvas");const ctx = canvas.getContext("2d");// let initSize = img.src.length;const width = img.width;const height = img.height;canvas.width = width;canvas.height = height;// 铺底色ctx.fillStyle = "#fff";ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.drawImage(img, 0, 0, width, height);// 进行压缩const ndata = canvas.toDataURL("image/jpeg", 0.8);return ndata;},// base64转成bolb对象dataURItoBlob(base64Data) {let byteString;if (base64Data.split(",")[0].indexOf("base64") >= 0) {byteString = atob(base64Data.split(",")[1]);} else {byteString = unescape(base64Data.split(",")[1]);}const mimeString = base64Data.split(",")[0].split(":")[1].split(";")[0];const ia = new Uint8Array(byteString.length);for (let i = 0; i < byteString.length; i++) {ia[i] = byteString.charCodeAt(i);}return new Blob([ia], { type: mimeString });},

    async upload(data) {// 自定义upload事件const img = new Image();img.src = this.file.url;img.onload = async () => {let blob;if(this.file.name.includes('gif')){await fetch(this.file.url) .then((response) => response.blob()) //获取gif的blob对象.then((res) => {blob = res});}else{const _data = this.compress(img);blob = this.dataURItoBlob(_data);}const formData = new FormData();formData.append("file", blob, this.file.name); // 有的后台需要传文件名，不然会报错// formData.append('imageDesc', this.imageDesc) // 图片说明formData.append("filePath", this.filePath);//this.imgUpload(formData);};},

vue+eleme upload 上传图片(含gif动图) canvas压缩,base64转blob对象相关推荐

gif动图可以压缩大小吗？gif图片怎么压缩？
转自:http://www.weidianyuedu.com/content/0012341722200.html 现在网络上的gif动图真的是遍地都是,微信聊天要gif动图表情包,微博聊天要gif动 ...
vue 项目 upload上传图片并实现拖拽排序
upload 上传图片并实现拖拽功能 1.npm i -S vuedraggable 2.//页面引入 import draggable from "vuedraggable" c ...
如何把大量动图一键压缩到微信可用的大小？
在进行文章编写创作的时候,我们都会给文章中添加图片来增强文章的可阅读性,在微信公众号中编写文章推送的小伙伴们还会经常用到GIF动图,比起普通的静态图片,gif的表现效果会更好,但是GIF动图的缺点就是 ...
分分钟 get VUE 动画与过渡（内含动图案例）
嗨咯!这里是小M. (努力学习VUE版) 今天浅浅分享一下 VUE中的动画和过渡动画和过渡是两种不同的概念,但是能够实现相同的动效,或者结合起来使用. 1.基本使用方法先来看看VUE官方文档 V ...
gif图片的体积怎么缩小？如何压缩动图大小？
大家在编辑微信公众号文章的时候,都喜欢使用GIF动图.但是,微信公众号对上传的gif动图体积的大小是有限制的,如果我们手里的gif图片体积偏大无法正常上传,那么这个时候应该怎么办呢?今天来给大家分享一 ...
Python3，为了无损压缩gif动图，我不得不写了一个压缩神器，真香。
gif动图无损压缩 1.引言 2.代码实战 2.1 模块介绍 2.2 安装 2.3 代码示例 3.总结 1.引言小屌丝:鱼哥, 求助~ 求助~ 求助~ 小鱼:你这是告诉我,重要的事情说三遍吗? 小 ...
怎样在线压缩gif图片大小？电脑上如何压缩动图？
GIF动图是一种使用非常广泛的图片格式,我们平时聊天时候使用的动态表情包一般就是gif格式的,与静态图片相比,GIF动图是由多帧构成的,因此体积一般也会比静态图片大很多,所以在使用的时候难免会遇到GI ...
怎样裁剪动图的大小？如何快速裁剪GIF动图？
在我们使用GIF动图的时候,有时会遇到想要这张GIF动图中的一部分时,应该怎么办呢?怎样裁剪GIF动图呢?这时候,大家就可以使用**GIF裁剪图片**工具–GIF中文网,只需要上传图片一键就可以在线裁 ...
静态图片如何制作成gif动图？图片在线合成gif的方法
相信在大家的聊天软件中都保存着许多搞笑的gif动态表情包用来与朋友斗图时使用.那么,大家知道这种gif表情包是如何制作的吗?接下来,小编就给大家分享一款动态图片在线制作(https://www.gif ...
netbeans 添加gif图片_怎么制作动态图片？手机如何制作清晰gif动图？
对于gif动图大家是非常熟悉的一种图片展现形式,比如平常在微信,QQ中使用的表情包就是gif动图样式的一种.一般获取GIF动图的渠道主要是来自网上或者对于好友使用的比较有趣的图片进行收藏,然后在聊天的 ...

vue+eleme upload 上传图片(含gif动图) canvas压缩,base64转blob对象

vue+eleme upload 上传图片(含gif动图) canvas压缩,base64转blob对象相关推荐

最新文章

热门文章