VUE图片裁剪，打码，旋转功能

话不多说，直接上代码

1，先下载插件。

cnpm install image-mosaic -D   cnpm install --save vue-cropper

2，在components目录下创建一个imageEdit文件夹，文件夹下创建index.vue，index.vue中内容如下：

<template><div><el-dialogtitle="":visible.sync="dialogImg":close-on-click-modal="false"width="70%"top="5vh":before-close="handleClose"><div v-loading="isLoading" class="edit-img"><vueCropperref="cropper":img="editImgUrl":info="false":output-type="'png'":info-true="true":can-move="true":can-scale="true":can-move-box="true":auto-crop-width="400":auto-crop-height="400":mode="'cover'":center-box="true":enlarge="2":full="true":max-img-size="200000"@imgLoad="imgLoadCrop"/><div v-if="isMosaic" class="tumo-img"><canvas id="canvas" /></div><div class="button-group"><div class="button-item" @click="rotateHandle(1)">左旋90</div><div class="button-item" @click="rotateHandle(2)">右旋90</div><div class="button-item" @click="cropHandle">{{ indexTab==1?'裁 剪':'取消裁剪' }}</div><div class="button-item" @click="mosaicHandle">{{ !isMosaic?'打 码':'取消打码' }}</div><div class="button-item" @click="saveHandle">保 存</div></div></div></el-dialog></div>
</template><script>import { VueCropper } from 'vue-cropper'
import Mosaic from 'image-mosaic'
import { upLoad1 } from '@/api/files-management'
export default {components: {VueCropper},props: {dialogImg: {type: Boolean,default: () => false},imgPath: {type: String,default: () => ''}},data() {return {editImgUrl: '', // 编辑后的图片indexTab: 1, // 1是裁剪，2是取消裁剪isMosaic: false, // 是否打码isLoading: true}},watch: {imgPath (val) {this.editImgUrl = val}},methods: {imgLoadCrop() {this.isLoading = false},// 裁剪cropHandle() {if (this.indexTab === 1) {this.indexTab = 2setTimeout(() => {this.$refs.cropper.goAutoCrop()}, 0)} else {this.$refs.cropper.clearCrop()this.indexTab = 1}},// 旋转rotateHandle(val) {this.$refs.cropper.getCropData((data) => {this.editImgUrl = datathis.$refs.cropper.clearCrop()setTimeout(() => {if (val === 1) this.$refs.cropper.rotateLeft()else this.$refs.cropper.rotateRight()}, 0)})},// 马赛克mosaicHandle() {this.isMosaic = !this.isMosaicif (this.isMosaic) {this.$refs.cropper.getCropData((data) => {this.editImgUrl = datathis.indexTab = 1this.$refs.cropper.clearCrop()setTimeout(() => {this.initMosaic()}, 0)})}},handleClose() {this.$refs.cropper.clearCrop()this.editImgUrl = ''this.indexTab = 1this.isMosaic = falsethis.$emit('closeDialog')},drawImageToCanvas(imageUrl) {const canvas = document.querySelector('#canvas')const ctx = canvas.getContext('2d')return new Promise((resolve, reject) => {const image = new Image()image.crossOrigin = 'Annoymous'image.onload = function() {const w = image.widthconst h = image.heightconst yw = document.body.clientWidth * 0.7const yh = 733if ((w / yw) >= (h / yh)) {image.width = ywimage.height = (yw / w) * h} else {image.height = yhimage.width = (yh / h) * w}canvas.width = image.widthcanvas.height = image.heightctx.drawImage(this, 0, 0, image.width, image.height)resolve(ctx)}image.src = imageUrl})},initMosaic() {this.drawImageToCanvas(this.editImgUrl).then((ctx) => {const mosaic = new Mosaic(ctx)const MouseEvents = {init() {mosaic.context.canvas.addEventListener('mousedown',MouseEvents.mousedown)},mousedown() {mosaic.context.canvas.addEventListener('mousemove',MouseEvents.mousemove)document.addEventListener('mouseup', MouseEvents.mouseup)},mousemove(e) {if (e.shiftKey) {mosaic.eraseTileByPoint(e.layerX, e.layerY)return}mosaic.drawTileByPoint(e.layerX, e.layerY)},mouseup() {mosaic.context.canvas.removeEventListener('mousemove',MouseEvents.mousemove)document.removeEventListener('mouseup', MouseEvents.mouseup)}}MouseEvents.init()})},saveHandle() {if (this.isMosaic) {var dataURL = document.querySelector('#canvas').toDataURL('image/png')this.editImgUrl = dataURLsetTimeout(() => {this.uploadImg()}, 1000)} else {this.uploadImg()}},// 上传图片uploadImg() {const formData = new FormData()this.$refs.cropper.getCropBlob(data => {formData.append('file', data, '自定义文件名')upLoad1(formData).then(res => {if (res.message === 'ok') {this.$message.success('图片编辑成功')} else {this.$message.warning(res.message)}this.$refs.cropper.clearCrop()this.editImgUrl = ''this.indexTab = 1this.isMosaic = falsethis.$emit('closeDialog')})})}}
}
</script><style lang="scss" scoped>.edit-img {width: 100%;height: 733px;position: relative;
}.tumo-img {position: absolute;width: 100%;height: 733px;top: 0;left: 0;border-radius: 2px solid red;
}
.button-group {position: absolute;bottom: 30px;display: flex;.button-item {width: 100px;height: 38px;border-radius: 4px;text-align: center;line-height: 38px;background-color: rgba($color: #000000, $alpha: 0.5);color: #FFFFFF;margin-left: 10px;cursor: pointer;}
}
::v-deep {
.cropper-modal {background: rgba(0, 0, 0, .4) !important;
}}
</style>

3，组件写好后直接在页面中调用。

<template><div><div @click="imgUrlEdit('图片地址')">图片编辑</div><image-edit:dialog-img="imgEditShow":img-path="imgPath "@closeDialog="closeDialog"/></div>
</template><script>import ImageEdit from '@/components/imageEdit'export default {components: {ImageEdit},data() {return {imgEditShow: false, // 图片编辑框imgPath: '' //  图片编辑源}},method: {closeDialog() {this.imgEditShow = false},// 图片编辑imgUrlEdit(img) {this.imgEditShow = truethis.imgPath = img}}}
</script>

这样，一个简单的裁剪，打码，选择就完成了

VUE图片裁剪，打码，旋转功能相关推荐

VUE图片裁剪功能vue-img-cutter
VUE图片裁剪功能vue-img-cutter 前言: 演示地址兼容IE9+,MSEdge,Chrome,Firefox 两种展现形式,行内或弹窗可旋转.缩放图片任意比例.大小裁剪固定比例.大 ...
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图像裁剪组 ...
VUE图片裁剪组件,基于VueCropper
VUE图片裁剪组件,基于VueCropper 搬砖的同志麻烦点个赞支持下效果图第一步安装vue-cropper插件 npm install vue-cropper 第二步创建组件,把下面的代码复制 ...
html上传图片裁剪,基于HTML5+JS实现本地图片裁剪并上传功能
基于HTML5+JS实现本地图片裁剪并上传功能 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了基于HTML5+JS实现本地图片裁剪并上传功 ...
vue 图片裁剪压缩
<template><div class="vue-box"><img :src=&q ...
Vue - 实现微信扫码登录功能（项目植入微信扫码登录功能）超详细完整流程详解及详细代码及注释，附带完整功能源码、常见问题解决方案
前言如果您需要 Nuxt.js 版本的教程,请访问 Nuxt.js - 微信扫码登录功能. 网上的大部分教程都太乱且没有任何注释和解释,对于新手而言简直是根本无从下手, 本文将站在新手小白的角度,从 ...
vue+图片裁剪vue-cropper以及api
前言: 因为项目需要,需要实现一个上传完图片,对图片进行二次处理的需求,就使用了vue-cropper来实现这个功能,总的来说还是感觉非常不错的软件,这里分享下我的使用方法,以及vue-cropper ...
vue图片裁剪固定尺寸/vue-cropper的使用
需求: 用户上传图片不符合大小,提供工具进行裁剪(类似上传头像一样处理) 解决: 使用vue-cropper插件完成插件官网: https://github.com/xyxiao001/vue-cr ...
vue 图片裁剪上传
最近写的一个项目用到头像上传,需要裁剪功能,缩放功能,能具备压缩上传功能,因为手机现在的像素太好了,随便一张图片的大小都上M了,而且要求手机端和pc端都可要可以使用.通过网上找到了一个合适的插件(vu ...

VUE图片裁剪，打码，旋转功能

VUE图片裁剪，打码，旋转功能相关推荐

最新文章

热门文章