html2canvas   截圖的外掛

http://jnordberg.github.io/gif.js/  GIF.js官網

<script src='https://imgss.github.io/demo/gif/gif.js'></script> <script>   var gif = new GIF({   workers: 2,   quality: 10,   background: '#ffffff',//原透明色替換為白色   transparent: 0xffffff//把圖片中的白色替換為gif的透明色   });
  // add a image element   gif.addFrame(document.getElementById('img'),{copy: true});
  // or a canvas element   // gif.addFrame(canvasElement, {delay: 200});
  // or copy the pixels from a canvas context   // gif.addFrame(ctx, {copy: true});
  gif.on('finished', function(blob) {     console.log(blobToDataURL(blob));     // window.open(URL.createObjectURL(blob));   });
  gif.render();

  const blobToDataURL = (blob) => {   return new Promise((resolve, reject) => {   let reader = new FileReader();   reader.addEventListener('load', () => {   resolve(reader.result); // reader.result即為包含檔案內容的字串   });   reader.readAsDataURL(blob);   });   }; </script>                  

使用h5的

canvas提供的介面很容易實現一些動畫,如果能把這些動畫實現成gif動圖就更好啦，還真有大神實現啦這個功能下面說明使用方法

開源庫地址

首先引入需要的js檔案gif.js在頁面裡自己建立一個canvas並且在它上面畫一些動畫

js附件在後面下載

然後就是gif的使用方法啦var gif = new GIF({

workers: 2,

quality: 10

});

// 新增一個圖片標籤物件畫素到當前幀

gif.addFrame(imageElement);

//或新增一個canvas物件的畫素到當前幀

gif.addFrame(document.getElementsByTagName('canvas')[0], {

delay: 200

});

gif.addFrame(document.getElementsByTagName('canvas')[0], {

delay: 200

});

gif.addFrame(document.getElementsByTagName('canvas')[0], {

delay: 200

});

//從canvas context複製畫素到當前幀

gif.addFrame(ctx, {

copy: true

});

//合成圖片成功後

gif.on('finished', function(blob) {

window.open(URL.createObjectURL(blob));

});

//渲染圖片

gif.render();

附錄：建立GIF物件的配置引數引數預設描述repeat0重複播放 -1 = 不重複, 0 = 重複

quality10圖片質量越小越質量越好

workers2number of web workers to spawn

workerScriptgif.worker.js原版請注意下路徑,文章中的附件已經新增自動查詢路徑

background#fff當原影象為透明時進行替換的背景色

widthnull輸出圖片的寬

heightnull輸出圖片的高

transparentnull原圖片中要透明的十六進位制顏色, 0x00FF00 = green

ditherfalsedithering method, e.g. FloydSteinberg-serpentine

debugfalse除錯為true時會列印日誌到console

如果寬或者高為null的話就以新增的第一幀大小為準

要注意的一個地方使用canvas context這個新增圖片資料的時候,如果是第一幀,則會因為沒有初始化大小,而從context裡也找不出來大小,所以會報錯,正確方法是例項化GIF時傳入寬高的配置,這樣新增圖片幀的三個方法使用才會正常

addFrame 引數引數預設描述delay500幀延時,設定為0時自動轉成500

copyfalse複製畫素資料

製作透明gif圖片的方法var gif = new GIF({

workers: 2,

quality: 10,

background: '#ffffff',//原透明色替換為白色

transparent: 0xffffff//把圖片中的白色替換為gif的透明色

});

使用addFrame新增圖片資料的時候把背景設定成#ffffff白色,生成gif圖片時圖片中的白色就自動變成透明啦

備註：使用環境必須是在伺服器環境下