vue图片裁剪插件vue-cropper

vue-cropper插件的官网的地址：

https://github.com/xyxiao001/vue-cropper

在线的demo展示：

http://github.xyxiao.cn/vue-cropper/example/

安装

npm install vue-cropper

使用

在需要的组件中直接引用，或者在main.js中

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

组件内

1.设置出一个点击展示裁剪组件的按钮

el-button icon="el-icon-plus" style="padding:15px !important" @click="handleChangeImage"></el-button>
<image-cropper :key="imagecropperKey" :width="300" :height="300" lang-type="zh" @close="close" />
<img :src="imgUrl2" alt="" style="display:inline-block;width:45px;vertical-align: middle;"/>

2.vue-cropper组件弹出层：

<dialog-comp :is-show.sync="dialogFormVisible" :dialog-title="$t('common.direction')" :dialog-width="600" :dialog-height="450" dialog-unit="px" :iconWindow="'icon-ico_minglingxiafa_xuanzhong'"><label class="btn" for="uploads">选择图片</label><input type="file" id="uploads" :value="imgFile" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)" /><div style="padding:10px;display:flex"><div class="cut"><vueCropperref="cropper":img="option.img":outputSize="option.size":outputType="option.outputType":info="option.info":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":autoCrop="option.autoCrop":autoCropWidth="option.autoCropWidth":autoCropHeight="option.autoCropHeight":fixedBox="option.fixedBox":canScale="option.canScale":fixed="option.fixed":centerBox="option.centerBox":high="option.high":mode="option.mode":fixedNumber="option.fixedNumber"@realTime="realTime"@imgLoad="imgLoad"></vueCropper></div><div class="show-preview" :style="{ overflow: 'hidden', margin: '5px' }"><div :style="previews.div" class="preview"><img :src="previews.url" :style="previews.img" /></div></div></div><div class="dialog-footer" style="text-align:right"><el-button @click="closeCropper" size="small">取 消</el-button><el-button type="primary" @click="finish('blob')" size="small">确 定</el-button></div></dialog-comp>

3.js部分

