Question

我有一项服务，可以为我提供电影名称，图片的网址以及其他数据，因此，我可以显示正在特定电影院播放的电影。

问题在于，即使我保存了API中的数据，图像仍保留在其URL上，因此，每次用户访问该部分时，图像需要花费时间，具体取决于互联网连接出现。

现在，由于我没有进行编码，所以我不想乱七八糟，所以我考虑将电影ID，名称和图片保存在一个对象上，然后将其保存到localStorage中，这样，当系统开始时，如果未保存它们，则将它们添加，如果保存，则将它们忽略。

所以，我正在考虑做这样的事情：

...
.then(function(response) {
    var dataToSave = response.data.cartelera["no_premium"];
    var moviesForLocalStorage = [];
    $(dataToSave).each(function(){
        var movie = this;
        var movieToSave = {};
        movieToSave.id = movie.id;
        movieToSave.name = movie.name;
        movieToSave.picture = transformPic(movie.URLPoster);
        moviesForLocalStorage.push(movieToSave);
    });
});

var transformPic = function(urlOfPic){
    var image = new Image();
    image.src = urlOfPic;
    var imageBase64;
    image.onload = function(){
        imageBase64 = getBase64Image(image);
    }
    return imageBase64;
}

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

（最后一个功能，我从这里复制了它：here）

但是，对其进行检查，它永远不会调用.onload函数。

那么，我在做什么错？图片是否必须在HTML标记上才能下载，转换和保存？

谢谢！

如果我有图像URL，是否必须将其保存在Web上才能保存在localStorage中？

0 个答案: