Question

我有一个我想做的事情的概念，但需要帮助把各个部分放在一起。

我正在使用html2canvas来寻找反馈表单。它适用于我，但我的Flickr（跨域）照片图像不起作用。

我想知道而不是创建一个完整的代理服务器，我只是将图像转换为客户端的base64？然后转换后只需用base64字符串替换“data-image”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中的每个数据图像，用一个base64字符串替换src图像，使其包含在我的画布中。

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

});

Answer 1

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

另外text（）在打开和关闭标记之间获取文本，使用数据（＆＃39;图像＆＃39;）代替。

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

});

Demo

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

1 个答案: