从HTML输入标签获取图像的URL

Question

I want to get the base64 of an image with Javascript.

An answer from here, https://stackoverflow.com/a/20285053/5065874 solved part of my problem.

Basically, he implemented this function:

function toDataUrl(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}

And used it like this:

toDataUrl('http://example/url', function(base64Img) {
    console.log(base64Img);
});

But the problem is I don't have a url to pass to toDataUrl(url, callback) , rather I have an image input tag on my HTML page:

<form id="myId">
    <input type="image" name="myImage">
</form>

So what should I pass to toDataUrl() in order for the function to work correctly?

Answer 1

您应该传递input元素的src属性，因为它应该包含它显示的URL。

toDataUrl(document.getElementsByName('myImage')[0].src, function...)