How can locally uploaded images be uncompressed and displayed on the page with canvas?

the new FileReader () method I use now is uploaded locally and displayed, but if it is encoded by base64 bit, how to modify it so that it does not display in base64 bit?

  <input type="file" accept="image/*" type="file"" name="imageFile" onchange="upload()">

<div class="box">
    <canvas id="canvas"></canvas>
</div>

 function upload() {    
        let file = document.querySelector("input[type=file]").files[0]  
        //     
        let reader = new FileReader()        
        reader.readAsDataURL(file) //URLresulr base64        
        reader.onload = function(e) { //              
            let result = e.target.result // base64             
            var image = new Image();
            image.src = result // imagebase64             
            image.onload = function(){                 
                var canvas = document.querySelector("-sharpcanvas");                
                var ctx = canvas.getContext("2d");                 
                canvas.width = image.width; // canvas                 
                canvas.height = image.height;                 
                ctx.drawImage(image, 0, 0, image.width, image.height) // canvas      
                let dataUrl = canvas.toDataURL("image/jpeg") // 0.92                                                                  
            //   // dataUrl    
            }   
            
        } 
}
Aug.06,2021

toBlob can be converted to binary data


if you don't use base64 only for display, you can use URL.createObjectURL

Menu