在ios

Question

好的，一点背景......我试图使用JavaScript在HTML5画布上制作的动画中生成动画GIF。具体来说，我将数据层添加到Mapbox GL JS地图并循环遍历它们。

在每次迭代中，我保存canvas元素并将其转换为blob，然后调用URL.createObjectURL（blob）并将其设置为新图像的源。循环结束后，我使用gifshot（https://github.com/yahoo/gifshot）和我之前创建的图像生成一个gif。

此过程适用于所有浏览器（也适用于移动设备！），除了iPhone ios外。在ios上，gif有奇怪的口吃和透明度问题。我尝试过其他gif创建的图书馆，但在ios上都有相同的问题。这可能是记忆问题还是什么？我的智慧结束了这一点，所以非常感谢任何帮助！

这是每个循环中的代码：

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) 
})

这是我在循环结束时调用的代码：

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);

      }
 });