使用画布将列表的超链接转换为图像基础 64 字符串

Question

我是jquery手机新手。在我的列表的包含超链接。我需要将href转换为base 64字符串。请看下面我的代码

html

 <div id="nPhoto" style="max-height: 600px; display: none;">
                <div class="thumbs" id="thumbs">

                     <a href="http://i0.gmx.net/images/258/18821258,pd=2,h=250,mxh=600,mxw=800,w=480.jpg" style="background-image:url(http://i0.gmx.net/images/258/18821258,pd=2,h=250,mxh=600,mxw=800,w=480.jpg)" title="1234" data-name="newImage" ></a>
                    <a href="http://farm8.staticflickr.com/7042/6895252645_45f5dfffaa_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7042/6895252645_45f5dfffaa_m.jpg)" title="1234" data-name="newImage"></a>
                    <a href="http://farm8.staticflickr.com/7183/6943277737_21b521659c_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7183/6943277737_21b521659c_m.jpg)" title="1234" data-name="newImage"></a>
                    <a href="http://farm8.staticflickr.com/7047/7000951429_5eae078a62_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7047/7000951429_5eae078a62_m.jpg)" title="1234" data-name="newImage"></a>
                    <a href="http://farm6.staticflickr.com/5346/7051537899_efc7a44830_z.jpg" style="background-image:url(http://farm6.staticflickr.com/5346/7051537899_efc7a44830_m.jpg)" title="1234" data-name="newImage"> </a>
                    <a href="http://farm8.staticflickr.com/7268/6951148260_440661b4d1_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7268/6951148260_440661b4d1_m.jpg)" title="1234" data-name="newImage"></a>
                    <a href="http://farm8.staticflickr.com/7259/6930112984_5fcc076288_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7259/6930112984_5fcc076288_m.jpg)" title="1234" data-name="newImage"></a>
                    <a href="http://farm8.staticflickr.com/7276/6886626710_047cd03acb_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7276/6886626710_047cd03acb_m.jpg)" title="1234" data-name="newImage"></a>
                    <a href="http://farm8.staticflickr.com/7020/6683299491_f2b5f6aa8b_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7020/6683299491_f2b5f6aa8b_m.jpg)" title="1234" data-name="newImage"></a>
                </div>

 function encodeImageUrid(url) {
    var deferred = $.Deferred();
    var imgB = new Image();
    imgB.src = url
    imgB.onload = function () {
        var canvasB = document.createElement('canvas');
        canvasB.width = imgB.width;
        canvasB.height = imgB.height;
        var ctxB = canvasB.getContext('2d');
        ctxB.drawImage(imgB, 0, 0);
        var imgURl = canvasB.toDataURL("image/png").replace(/^data:image/(png|jpg);base64,/, "");;
        deferred.resolve(imgURl);

    }
    return deferred.promise();
}

循环所有超链接并转换为64进制字符串。然后我推到一个列表，以保存记录

  $('.thumbs a[data-name=newImage]').each(function () {
                    encodeImageUrid($(this).attr("href")).done(function (data) {
                        list.push(data);
                    } )
            })
            console.log("Load completed " +list)

所以nw是我的问题，每次每个函数避风港循环完成后它直接跳转到console.log("Load completed " +list)

有人知道答案吗?请帮助

Answer 1

编辑

注:原职位的要求似乎不包括将实际的img转换为base64 -只有a href字符串转换为base64。

在下面的片段中，每个a href被转换为base64字符串，然后添加到list array，当list length到达a length list被记录到console。window.btoa窗口。btoa将string转换为base64字符串。

fwiw, jquery.Deferred, HTML canvas not 需要以满足OP - string到base64的要求-例如，在

console.log("Load completed", list):

Load completed ["aHR0cDovL2kwLmdteC5uZXQvaW1hZ2VzLzI1OC8xODgyMTI1OCxwZD0yLGg9MjUwLG14aD02MDAsbXh3PTgwMCx3PTQ4MC5qcGc=", "aHR0cDovL2Zhcm04LnN0YXRpY2ZsaWNrci5jb20vNzA0Mi82ODk1MjUyNjQ1XzQ1ZjVkZmZmYWFfei5qcGc=", "aHR0cDovL2Zhcm04LnN0YXRpY2ZsaWNrci5jb20vNzE4My82OTQzMjc3NzM3XzIxYjUyMTY1OWNfei5qcGc=", "aHR0cDovL2Zhcm04LnN0YXRpY2ZsaWNrci5jb20vNzA0Ny83MDAwOTUxNDI5XzVlYWUwNzhhNjJfei5qcGc=", "aHR0cDovL2Zhcm02LnN0YXRpY2ZsaWNrci5jb20vNTM0Ni83MDUxNTM3ODk5X2VmYzdhNDQ4MzBfei5qcGc=", "aHR0cDovL2Zhcm04LnN0YXRpY2ZsaWNrci5jb20vNzI2OC82OTUxMTQ4MjYwXzQ0MDY2MWI0ZDFfei5qcGc=", "aHR0cDovL2Zhcm04LnN0YXRpY2ZsaWNrci5jb20vNzI1OS82OTMwMTEyOTg0XzVmY2MwNzYyODhfei5qcGc=", "aHR0cDovL2Zhcm04LnN0YXRpY2ZsaWNrci5jb20vNzI3Ni82ODg2NjI2NzEwXzA0N2NkMDNhY2Jfei5qcGc=", "aHR0cDovL2Zhcm04LnN0YXRpY2ZsaWNrci5jb20vNzAyMC82NjgzMjk5NDkxX2YyYjVmNmFhOGJfei5qcGc="]

试

$(function () {
    var list = [];
    var imgs = $(".thumbs a[data-name=newImage]");
    var _imgs = imgs.length;
    $(imgs)
    .each(function (i, el) {
        list.push(window.btoa($(el).attr("href")));
        if (list.length === _imgs) {
            console.log("Load completed", list);
        };
    });
});

jsfiddle http://jsfiddle.net/guest271314/5p3fM/