在Javascript中返回图像的数据URI Base64字符串的函数答案

【问题标题】：Function that returns the data URI Base64 string of image in Javascript在Javascript中返回图像的数据URI Base64字符串的函数
【发布时间】：2014-09-15 15:25:01
【问题描述】：

我真的很难编写一个函数来获取图像的 Base64 编码。由于此函数将成为使用 jsPDF.js 从网站即时生成 PDF 的更大脚本的一部分，因此能够计算这些 Base64 编码作为函数的结果非常重要。图像将托管在同一台服务器上，因此不会出现同源问题。我知道 canvas 元素的 .toDataURL() 方法可以做到这一点，我也知道图像需要完全加载才能正确获取 Data 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);
    };
}

问题是我不知道如何从 onload 函数中“提取” dataURL 值，以便 encodeBase64 函数简单地返回该值，我可以将它放入一个数组中。 Alert 正确返回该字符串，因此我确定代码可以正常工作，但如果我尝试编写任何其他语句，如“return dataURL”或类似语句，我只会得到 undefined 值。请帮忙。

【问题讨论】：

标签： javascript canvas encoding base64 data-uri

【解决方案1】：

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

然后使用画布创建 dataURLs 并将 dataURLs 加载到第二个数组中。

示例代码和演示：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拉取url]

以下是从文本区域中提取 url 的方法。

（#loadImages 是一个按钮，当您的用户在文本框中输入 url 时会按下该按钮）。

我还没有查看 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);
});

【讨论】：

我正在尝试编辑您的代码，以便从 textarea 输入中获取 url，因此我将 imageURLs.push(...) 部分替换为类似 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"}); } 的内容但是，当使用 jsPDF 插件，控制台显示“dims 未定义”。我发现“dims”是一个数组，指的是从 base64 字符串中提取的 jpeg 大小，所以在 split 方法或 textarea 中有一些东西会改变字符串！你能帮忙吗？
从文本区域中提取 URL 不是问题 - 请参阅我附加的答案。