最近做一个图片上传需要裁剪一下的功能然后百度了一下，找到了cropperjs
说明文档 https://www.npmjs.com/package/cropperjs
这是一个简单的基础使用
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>上传图片</title> <!– 样式 –> <link rel=”stylesheet” href=’./node_modules/cropperjs/dist/cropper.css’ /> <!– js –> <script src=”./node_modules/cropperjs/dist/cropper.js”></script> <style> .allbox{ width: 100%; display: flex; margin-bottom: 20px; }
/* 装上传图片 */ .box1{ width: 500px; height: 500px; background: rgba(40, 40, 40, 0.3); } /* 被裁剪展示图片容器 */ .box2{ width: 100px; height: 100px; margin-left:100px; }
</style> </head> <body> <div class=”allbox”> <!– 展示图片 –> <div class=”box1″> <img id=”img1″> </div>
<div class=”box2″>
</div> </div> <input id=”input1″ type=”file”></input> <button id=”button1″>保存图片</button>
<script>
let img1 =document.getElementById(‘img1’) let input1 = document.getElementById(‘input1’) let button1 = document.getElementById(‘button1’)
// 上传的图片储存一下 let fileImg; // 声明一个变量 let cropper = new Cropper(img1,{ aspectRatio:1/1, // 裁切比例 viewMode:1, // 0 无限制 1 裁剪框不超过图片 2具体个1差不多没看出 ,3拉伸图片 autoCropArea: 0.5 , //裁切框大小 默认0.8(原图的80%) // 跟多配置选项 https://www.npmjs.com/package/cropperjs })
//上传图片时 input1.onchange = (event) => {
fileImg = event.target.files[0]
// cropper.replace(url,[hasSameSize]) 设置图片 hasSameSize type:Boolean,Default: false cropper.replace(URL.createObjectURL(fileImg),false)
}
// 保存时 button1.onclick = () => { let base64Img = cropper.getCroppedCanvas().toDataURL() console.log(base64Img) cropper.getCroppedCanvas().toBlob((blob) => { // 得到 blob 图片 console.log(‘blob’,blob) // 得到 file 文件
console.log(‘file’,new window.File([blob], fileImg.name, {type: fileImg.type})) }) }
</script> </body> </html>
