vue项目中上传图片对图片进行裁剪

最新推荐文章于 2025-06-17 14:54:29 发布

原创

最新推荐文章于 2025-06-17 14:54:29 发布 · 842 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>图片上传</el-breadcrumb-item>
            </el-breadcrumb>
        </div> 
            <div class="content-title">支持裁剪</div>
            <div class="crop-demo">
                <img :src="cropImg" class="pre-img">
                <div class="crop-demo-btn">选择图片
                    <input class="crop-input" type="file" name="image" accept="image/*" @change="setImage"/>
                </div>
            </div>
        <div>
            <el-dialog title="裁剪图片" :visible.sync="dialogVisible" width=