Vue實現(xiàn)裁切圖片功能

更新時間：2022年04月22日 17:22:54 作者：nicepainkiller

這篇文章主要為大家詳細介紹了Vue實現(xiàn)裁切圖片功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue實現(xiàn)裁切圖片的具體代碼，供大家參考，具體內容如下

項目需求做一個身份證的裁切功能

原生開發(fā)的話，這種功能挺容易實現(xiàn)的

Web的沒有做過相關功能，百度了一下 vue-cropper 在 VUE是使用還是蠻方便的

1）、安裝 vue-cropper

npm install vue-cropper

2）、編寫 .VUE 文件 cropper.vue 應為項目本身使用 mui

<template>
?? ?<div>
?? ??? ?<div class="mui-fullscreen">
?
?? ??? ??? ?<div class="top" style="height:1.63rem;background:white;" v-on:click="onBack()">
?? ??? ??? ??? ?<img src="../assets/img/payMent/fanhui@2x.png" style="width:0.17rem;margin-left: 0.21rem; margin-top: 0.89rem">
?? ??? ??? ??? ?<p style="position: absolute; margin-left: 2.9rem;top: 0.8rem; font-family:PingFang-SC-Medium; color: black; ?font-size: 0.36rem;">實名認證</p>
?? ??? ??? ?</div>
?
?? ??? ??? ?<div style="position: absolute; width: 100%;top:1.63rem;bottom:1.2rem ;background:#F2F2F2 ;">
?? ??? ??? ??? ?<!-- <img id="image" :src="image" style="width: 100%; width: 100%;"> -->
?? ??? ??? ??? ?<img src="../assets/img/lobby/youxuanzhuan.png" style="width: 0.5rem; position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2;"
?? ??? ??? ??? ? v-on:click="rotateLeft()" />
?? ??? ??? ??? ?<img src="../assets/img/lobby/zuoxuanzhuan.png" style="width: 0.5rem; position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2;"
?? ??? ??? ??? ? v-on:click="rotateRight()" />
?
?
?
?? ??? ??? ??? ?<div class="cropperContent">
?
?? ??? ??? ??? ??? ?<vue-cropper 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" :fixed="option.fixed" :fixedNumber="option.fixedNumber" :centerBox="option.centerBox"
?? ??? ??? ??? ??? ? :infoTrue="option.infoTrue" :fixedBox="option.fixedBox" @realTime="realTime"></vue-cropper>
?
?
?
?? ??? ??? ??? ?</div>
?
?? ??? ??? ??? ?<!-- ?? ??? ??? ??? ?<div style="height: 2rem;width: 2rem; background: greenyellow; position: absolute; top: 5rem;">
?? ??? ??? ??? ??? ?<img :src="preview" style="height: 2rem;width: 2rem;" />
?? ??? ??? ??? ?</div> -->
?
?? ??? ??? ?</div>
?
?
?? ??? ??? ?<div class="buttom" style="background: #618FF5; height:1.2rem;width:100%; bottom: 0rem; position:absolute;#F2F2F2"
?? ??? ??? ? v-on:click="onSelect()">
?? ??? ??? ??? ?<p style="position: absolute; margin-left: 3.4rem;top: 0.3rem; font-family:PingFang-SC-Medium; color: white; ?font-size: 0.36rem;">確定</p>
?? ??? ??? ?</div>
?
?? ??? ??? ?<!-- ?? ??? ??? ?<img :src="preview" style="height: 1rem;" /> -->
?
?? ??? ?</div>
?? ?</div>
</template>
?
<script>
?? ?import {
?? ??? ?VueCropper
?? ?} from 'vue-cropper'
?? ?export default {
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?target: 0,
?? ??? ??? ??? ?cropperHelp: null,
?? ??? ??? ??? ?preview: null,
?? ??? ??? ??? ?//裁剪組件的基礎配置option
?? ??? ??? ??? ?option: {
?? ??? ??? ??? ??? ?img: '', // 裁剪圖片的地址
?? ??? ??? ??? ??? ?info: true, // 裁剪框的大小信息
?? ??? ??? ??? ??? ?outputSize: 1, // 裁剪生成圖片的質量
?? ??? ??? ??? ??? ?outputType: 'jpeg', // 裁剪生成圖片的格式
?? ??? ??? ??? ??? ?canScale: false, // 圖片是否允許滾輪縮放
?? ??? ??? ??? ??? ?autoCrop: true, // 是否默認生成截圖框
?? ??? ??? ??? ??? ?autoCropWidth: 800, // 默認生成截圖框寬度
?? ??? ??? ??? ??? ?autoCropHeight: 500, // 默認生成截圖框高度
?? ??? ??? ??? ??? ?fixedBox: false, // 固定截圖框大小 不允許改變
?? ??? ??? ??? ??? ?fixed: true, // 是否開啟截圖框寬高固定比例
?? ??? ??? ??? ??? ?fixedNumber: [16, 10], // 截圖框的寬高比例
?? ??? ??? ??? ??? ?full: false, // 是否輸出原圖比例的截圖
?? ??? ??? ??? ??? ?canMoveBox: true, // 截圖框能否拖動
?? ??? ??? ??? ??? ?original: false, // 上傳圖片按照原始比例渲染
?? ??? ??? ??? ??? ?centerBox: true, // 截圖框是否被限制在圖片里面
?? ??? ??? ??? ??? ?infoTrue: true // true 為展示真實輸出圖片寬高 false 展示看到的截圖框寬高
?? ??? ??? ??? ?},
?? ??? ??? ?}
?? ??? ?},
?? ??? ?components: {
?? ??? ??? ?VueCropper
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?//放大/縮小
?? ??? ??? ?changeScale(num) {
?? ??? ??? ??? ?console.log('changeScale')
?? ??? ??? ??? ?num = num || 1;
?? ??? ??? ??? ?this.$refs.cropper.changeScale(num);
?? ??? ??? ?},
?? ??? ??? ?//坐旋轉
?? ??? ??? ?rotateLeft() {
?? ??? ??? ??? ?console.log('rotateLeft')
?? ??? ??? ??? ?this.$refs.cropper.rotateLeft();
?? ??? ??? ?},
?? ??? ??? ?//右旋轉
?? ??? ??? ?rotateRight() {
?? ??? ??? ??? ?console.log('rotateRight')
?? ??? ??? ??? ?this.$refs.cropper.rotateRight();
?? ??? ??? ?},
?? ??? ??? ?// 實時預覽函數(shù)
?? ??? ??? ?realTime(data) {
?? ??? ??? ??? ?//this.previews = data
?? ??? ??? ?},
?? ??? ??? ?imgLoad(msg) {
?? ??? ??? ??? ?console.log(msg)
?? ??? ??? ?},
?? ??? ??? ?cropImage() {
?
?? ??? ??? ?},
?
?
?? ??? ??? ?onSelect() {
?? ??? ??? ??? ?
?? ??? ??? ??? ?this.$refs.cropper.getCropBlob((data) => {
?? ??? ??? ??? ??? ?//console.log("data===>",data)
?? ??? ??? ??? ??? ?var img = window.URL.createObjectURL(data);
?? ??? ??? ??? ??? ?this.$emit("onCutingResoult", {
?? ??? ??? ??? ??? ??? ?img: img,
?? ??? ??? ??? ??? ??? ?target: this.target
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ?})
?? ??? ??? ?},
?
?? ??? ??? ?onReset(param) {
?? ??? ??? ??? ?this.target = param.target
?? ??? ??? ??? ?this.option.img = param.url
?? ??? ??? ??? ?this.preview = param.url
?? ??? ??? ?},
?? ??? ??? ?onBack() {
?? ??? ??? ??? ?this.$emit("onCutingBack")
?? ??? ??? ?}
?? ??? ?}
?
?? ?}
</script>
?
<style scoped>
?? ?.mui-fullscreen {
?? ??? ?background: white;
?? ?}
?
?? ?.cropperContent {
?? ??? ?width: 100%;
?? ??? ?height: 100%;
?? ?}
?
?? ?/* ?? ?.mui-fullscreen {
?? ??? ?background: #F2F2F2;
?? ??? ?top: 0rem;
?? ??? ?bottom: 0rem;
?? ?} */
</style>

基本上，放里面就能使用。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: