生成一个画布在原图上
注意事项，图片地址问题，用于展示和截图的图片地址bese64图片，blob，用与裁剪的bese64最合适
注意及时销毁.destory() input传入的时候重新生成。
input change上传文件相同时不会发生变化
1.安装cropperjs
npm i cropperjs --save
2.引入js
import Cropper from "cropperjs";
//引入css
import 'cropperjs/dist/cropper.css'
html部分
<div class="img">
<input v-show="imageShow" class="fileInput" type="file" placeholder="点击上传商品图片" accept="image/*"
id="imgReader" @change="loadingImg" >
<p>点击上传商品图片</p>
<!-- 上传图片展示 -->
<img alt="" class="images" ref="image">
</div>
js部分
import Cropper from "cropperjs";
import 'cropperjs/dist/cropper.css'
import { ref, reactive } from 'vue'
const image = ref('')
//控制上传文件层的显示与隐藏
const imageShow= ref(false)
let CROPPER
const sureSava = () => {
// 拿到裁剪后的图片
if (CROPPER) {
Shuju.afterImg = CROPPER.getCroppedCanvas({
imageSmoothingQuality: 'high'
}).toDataURL('image/jpeg'); // 设置图片格式
CROPPER.destroy()
// CROPPER
// 控制上传文件层的显示与隐藏
imageShow.value = true
document.querySelector('#imgReader').value = '';
}
image.value.src = ''
falg.value = false
}
// let CROPPER
const esc = () => {
// 销毁CROPPer
//遮罩层的显示与隐藏
// falg.value = false
// 清空image地址
image.value.src = ''
if (CROPPER) {
CROPPER.destroy()
// CROPPER
imageShow.value = true
document.querySelector('#imgReader').value = '';
}
}
css
.fileInput {
position: absolute;
left: 0;
right: 0;
z-index: 1;
width: 200px;
height: 200px;
opacity: 0;
// position: relative;
// z-index: -1;
}
.images {
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
.img {
margin: 20px 0;
width: 200px;
height: 200px;
background-color: #676666;
text-align: center;
border: 1px solid rgb(180, 177, 177);
position: relative;
p {
top: 0;
left: 30px;
position: absolute;
// z-index: 999;
margin-top: 80px;
}
&:hover {
cursor: pointer;
}
}
