CODEWITHSUNDEEP
javascriptjqueryhtml2canvas
Chris
Chris

Reputation: 18884

JQuery replace image with Base64 (html2canvas no proxy)

I have a concept of what I’d like to do, but need help putting the pieces together.

I am playing around with html2canvas for a feedback form. Its works well for me but my Flickr (cross domain) photograph images don’t work.

I am wondering instead of creating an entire proxy server cant I just convert the images to base64 on the client side? Then once converted just do a replace of the “data-image” src with the base64 string?

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 (source: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;
}

Putting it together: Here is where I have the issues. What I am trying to do is a for each data-image in div class container1, replace the src image with a base64 string so its included in my canvas.

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

});

Upvotes: 2

Views: 2276

Answers (1)

Wojciech Mleczek
Wojciech Mleczek

Reputation: 1634

Selector [atribute_name] get all elements with specified attribute.

Also text() get text between open and close tag, use data('image') instead.

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

});

Demo

Upvotes: 4

Related Questions