图片裁剪工具cropperjs |
您所在的位置：网站首页 › 橘子买apex金币价格表 › 图片裁剪工具cropperjs |
|
cropperjs官网： Cropper.js html使用： 后期更新 vue使用： 下载：npm install cropperjs 引用： import "cropperjs/dist/cropper.css"; import Cropper from "cropperjs"; 使用： //裁剪区域： //预览区域： //操作区域： 裁剪 放大 缩小 左旋转 右旋转 还原 import "cropperjs/dist/cropper.css"; import Cropper from "cropperjs"; export default { name: "handleImg", data() { return { cropper: null, img: {}, ImageTempPath: "https://tse2-mm.cn.bing.net/th/id/OIP-C.b7mT0r1Qe8Qe8hQVA-7npQHaHF?w=218&h=209&c=7&r=0&o=5&dpr=1.3&pid=1.7", }; }, mounted() { this.cropImage(); }, methods: { cropImage() { this.cropper = new Cropper(this.$refs.imgRef, { // aspectRatio: 1 / 1, // 裁剪框的默认比例 preview: ".previewImg", // 预览视图 viewMode: 1, //0 无限制 1 限制裁剪框不能超出图片的范围 2 限制裁剪框不能超出图片的范围 且图片填充模式为 cover 最长边填充3 限制裁剪框不能超出图片的范围 且图片填充模式为 contain 最短边填充 autoCropArea: 0.65, // 0-1之间的数值，定义自动剪裁区域的大小，默认0.8 resizable: true, // 是否允许改变裁剪框的大小 scalable: true, //是否可以缩放图片，默认true restore: false, //窗口改变后 恢复被裁剪的区域 默认true dragMode: "none", // none禁止重新框选选取 // cropBoxMovable: true, // 是否可以拖拽裁剪框 默认true // cropBoxResizable: true, // 是否可以改变裁剪框的尺寸 默认true // dragCrop: false, // 是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域 // autoCrop: true, //允许初始化时自动的裁剪图片 配合 data 使用 默认true // movable: true, // 是否允许移动图片，默认true // zoomable: true, // 是否允许缩放图片大小，默认true // zoomOnTouch: true, //是否可以通过拖拽触摸缩放图片 默认true // zoomOnWheel: true, // 是否可以通过鼠标滚轮缩放图片 默认true // mouseWheelZoom: true, // 是否允许通过鼠标滚轮来缩放图片 // touchDragZoom: true, // 是否允许通过触摸移动来缩放图片 // wheelZoomRatio: 0.2, //设置鼠标滚轮缩放的灵敏度 默认 0.1 // rotatable: true, // 是否允许旋转图片，默认true // modal: true, //是否显示图片和裁剪框之间的黑色蒙版 默认true // center: true, // 是否显示裁剪框中间的 ‘+’ 指示器 默认true // guides: true, // 是否显示裁剪框的虚线(九宫格) // highlight: true, // 是否显示裁剪框上面的白色蒙版 （很淡）默认true // background: true, //是否在容器内显示网格状的背景 默认true // dragMode: "none", // 禁止重新框选选取 // toggleDragModeOnDblclick: true, //是否可以通过双击切换拖拽图片模式（move和crop）默认true 当拖拽图片模式为none时不可切换 该设置必须浏览器支持双击事件 // responsive: true, //窗口改变后，重新渲染，默认true // restore: true, //窗口改变后 恢复被裁剪的区域 默认true // checkCrossOrigin: true, //检查图片是否跨域 默认true // checkOrientation: true, //检查图片的方向信息（仅JPEG图片有）默认true crop(event) { // console.log(event.detail.x); // console.log(event.detail.y); // console.log(event.detail.width); // console.log(event.detail.height); // console.log(event.detail.rotate); // console.log(event.detail.scaleX); // console.log(event.detail.scaleY); }, }); console.log(this.cropper); }, EditSeal(method) { if (method) { switch (method) { case "tailor": this.tailor(); break; case "blowUp": this.cropper.zoom(0.1); break; case "reduce": this.cropper.zoom(-0.1); break; case "Leftrotate": this.cropper.rotate(5); break; case "Rightrotate": this.cropper.rotate(-5); break; case "restore": this.cropper.reset(); break; } } }, tailor() { var result = this.cropper.getCroppedCanvas(); //获取裁剪后数据 var base64url = result.toDataURL("image/jpeg"); this.img.FileBase64 = base64url; var File = this.base64ToFile(base64url, " "); var blobURL = URL.createObjectURL(File); this.cropper.reset(); //重置数据 this.cropper.replace(blobURL); //更换当前图片为裁剪后的图片 console.log(result, base64url, File, blobURL); }, }, }, }; |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |