Question

如何将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;
}

Answer 1

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

Answer 2

我直接看到的问题出在你的jQuery中：

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

该行下面的console.log()可能没有给你任何有效的网址，应该响铃。因此，console.log()上方的行不起作用。

那是因为您正在寻找ID为“img2b64”的DIV中的任何<input />元素（name属性= "url"）。您还可以使用val()获取元素的值。你可能想在那里采取不同的做法。

如果你想获得DIV中的所有图像，那么你只需要查找img。要获取src属性，请执行attr('src')：

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

如果要为包含非数据src的图像添加其他检查，请执行以下操作：

var imageUrl = $('#img2b64').find('img:not([src^="data"])').attr('src');

我没有检查代码的其余部分（例如convertImgToBase64()功能）是否正常工作。你应该总是在你的问题中指明哪些有效，哪些无法在SE上获得最佳答案。

将DIV转换为base64

2 个答案: