uniapp图片裁剪
文章描述：
uniapp图片裁剪插件使用
插件地址：https://ext.dcloud.net.cn/plugin?id=1312
原插件地址：https://ext.dcloud.net.cn/plugin?id=821
template
<image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></image-cropper>
<image :src="cropFilePath" @tap="upload" class="user-img"></image>script
import ImageCropper from "@/components/ling-imgcropper/ling-imgcropper.vue";
export default{
components: {
ImageCropper,
},
data(){
return{
tempFilePath: "",
cropFilePath: "",
}
},
methods:{
// 图片
upload() {
uni.chooseImage({
count: 1, //默认9
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
sourceType: ["album"], //从相册选择
success: (res) => {
this.tempFilePath = res.tempFilePaths.shift();
},
});
},
confirm(e) {
this.tempFilePath = "";
this.cropFilePath = e.detail.tempFilePath;
// #ifdef APP-PLUS||MP
//除了H5端返回base64数据外，其他端都是返回临时地址，所以你要判断base64还是临时文件名，（用条件编译APP-PLUS||MP执行编译。）
//按我这里是先上传裁剪得来的临时文件地址然后得到临时文件名，
//待活你要判断是H5还是其他端传给后端类型参数让后端判断执行何种情况代码就OK了
// #endif
uni.uploadFile({
url: "http://localhost", // 后端地址上传图片接口地址
filePath: this.cropFilePath,
name: "file",
fileType: "image",
//formData:{},传递参数
success: (uploadFileRes) => {
var backstr = uploadFileRes.data;
//自定义操作
},
fail(e) {
console.log("this is errormes " + e.message);
},
});
},
cancel() {
console.log("canceled");
this.tempFilePath = "";
},
}
}
如需要把透明背景修改成黑色打开components/ling-imgcropper/ling-imgcropper.vue文件，搜索类名vue-cropper
注释或删除background-image
新增
background: rgba(0, 0, 0, 0.8);
发布时间：2022/09/19
发表评论