js图片裁剪上传

上传步骤:

1. 图片预览
2. 裁剪
3. 上传

图片预览

 <input type="file" name="" id="fileW">
 <img src="" id="img" alt="">
 <script>
        const fileW = document.getElementById('fileW')
        const img = document.getElementById('img')
        //上传图片事件
        fileW.onchange = e =>{
            console.log("_",e.target.files[0])
            //获得一个files文件,通过fileReader转换成base64
            const file = e.target.files[0];
            const reader = new FileReader();
            //这个是异操作,需要获取base64路径,通过回调reader有个onload,可以执行
            reader.onload = (e) =>{
                console.log(e.target.result)
                img.src = e.target.result;
                init()
            }
            reader.readAsDataURL(file); 
        }
 </script>

裁剪,我使用的插件Cropper ,具体使用,可查看Cropper官网

 const init = () => {
            const Image = document.getElementById('img')
            myCropper = new Cropper(Image, {
                viewMode: 1,
                dragMode: "none",
                initialAspectRatio: 1,
                aspectRatio: 1,
                preview: "#before",
                background: false,
                autoCropArea: 1,
                zoomOnWheel: false,
            });
  }

上传

 btn.addEventListener('click', () => {
  //这个i就是裁剪完的路径...具体需要啥格式自行转换
            let i = myCropper
                .getCroppedCanvas({
                    imageSmoothingQuality: "high",
                })
                .toDataURL("image/png");
          
           
})