Convert the image file of input type='file'to Base64

With pictures form Uploading data from forms is troublesome , Because pictures are usually uploaded separately from text , It's a lot of trouble , Turn all pictures into base64 You can upload it as text . What words do not , Look at the code ：

First define a type as file Of input The tag also defines a onchange event , And introduce a event Parameters .

<div>
    <input type="file" id="imgTest" type="file" οnchange="imgChange(event)" accept=".gif,.jpg,.jpeg,.png">
</div>
<img src="" id="showImage" alt="">

In this onchange The event method will receive a event Parameters , We can get this in this parameter input The tag object of can also get this file .

function imgChange(e) {
    console.info(e.target.files[0]);// Picture file 
    var dom =$("input[id^='imgTest']")[0];
    console.info(dom.value);// The path to this file is  C:\fakepath\icon (5).png
    console.log(e.target.value);// This is also the path of the file and the above dom.value It's the same 
    var reader = new FileReader();
    reader.onload = (function (file) {
        return function (e) {
           console.info(this.result); // This is base64 The data of the 
            var sss=$("#showImage");
            $("#showImage")[0].src=this.result;
        };
    })(e.target.files[0]);
    reader.readAsDataURL(e.target.files[0]);

expand ： Change the picture in the page into base64 The data of

<!-- Here's a picture first -->
<img id="img" src="/img/my.jpg" alt="" style="width: 150px;height: 150px">

<input type="button" οnclick="imgChaneBase64()" value="img Draw labels to canvas" /><br />
<!-- introduce html2canvas-->
<script type="text/javascript" src="/lib/html2canvas/html2canvas.js"></script>
<script type="text/javascript">
    function imgChaneBase64() {
        // It's going to be base64 The picture of html Tag when parameters are passed in , Here if you will document Come in , It will turn the whole page into a picture , stay then Will return a canvas
        html2canvas(document.getElementById("img")).then(function(canvas) {
            console.info(canvas);
            var imgData = canvas.toDataURL("image/png"); // Here will be canvas Turn into base64 The data of 
            document.body.appendChild(canvas); // When you right-click this tab on the page, you will be prompted to save the picture , After saving, it will be saved with png Format preservation 

        });
    }
</script>

It should be noted here that this method actually uses the principle of screen capture , take html The content becomes base64 Of , All this is not really turning this picture into base64.