您好,登錄后才能下訂單哦!
無意中看到一篇文章寫得是關(guān)于純前端處理GIF圖片的問題,感覺挺有意思的所以自己也實(shí)現(xiàn)了一下;
主要用到的有兩個(gè)第三方庫(kù):合成GIF圖片的gif.js和分解的libgif.js;
分解GIF
1. 引入Git庫(kù)
import SuperGif from './libgif.js'
2. 處理圖片
var file = e.target.files[0]; console.log(file.type.indexOf('image/gif')); load_gif(file); function load_gif(gif_source) { var gifImg = document.getElementById('gifImg'); // gif庫(kù)需要img標(biāo)簽配置下面兩個(gè)屬性 gifImg.setAttribute('rel:animated_src', URL.createObjectURL(gif_source)) gifImg.setAttribute('rel:auto_play', '0') // 新建gif實(shí)例 var rub = new SuperGif({ gif: gifImg } ); var running = false; rub.load(function(){ var img_list = []; var j = 0; console.log(rub.get_length()); for (var i=1; i <= rub.get_length(); i++) { // 遍歷gif實(shí)例的每一幀 rub.move_to(i); var imgImage = new Image(); //canvas生成base64圖片數(shù)據(jù) imgImage.src = rub.get_canvas().toDataURL('image/jpeg',0.8); } }
合成GIF圖片
1. 引入Git庫(kù)
import GIF from './gif.js'
2. 圖片合成
var gif = new GIF({ workers: 2, quality: 10, workerScript: 'js/gif.worker.js' }); var j = 0; var canvas= document.createElement("canvas"); var ctx = tCanvas.getContext('2d'); for (var i=1; i <= len; i++) { var imgImage = new Image(); imgImage.src = img; imgImage.onload = function (e) { //Canvas繪制圖片 canvas.width = width; canvas.height = height; console.log(width,height) //鋪底色 ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(imgImage, 0, 0, width, height); gif.addFrame(canvas,{copy:true,delay:50}); j++; //圖片 if(j>=len) { gif.render() }; } } gif.on('finished', function(blob) { //生成圖片鏈接 var url = URL.createObjectURL(blob); }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。