- A+
所属分类：Web前端
最近做一个图片上传需要裁剪一下的功能然后百度了一下，找到了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>
