简体   繁体   中英

converting a DIV to base64

How do I convert items inside a DIV to base64? See 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;
}
var imageUrl = $('#img2b64').find('input[name=url]').val();

There is no <input name="url"> in your code so this is returning undefined . Perhaps you meant:

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

However you'll find that this introduces its own error:

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

Meaning that you can't load that image into a Canvas because the target server does not support CORS. You'll either have to download that image to your own server first & load it into your canvas from there. Either that or enable CORS on indianapublicmedia.org

To problem that I see directly is in your jQuery where you do:

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

Probably the console.log() below that line doesn't give you any valid URL, that should ring a bell. So the line above the console.log() doesn't do it's job.

That's because you are looking for any <input /> element (with name attribute = "url" ) inside the DIV with ID "img2b64". Also you are getting the value of the element with val() . You probably wanted to do something differently there.

If you want to get all images inside the DIV, then you need to simply look for img . To get the src attribute, do attr('src') :

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

If you want to add an additional check for images with non-data src , do:

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

I did not check if the rest of the code (eg convertImgToBase64() function) is correctly working. You should always specify in your question what does work and what doesn't to get the best answers on SE.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM