< script type = "text/javascript" > function readURL (res) { if (res) { var reader = new FileReader () ; reader . onload = function (e) { console. log (e . target . result); $( '#blah' ) . attr ( 'src' , e . target . result); } reader . readAsDataURL (res); } } //this is for image preview while uploadding function view (){ const file = document. getElementById ( 'imgInp' ) . files[ 0 ]; console. log (file); //this is image compress imageConversion . compressAccurately (file, 100 ) . then (res => { //The res in the promise is a compressed Blob type (which can be treated as a File type) file; console. log (res); readURL( res ) }) } imageConversion link < script src = "https://cdn.jsdelivr.net/gh/WangYuLue/image-conversion /build/conversion.js" ></ script >
<! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < title >compose Blog</ title > < meta name = "description" content = "" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > <!-- CSS only --> < link rel = "stylesheet" href = "/dashCss/main.css" > < link rel = "stylesheet" href = "/dashCss/createBlog.css" > <!-- tailwindcss --> <!-- <script src="https://cdn.tailwindcss.com"></script> --> <!-- summarnote cdn --> < link href = "https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel = "stylesheet" >