JQuery 用 Base64 替换图像（html2canvas 无代理）答案

【问题标题】：JQuery replace image with Base64 (html2canvas no proxy)JQuery 用 Base64 替换图像（html2canvas 无代理）
【发布时间】：2014-09-22 16:40:24
【问题描述】：

我对自己想做的事情有一个概念，但需要帮助将各个部分组合在一起。

我正在使用html2canvas 来获取反馈表。它对我来说效果很好，但我的 Flickr（跨域）照片图像不起作用。

我想知道，我不能只在客户端将图像转换为 base64，而不是创建整个代理服务器吗？然后一旦转换，只需用 base64 字符串替换“数据图像”src？

HTML

<div class='container1'>
<div class='box photo col3'> <a data-image='http://farm4.static.flickr.com/3737/1530282_3bc6b9.jpg' data-toggle='lightbox' href='http://www.flickr.com/photos/1773075@N04' target='_blank'></a></div>
…..
</div>

JS（来源：SO）

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

放在一起： 这是我遇到问题的地方。我要做的是为 div 类 container1 中的每个数据图像创建一个，将 src 图像替换为 base64 字符串，使其包含在我的画布中。

$( "data-image" ).each( function( index, element ){
    convertImgToBase64($( this ).text(), function(base64Img){
            replace $(this).attr(‘data-image’) with base64 string
    });

});

【问题讨论】：

标签： javascript jquery html2canvas

【解决方案1】：

Selector [atribute_name] 获取所有具有指定属性的元素。

还有 text() 获取打开和关闭标签之间的文本，使用 data('image') 代替。

$("[data-image]").each( function( index, element ){
    convertImgToBase64($( this ).data('image'), function(base64Img){
        $(element).attr('src', base64Img);
    });

});

Demo

【讨论】：

jquery.attr 似乎没有接受所以我尝试使用静态图像但仍然没有看到它替换图像：$("[data-image]").each(function(index, element ){$(this).attr('data-image', 'images/splash.png');});
啊，我的错，应该是 attr('src', ...)。
@Chris 我添加了一个演示