Vue + ccropper.js裁切图片（vue-cropper）

有什么问题可以加我的微信，有问必答。

致力于技术分享

按原比例裁切图片，不失真

安装：

cnpm install vue-cropper

使用：

import VueCropper from 'vue-cropper'
  <div class="cropper-content"><div class="cropper"><vueCropperref="cropper":img="option.img":outputSize="option.size":outputType="option.outputType":info="true":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":autoCrop="option.autoCrop":autoCropWidth="option.autoCropWidth":autoCropHeight="option.autoCropHeight":fixedBox="option.fixedBox"@realTime="realTime"@imgLoad="imgLoad"></vueCropper></div><div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}"><div :style="previews.div" class="preview"><img :src="previews.url" :style="previews.img"></div></div></div><div class="footer-btn"><div class="scope-btn"><label class="btn" for="uploads">更换图片</label><input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)"><button  @click="changeScale(1)">+</button><button  @click="changeScale(-1)">-</button><button  @click="rotateLeft">↺</button><button  @click="rotateRight">↻</button></div><div class="upload-btn"><button  @click="down('blob')">下载</button></div></div>
 
export default {data() {return {crap: false,previews: {},option: {img: 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png',size: 1,full: false,//输出原图比例截图 props名full
        outputType: 'png',
canMove : true, original : false, canMoveBox : true, autoCrop : true, autoCropWidth : 200 , autoCropHeight : 200 , fixedBox : true } , downImg : '#' , } ; } , methods : { changeScale (num ) { num = num || 1 this.$refs .cropper . changeScale (num ) } , rotateLeft () { this.$refs .cropper . rotateLeft () } , rotateRight () { this.$refs .cropper . rotateRight () } , finish (type ) { // 输出 // var test = window.open('about:blank') // test.document.body.innerHTML = '图片生成中..' if (type === 'blob' ) { this.$refs .cropper .getCropBlob ((data ) => { var img = window .URL . createObjectURL (data ) this.model = true this.modelSrc = img }) } else { this.$refs .cropper .getCropData ((data ) => { this.model = true this.modelSrc = data }) } } , // 实时预览函数 realTime (data ) { this.previews = data } , down (type ) { // event.preventDefault() var aLink = document . createElement ( 'a' ) aLink .download = 'author-img' // 输出 if (type === 'blob' ) { this.$refs .cropper .getCropBlob ((data ) => { console . log (data ) this.downImg = window .URL . createObjectURL (data ) // aLink.download = this.downImg; console . log ( this.downImg ) aLink .href = window .URL . createObjectURL (data ) aLink . click () }) } else { this.$refs .cropper .getCropData ((data ) => { this.downImg = data aLink .href = data aLink . click () }) } } , uploadImg (e , num ) { //上传图片 // this.option.img var file = e .target .files [ 0 ] 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 ) { this.option .img = data } else if (num === 2 ) { this.example2 .img = data } } // 转化为base64 // reader.readAsDataURL(file) // 转化为blob reader . readAsArrayBuffer ( file ) } , imgLoad (msg ) { console . log (msg ) } } , components : { VueCropper } , }

.cropper-content{display: flex;display: -webkit-flex;justify-content: flex-end;-webkit-justify-content: flex-end;.cropper{width: 350px;height: 300px;}.show-preview{flex: 1;-webkit-flex: 1;display: flex;display: -webkit-flex;justify-content: center;-webkit-justify-content: center;.preview{overflow: hidden;border-radius: 50%;border:1px solid #cccccc;background: #cccccc;margin-left: 40px;}}
}
.footer-btn{margin-top: 30px;display: flex;display: -webkit-flex;justify-content: flex-end;-webkit-justify-content: flex-end;.scope-btn{width: 350px;display: flex;display: -webkit-flex;justify-content: space-between;-webkit-justify-content: space-between;}.upload-btn{flex: 1;-webkit-flex: 1;display: flex;display: -webkit-flex;justify-content: center;-webkit-justify-content: center;}.btn {outline: none;display: inline-block;line-height: 1;white-space: nowrap;cursor: pointer;-webkit-appearance: none;text-align: center;-webkit-box-sizing: border-box;box-sizing: border-box;outline: 0;margin: 0;-webkit-transition: .1s;transition: .1s;font-weight: 500;padding: 8px 15px;font-size: 12px;border-radius: 3px;color: #fff;background-color: #67c23a;border-color: #67c23a;}
}

截图效果：

Vue + ccropper.js裁切图片（vue-cropper）相关推荐

git 裁切_Vue + ccropper.js裁切图片（vue-cropper）
按原比例裁剪图片并且不失真. 安装: cnpm install vue-cropper --save-dev 使用: 选择图片 ref="cropper" :img="o ...
解决：vue.esm.js?efeb:591 [Vue warn]: Do not use built-in or reserved HTML elements as component id: me
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 报错如题: vue.esm.js?efeb:591 [Vue warn]: Do not us ...
vue错误：vue.esm.js?efeb:628 [Vue warn]: Error in render: “TypeError: Cannot read property ‘matched‘ of
控制台出现这个错误vue.esm.js?efeb:628 [Vue warn]: Error in render: "TypeError: Cannot read property 'mat ...
vue.esm.js?efeb:628 [Vue warn]: Error in mounted hook: “Error: target is not existed: .page-componen
vue.esm.js?efeb:628 [Vue warn]: Error in mounted hook: "Error: target is not existed: .page-com ...
vue.esm.js?efeb:571 [Vue warn]: Property or method subItem is not defined on the instance but refe
报错信息 vue.esm.js?efeb:571 [Vue warn]: Property or method "subItem" is not defined on the in ...
vue config.js详解——vue config.js到底是什么，有什么作用?
我们在做vue项目的时候,在根目录中肯定都看到过一个config.js文件,那么这个文件在整个项目中到底有什么作用呢? vue.config.js 是一个可选的配置文件,如果项目的 (和 packag ...
解决vue.esm.js?efeb:628 [Vue warn]: Failed to mount component: template or render function not defined
问题描述原因在文件中有相同名称的 .vue 和.js文件在同一级中在 router.js中引入文件时没有注明是引入.vue 导致编辑器以为引入的是.js文件则报错解决
vue 创建图片坐标点_利用vue+fabric.js获取图片坐标，并实现图片拖拽、旋转、拉伸等功能...
什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库. Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具. ...
Vue + AILabel.js 实现图片标注
一.网址以及demo 官方文档:AILabel与你一路同行 demo地址1: AILabel-标注篇 demo地址2: AILabel示例一览二.我的实例代码(vue环境下) 三.完整代码首先 ...

Vue + ccropper.js裁切图片（vue-cropper）

有什么问题可以加我的微信，有问必答。

Vue + ccropper.js裁切图片（vue-cropper）相关推荐

最新文章

热门文章