Javascript: Анимированный GIF для URI данных

Question

Я пишу игру с открытым исходным кодом Falloutish 2 в PHP + HTML + CSS + JavaScript. Прямо сейчас, имея дело с двигателем. У меня есть этот gif: https://dl.dropboxusercontent.com/u/4258402/nmwarrgb_e.gif

... который я хочу конвертировать в URI данных. Мне нужно сделать это, потому что браузеры кэшируют изображения, а этот не зацикливается, поэтому, чтобы иметь возможность «запустить его снова», когда анимация заканчивается, а блок переходит на другую плиту, мне нужно преобразовать ее в URI данных. В противном случае мне пришлось бы повторно загружать изображение снова и снова, например. добавив случайную строку в конец файла изображения. Который работает отлично, но слишком сильно переносит передачу и вызывает отставание.

Это код, который я пытался использовать:

var image = new Image(); 

    (..) 

    this.convertImageObjectToDataURI = function (image) { 
       var canvasTemp = document.createElement('canvas'); 
       canvasTemp.width = image.naturalWidth; // or 'width' if you want a special/scaled size 
       canvasTemp.height = image.naturalHeight; // or 'height' if you want a special/scaled size 

       canvasTemp.getContext('2d').drawImage(image, 0, 0); 

       var dataUri = canvasTemp.toDataURL('image/gif'); 

       // Modify Data URI beginning 
       dataUri = "data:image/gif;" + dataUri.substring(15); 
       console.log(dataUri); 

       // Return image as Data URI 
       return dataUri; 
}; 

К сожалению, он производит URI данных только для первого кадра. Я пробовал искать плагины, читал о html-холсте, но все же Я просто не знаю, как конвертировать анимированные gif в URI данных. Любая помощь будет очень, очень приветствуется!

Answer 1

Я считаю, что нет прямого способа сделать это с помощью JavaScript. Используя холст, вам придется нарисовать на нем каждый отдельный фрейм и закодировать их в GIF-файл. Это кажется невозможным с использованием текущего API, поскольку нет способа извлечь отдельные кадры (за исключением ручного разбора GIF-файла).

Возможно, вам удастся загрузить бинарный GIF-файл с использованием JavaScript (помните о междоменных ограничениях HTTP-запросов) и сгенерируйте URL-адрес данных с кодировкой base64. Например, вы можете использовать this example, чтобы получить Uint8Array, который вы можете затем convert to a base64 string.

Вероятно, вам следует ставить статические URL-адреса данных, а не использовать JavaScript. Например, вы можете использовать эту команду оболочки для создания URL данных для файла GIF:

echo "data:image/gif;base64,"`curl --silent 'https://dl.dropboxusercontent.com/u/4258402/nmwarrgb_e.gif' | base64 --wrap=0` 

Существует также целый ряд онлайновых услуг, которые будут генерировать URL, данные из файлов.

Answer 2

Невозможно с javascript прочитать файлы сервера в этом режиме с совместимостью всех браузеров, но я рекомендую использовать спрайты вместо анимированных gif. Спрайт - это png-файл (который позволяет альфа-канал) со всеми выделенными кадрами. Представьте себе, что файл:

Как вы можете видеть, это изображение 600x150 (150x150 каждый кадр, 4 кадра). Таким образом, вы можете анимировать с CSS-анимации, как это:

.dots { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-image: url(http://i.stack.imgur.com/bCHFq.png); 
 
    
 
    -webkit-animation: play .4s steps(4) infinite; 
 
     -moz-animation: play .4s steps(4) infinite; 
 
     -ms-animation: play .4s steps(4) infinite; 
 
     -o-animation: play .4s steps(4) infinite; 
 
      animation: play .4s steps(4) infinite; 
 
} 
 

 
@-webkit-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
} 
 

 
@-moz-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
} 
 

 
@-ms-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
} 
 

 
@-o-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
} 
 

 
@keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
}

<div class="dots"></div>

При том, что вы можете настроить ключевые кадры, скорость, количество кадров (шагов), и самое главное: вы не t перегружает процессорную и оперативную память в клиенте браузера.

Удачи.