javascript - 将DIV转换为base64

如何将DIV中的项目转换为base64？见examle FIddle

的HTML：

<div id="img2b64"> <img src="http://indianapublicmedia.org/stateimpact/files/2013/01/apple-image-300x300.jpg"> <div><br />

jQuery的：

$('#ss').click(function(event){
    var imageUrl = $('#img2b64').find('input[name=url]').val();
    console.log('imageUrl', imageUrl);
    convertImgToBase64(imageUrl, function(base64Img){
        $('.output')
            .find('textarea')
                .val(base64Img)
                .end()
            .find('a')
                .attr('href', base64Img)
                .text(base64Img)
                .end()
            .find('img')
                .attr('src', base64Img);
    });

    event.preventDefault();
});


function convertImgToBase64(url, callback, outputFormat){
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var img = new Image;
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img,0,0);
        var dataURL = canvas.toDataURL(outputFormat || 'image/png');
        callback.call(this, dataURL);
        // Clean up
        canvas = null;
    };
    img.src = url;
}

最佳答案

var imageUrl = $('#img2b64').find('input[name=url]').val();

您的代码中没有<input name="url">，因此将返回undefined。也许您的意思是：

var imageUrl = $('#img2b64').find('img').prop("src");

但是，您会发现这引入了自己的错误：


  跨域资源共享策略已阻止加载来自源“ http://indianapublicmedia.org”的图像：请求的资源上不存在“ Access-Control-Allow-Origin”标头


这意味着您无法将图像加载到Canvas中，因为目标服务器不支持CORS。您要么必须首先将该图像下载到您自己的服务器，然后从那里将其加载到画布中。要么在indianapublicmedia.org上启用CORS

关于javascript - 将DIV转换为base64，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29344231/