cropperjs 截图插件使用

生成一个画布在原图上

注意事项，图片地址问题，用于展示和截图的图片地址bese64图片，blob，用与裁剪的bese64最合适

注意及时销毁.destory() input传入的时候重新生成。

input change上传文件相同时不会发生变化

1.安装cropperjs

npm i cropperjs --save

2.引入js

import Cropper from "cropperjs";

//引入css

import 'cropperjs/dist/cropper.css'

html部分

 <div class="img">

                    <input v-show="imageShow" class="fileInput" type="file" placeholder="点击上传商品图片" accept="image/*"

                        id="imgReader" @change="loadingImg" >

                    <p>点击上传商品图片</p>

                    <!-- 上传图片展示 -->

                    <img alt="" class="images" ref="image">

      </div>

js部分

import Cropper from "cropperjs";

import 'cropperjs/dist/cropper.css'

import { ref, reactive } from 'vue'

const image = ref('')

//控制上传文件层的显示与隐藏

const imageShow= ref(false)

let CROPPER

const sureSava = () => {

    // 拿到裁剪后的图片

    if (CROPPER) {

        Shuju.afterImg = CROPPER.getCroppedCanvas({

            imageSmoothingQuality: 'high'

        }).toDataURL('image/jpeg'); // 设置图片格式

        CROPPER.destroy()

        // CROPPER

//   控制上传文件层的显示与隐藏

        imageShow.value = true

        document.querySelector('#imgReader').value = '';

    }

    image.value.src = ''

    falg.value = false

}

// let CROPPER

const esc = () => {

    // 销毁CROPPer

//遮罩层的显示与隐藏

   // falg.value = false

// 清空image地址

    image.value.src = ''

    if (CROPPER) {

        CROPPER.destroy()

        // CROPPER

        imageShow.value = true

        document.querySelector('#imgReader').value = '';

    }

}

css

    .fileInput {

        position: absolute;

        left: 0;

        right: 0;

        z-index: 1;

        width: 200px;

        height: 200px;

        opacity: 0;

        // position: relative;

        // z-index: -1;

    }

    .images {

        position: absolute;

        top: 0;

        left: 0;

        z-index: 999;

    }

     .img {

                margin: 20px 0;

                width: 200px;

                height: 200px;

                background-color: #676666;

                text-align: center;

                border: 1px solid rgb(180, 177, 177);

                position: relative;

                p {

                    top: 0;

                    left: 30px;

                    position: absolute;

                    // z-index: 999;

                    margin-top: 80px;

                }

                &:hover {

                    cursor: pointer;

                }

            }