import { VueCropper } from "vue-cropper";
// 官网地址https://github.com/xyxiao001/vue-cropper
export default {components: {VueCropper,},data() {return {previews: {},model: false,modelSrc: "",fileName: "",imgFile: "",dialogFormVisible: false,option: {img: "",outputSize: 1, //剪切后的图片质量（0.1-1）full: false, //输出原图比例截图 props名fulloutputType: "png", //裁剪生成图片的格式canMove: true, //上传图片是否可以移动original: false, //上传图片按照原始比例渲染canMoveBox: false, //截图框是否可以拖动autoCrop: true, //是否默认生成截图框autoCropWidth: 200, //默认截图框宽度autoCropHeight: 200, //默认生成截图框高度fixedBox: false, //固定截图框大小fixedNumber: [1, 1], //截图框的宽高比例mode: "auto 200px", //图片默认渲染方式info: true, //裁剪框的大小信息canScale: true, //图片是否允许滚轮缩放fixed: true, //是否开启截图框宽高固定比例centerBox: true, //截图框是否被限制在图片里面high: true, //是否按照设备的dpr 输出等比例图片},imgUrl2: "",originIcon: "",};},methods: {closeCropper() {console.log("chufa");this.dialogFormVisible = false;},//上传图片（点击上传按钮）finish(type) {console.log(type);let selft = this;let formData = new FormData();// 输出if (type === "blob") {selft.$refs.cropper.getCropData((data) => {// console.log(this.$refs.cropper);// let img = window.URL.createObjectURL(data);let img = data;selft.model = true;selft.modelSrc = img;this.imageToCircle(img).then((res) => {//截出来的图片画成圆形selft.originIcon = res;});// 以下是上传的动作});} else {this.$refs.cropper.getCropData((data) => {});}},//选择本地图片uploadImg(e, num) {console.log("uploadImg");var selft = this;//上传图片var file = e.target.files[0];selft.fileName = file.name;if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");return false;}var reader = new FileReader();reader.onload = (e) => {let data;if (typeof e.target.result === "object") {// 把Array Buffer转化为blob 如果是base64不需要data = window.URL.createObjectURL(new Blob([e.target.result]));} else {data = e.target.result;}if (num === 1) {selft.option.img = data;} else if (num === 2) {selft.example2.img = data;}};// 转化为base64reader.readAsDataURL(file);// 转化为blob// reader.readAsArrayBuffer(file);},imageToCircle(picUrl) {// 通过图片地址换出圆形的图片let radius, diameter, canvas, ctx;let img = new Image();img.setAttribute("crossOrigin", "anonymous"); // 解决图片跨域访问失败img.src = picUrl;return new Promise((reslove) => {img.addEventListener("load",() => {let { width, height } = img;if (img.width > img.height) {radius = height / 2;} else {radius = width / 2;}diameter = radius * 2;canvas = document.createElement("canvas");if (!canvas.getContext) {// 判断浏览器是否支持canvas，如果不支持在此处做相应的提示console.log("您的浏览器版本过低，暂不支持。");return false;}canvas.width = diameter;canvas.height = diameter;ctx = canvas.getContext("2d");ctx.clearRect(0, 0, diameter, diameter);// 描边ctx.save(); //save和restore可以保证样式属性只运用于该段canvas元素ctx.strokeStyle = "#eee"; //设置边线的颜色ctx.lineWidth = 2;ctx.beginPath(); //开始路径ctx.arc(radius, radius, radius - 5, 0, Math.PI * 2); //画一个整圆.ctx.stroke(); //绘制边线// 截圆形图ctx.save();ctx.beginPath();ctx.arc(radius, radius, radius - 5, 0, Math.PI * 2);ctx.clip();let x = 0,y = 0,swidth = diameter,sheight = diameter;ctx.drawImage(img, x, y, swidth, sheight, 0, 0, diameter, diameter);ctx.restore();// toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码let dataURL = canvas.toDataURL("image/png");reslove(dataURL);},false);});},show() {this.dialogFormVisible = true;},// 实时预览函数realTime(data) {// console.log("realTime");this.previews = data;},imgLoad(msg) {// console.log("imgLoad");console.log(msg);},listEvent() {this.app.$on("handle-change-image", this.show);},offEvent() {this.app.$off("handle-change-image", this.show);},},mounted() {this.listEvent();},beforeDestroy() {this.offEvent();},
};

vue图片裁剪插件vue-cropper相关推荐

Vue图片裁剪插件vue-cropper的使用，应用场景用户上传头像
文章目录前言一.安装和引入二.Events And Methods 三.简单使用四.实际应用(含本地图片下载) 前言一个简单的用户上传头像的例子功能:选择图片,设置裁剪位置,实时预览一. ...
VUE图片裁剪组件,基于VueCropper
VUE图片裁剪组件,基于VueCropper 搬砖的同志麻烦点个赞支持下效果图第一步安装vue-cropper插件 npm install vue-cropper 第二步创建组件,把下面的代码复制 ...
vue图片裁剪组件_使用Vue-Rx的Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
vue图片裁剪组件_Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
VUE图片裁剪功能vue-img-cutter
VUE图片裁剪功能vue-img-cutter 前言: 演示地址兼容IE9+,MSEdge,Chrome,Firefox 两种展现形式,行内或弹窗可旋转.缩放图片任意比例.大小裁剪固定比例.大 ...
一个简单的 jQuery 图片裁剪插件----cropper
浏览器支持 Chrome (latest 2) Firefox (latest 2) Internet Explorer 8+ Opera (latest 2) Safari (latest 2) C ...
vue 图片剪辑_一个简单的Vue图片剪辑插件
vue 图片剪辑 Vue-Crpopper (vue-crpopper) A simple picture clipping plugin for vue. 一个简单的Vue图片剪辑插件. 安装 (i ...
php裁剪插件,简单功能强大的jQuery图片剪裁插件Image Cropper 中文api
图片剪裁插件Image Cropper使用方法引入必要的js和css核心文件构建html,可以将图片或canvas直接包裹到一个块级元素中初始化插件,可以使用$.fn.cropper方法来初始化 ...
uniapp微信小程序图片裁剪插件，支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式
qf-image-cropper2.0 图片裁剪插件 1.效果预览: 2.平台支持: 1.支持微信小程序(移动端.PC端.开发者工具) 2.H5平台(2.1.0版本起) 3. 支持APP平台(2.1. ...

vue图片裁剪插件vue-cropper

vue图片裁剪插件vue-cropper相关推荐

最新文章

热门文章