生成GIF動畫的JS庫:gif.js

jopen 10年前發布 | 48K 次閱讀 gif.js JavaScript開發

gif.js 是一個GIF編碼庫,可用于直接在中瀏覽器生成GIF圖片。使用typed arrays和web workers 在后臺渲染每一幀,它真的很快!

示例 - http://jnordberg.github.io/gif.js/

可工作在支持: Web Workers, File APITyped Arrays的瀏覽器中。

經測試支持:

  • Google Chrome
  • Firefox 17
  • Safari 6
  • Internet Explorer 10
  • Mobile Safari iOS 6

用法

Include gif.js found in dist/ in your page. Also make sure to have gif.worker.js in the same location.

var gif = new GIF({
  workers: 2,
  quality: 10
});

// add an image element
gif.addFrame(imageElement);

// 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) {
  window.open(URL.createObjectURL(blob));
});

gif.render();

選項

Options can be passed to the constructor or using the setOptions method.

Name Default Description
repeat 0 repeat count, -1 = no repeat, 0 = forever
quality 10 pixel sample interval, lower is better
workers 2 number of web workers to spawn
workerScript gif.worker.js url to load worker script from
background #fff background color where source image is transparent
width null output image width
height null output image height
transparent null transparent hex color, 0x00FF00 = green

If width or height is null image size will be deteremined by first frame added.

addFrame options

Name Default Description
delay 500 frame delay
copy false copy the pixel data

項目主頁:http://www.baiduhome.net/lib/view/home/1407650552582

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!