Question

我真的很难写一个函数来获取图像的Base64编码。由于此函数将是使用jsPDF.js从网站即时生成PDF的更大脚本的一部分，因此能够计算作为函数结果的Base64编码非常重要。图像将托管在同一台服务器上，因此不存在同源问题。我知道canvas元素的 .toDataURL（）方法可以做到这一点，我也知道图像需要完全加载才能正确获取数据URL，所以我写了这个函数

// Encode image to Base64
function encodeBase64(url, format)
{
    var image = new Image(),
    canvas = document.createElement("canvas"),
    context = canvas.getContext("2d");
    image.src = url;
    image.onload = function ()
    {
        canvas.width = image.width;
        canvas.height = image.height;
        context.drawImage(image, 0, 0, image.width, image.height);
        var dataURL = canvas.toDataURL(format);
        alert(dataURL);
    };
}

问题在于我不知道如何提取＆＃34;来自onload函数的dataURL值，以便encodeBase64函数只返回该值，我可以将它放在一个数组中。 Alert会正确返回该字符串，因此我确定代码可以正常工作，但如果我尝试编写任何其他语句，例如＆＃34;则返回dataURL＆＃34;或类似的我只是得到未定义值。请帮忙。

Answer 1

首先将所有图像加载到数组中。

然后使用canvas创建dataURL并将dataURL加载到第二个数组中。

示例代码和演示：http://jsfiddle.net/m1erickson/fbdb3qbw/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // array for dataURLs
    var dataURLs=[];

    // put the paths to your images in imageURLs[]
    var imageURLs=[];  
    // push all your image urls!
    imageURLs.push({url:"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sun.png",format:null});
    imageURLs.push({url:"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/temp1.png",format:'image/jpeg'});

    // the loaded images will be placed in images[]
    var imgs=[];

    var imagesOK=0;
    loadAllImages(start);

    function loadAllImages(callback){
        for (var i=0; i<imageURLs.length; i++) {
            var img = new Image();
            img.format=imageURLs[i].format;
            imgs.push(img);
            dataURLs.push('');
            img.index=imgs.length-1;
            img.onload = function(){ 
                imagesOK++; 
                if (imagesOK>=imageURLs.length ) {
                    callback();
                }
            };
            img.onerror=function(){alert("image load failed");} 
            img.crossOrigin="anonymous";
            img.src = imageURLs[i].url;
        }      
    }

    function start(){

        // the imgs[] array now holds fully loaded images
        // the imgs[] are in the same order as imageURLs[]

        // now loop through each img and create its dataURL
        for(var i=0;i<imgs.length;i++){
            var img=imgs[i];
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            dataURLs[img.index] = canvas.toDataURL(img.format);    
        }

        // Demo: report the results to the console
        console.log(dataURLs);
    }


}); // end $(function(){});
</script>
</head>
<body>
    <h4>Fetch dataURLs from images (see results in the console)</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

[加法：从textarea拉取网址]

以下是如何从textarea中提取网址。

（＃loadImages是当用户在网址框中输入网址时推送的按钮。）

我没有查看jsPDF来源，所以我无法说出您的dims问题。

$('#loadImages').click(function(){    
    var inputText = document.getElementsByTagName("textarea")[0].value.split("\n");
    for(var i = 0; i < inputText.length; i++){
        imageURLs.push({url: inputText[i],format:"image/jpeg"});
    }    
    loadAllImages(start);
});

在Javascript中返回数据URI Base64字符串的函数

1 个答案: