javascript - Weird stuttering when generating animated gifs using gifshot.js on ios -
ok, little bit of background... i'm trying generate animated gifs animations done on html5 canvas using javascript. specifically, i'm adding data layers mapbox gl js map , looping through them.
on each iteration, save canvas element , transform blob before calling url.createobjecturl(blob) , setting source new image. after loop finished generate gif using gifshot (https://github.com/yahoo/gifshot) , images created.
this process works in browsers (mobile too!) except on iphone ios. on ios gif has weird stutters , transparency issues. have tried other gif creation libraies have same issue on ios. memory problem or something? i'm @ wit's end on this, appreciated!
this code inside each loop:
var cv = map.getcanvas() var oneimage = new image(); cv.toblob(function(blob) { url = url.createobjecturl(blob); oneimage.src = url images_arr.push(oneimage) i++; settimeout(function(){ gifloop(images_arr); },1000) })
and code call when loop finished:
var w = window.innerwidth; var h = window.innerheight; recalculated_size = calculateaspectratiofit(w, h, maxwidth, maxheight) w = recalculated_size.width h = recalculated_size.height gifshot.creategif({ 'images': images_arr, 'gifwidth': w, 'gifheight':h, },function(obj) { if(!obj.error) { var image = datauritoblob(obj.image) image = url.createobjecturl(image); var animatedimage = document.getelementbyid('gif'); animatedimage.src = image var link = $('#gif-link'); link.attr('href',image); filename = curr_layer_id + '_' + curr_time +'.gif' link.attr('download', filename); } });
Comments
Post a Comment