複数画像を1枚のアニメーションgifに変換

ただし、元から透過背景の画像は素材に使えない。

透過背景の結果がほしいときは一度素材の背景を埋めて、オプションで透過色を指定すること。

https://github.com/jnordberg/gif.js/

http://jnordberg.github.io/gif.js/

DL
view source

JavaScript

$(function(){
  $('#btn').click(function(){createGif();});
  $('#img3').click(function(){
    $('html').css({backgroundImage:'url(' + $(this).attr('src') + ')'});
  });

  var imgs = [
    'svg-dot-2x2-red.png',
    'svg-dot-2x2-green.png',
    'svg-3x3-1.png',
    'svg-3x3-2.png',
    'icon-circle-yamada.png',
    'svg-loopC-60x34-1.png',
    'svg-loopC-60x34-2.png',
    'svg-dot-3x3-skew1.png',
    'svg-dot-3x3-skew2.png',
    'svg-flower1-100x100.png',
    'svg-flower2-100x100.png',

  ];

  var select = $('select');
  imgs.forEach(function(val, i){
    var option = $('<option>').text('img/'+val);
    select.append(option.clone());
  });

  select.on('change', function(){
    var id = $(this).attr('name');
    var val = $(this).val();
    $('#'+id).attr({src:val});
  });

});


var createGif = function(){
  var e1 = document.getElementById('img1');
  var e2 = document.getElementById('img2');
  var e3 = document.getElementById('img3');
  var dl = document.getElementById('dl');

  var width = e1.naturalWidth || 3;
  var height = e1.naturalHeight || 3;
  var quality = $('[name="quality"]').val() || 10;

  var gif = new GIF({
    width:width,
    height:height,
    workers: 2,
    quality: quality,
    background: '#ffffff',
    transparent: '0xFFFFFF',
  });

  console.log(gif);


  gif.addFrame(e1);
  gif.addFrame(e2);


  // add a 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) {
    var uri = URL.createObjectURL(blob);
    //window.open(uri, 'ani-gif');
    blobToDataURL(blob, function(result){
      e3.setAttribute('src', result);
      dl.setAttribute('href', result);
      
    });
  });

  gif.render();
}


function blobToDataURL(blob, callback) {
    var a = new FileReader();
    a.onload = function(e) {callback(e.target.result);}
    a.readAsDataURL(blob);
}







$(function(){
  var e = {};
  e.svg = $('#svg');
  e.textarea = $('#textarea');
  e.canvas = $('#canvas');
  e.img1 = $('#img1');
  e.img2 = $('#img2');
  e.imgs = $('.material');
  
  e.textarea.on('keyup', function(){
    e.svg.html($(this).val());
  });
  e.svg.on('dblclick', function(){
    canvg('canvas', e.svg[0].outerHTML);
  });

  e.imgs.on('dblclick', function(){
    canvg('canvas', e.svg[0].outerHTML);
    var src = e.canvas[0].toDataURL();
    $(this).attr({src:src});
  });
});

CSS


  
HTML

  

    
ページのソースを表示 : Ctrl+U , DevTools : F12

    
view-source:https://hi0a.com/demo/-js/js-gif-animation/

  

  
ABOUT

  

    
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

    
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

    
必要な機能の関数をコピペ利用したり勉強に活用できます。

    
プログラムの動作サンプル結果は画面上部に出力表示されています。

    
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

    
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

    
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

    
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。