javascript - 将 DIV 转换为 base64

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");

但是您会发现这会引入自己的错误:

Image from origin 'http://indianapublicmedia.org' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

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