vue如何实现裁剪/截图功能的两种方式( 1. vue-cropper 2. cropper.js )
1. cropper.js 这种是原生方式,推荐参考访问(描述的非常清楚)2. vue-cropper.js裁切图片(功能成功实现,很全面)<template><div><div class="cropper-content"><div class="cropper&q
·
1. cropper.js
这种是原生方式,推荐参考访问(描述的非常清楚)
2. vue-cropper.js裁切图片(功能成功实现,很全面)
<template>
<div>
<div class="cropper-content">
<div class="cropper">
<vueCropper
ref="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>
</div>
</template>
<script>
import VueCropper from 'vue-cropper'
export default {
data() {
return {
crap: false,
previews: {},
option: {
img: 'https://bpic.588ku.com/element_water_img/18/06/12/b2887846cb19ff36a5502401ac918809.jpg',
size: 1,
full: false,
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)
}
}
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)