cropperjs上传头像组件

最新推荐文章于 2025-03-14 18:20:33 发布
最新推荐文章于 2025-03-14 18:20:33 发布
阅读量424 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37976966/article/details/94627016
版权

avatar.vue

<template>
    <div class="user-head-portrait">
        <div class="avatar-wrapper">
            <img v-if="images.avatarImg === '' && imgSrc === ''" src="../../image/user.png" alt="" class="avatar-img" width="150" height="150" />
            <img v-else :src="images.avatarImg || imgSrc" alt="" class="avatar-img" width="150" height="150" />
            <p class="upload-wrapper">
                <a href="javscript:;" class="upload-btn">上传头像</a>
                <input type="file" name="avatar" value="" accept="image/*" class="avatar-input" @change="imgOnChange($event, 'avatar')" />
            </p>
        </div>
        <!-- 选择头像的弹窗 -->
        <div v-if="images.isShowImageEditor" class="personal-pops">
            <div class="pops-content">
                <h4>
                    头像剪裁
                    <a class="fr pops-close" href="javascript:;" @click="closeImageEditor">
                        <i class="el-dialog__close el-icon el-icon-close"></i>
                    </a>
                </h4>
                <div class="editor">
                    <img id="editor" :src="images.imageWaitingForCrop" alt="">
                </div>
                <p class="btn-row dialog-btn">
                    <el-button type="primary" @click="confirmCrop">确定</el-button>
                    <el-button @click="closeImageEditor">取消</el-button>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
import Cropper from 'cropperjs'
const qiniu = require('qiniu-js')
export default {
    props: {
        imgSrc: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            images: {
                coverImg: '',
                coverObj: null,
                coverBtn: null,
                coverUploading: false,
                avatarImg: '',
                avatarObj: null,
                avatarBtn: null,
                avatarUploading: false,
                isShowImageEditor: false,
                editImageType: '',
                imageWaitingForCrop: '',
                cropper: null
            }
        }
    },
    methods: {
        imgOnChange(e, type) {
            const images = this.images
            const target = e.target
            const btnType = type + 'Btn'
            const objType = type + 'Obj'
            images.editImageType = type
            images.isShowImageEditor = true
            images[btnType] = target
            if (target.files) {
                images[objType] = target.files[0]
                images.imageWaitingForCrop = this.createLocalURL(images[objType])
            } else {
                target.select()
                images.imageWaitingForCrop = document.selection.createRange().text
            }
            this.$nextTick(() => {
                this.initCropper()
            })
        },
        initCropper() {
            const options = {
                cropBoxResizable: false
            }
            options.aspectRatio = 1 / 1
            options.minCropBoxWidth = 128
            options.minCropBoxHeight = 128

            this.images.cropper = new Cropper(document.querySelector('#editor'), options)
        },
        // 裁剪图片确定函数
       async confirmCrop() {
            const me = this
            const options = {
                imageSmoothingEnabled: false,
                imageSmoothingQuality: 'high'
            }
            const type = this.images.editImageType
            const loading = type + 'Uploading'
            this.images[loading] = true
            this.images.avatarImg = this.images.cropper.getCroppedCanvas(options).toDataURL('image/png')
            this.$request.get('resource/upload', { params: { type: 1, size: 0 }}).then(data => {
                // 获取到token,上传图片到七牛
                const file = this.dataURLtoFile(this.images.avatarImg)
                const observable = qiniu.upload(file, data.key, data.token)
                observable.subscribe({
                    complete(res) {
                        me.$emit('getImgInfo', res.url)
                        me.closeImageEditor()
                    },
                    next(res) {
                        console.log("next:", res)
                    },
                    error(err) {
                        console.log("error:", err)
                    }
                })
            }).catch(error => {
                console.error(error)
            })
        },
        closeImageEditor() {
            const images = this.images
            this.destroyLocalURL(this.imageWaitingForCrop)
            images.isShowImageEditor = !images.isShowImageEditor
            images[images.editImageType + 'Btn'].value = ''
            images.cropper.destroy()
        },
        createLocalURL(file) {
            if (window.createObjectURL) {
                return window.createObjectURL(file)
            } else if (window.URL) {
                return window.URL.createObjectURL(file)
            } else if (window.webkitURL.createObjectURL) {
                return window.webkitURL.createObjectURL(file)
            }
        },
        destroyLocalURL(url) {
            if (window.revokeObjectURL) {
                return window.revokeObjectURL(url)
            } else if (window.URL) {
                return window.URL.revokeObjectURL(url)
            } else if (window.webkitURL.revokeObjectURL) {
                return window.webkitURL.revokeObjectURL(url)
            }
        },
        // 将base64图片转换成文件的形式
        dataURLtoFile(dataurl, filename = 'file') {
            let arr = dataurl.split(',')
            let mime = arr[0].match(/:(.*?);/)[1]
            let suffix = mime.split('/')[1]
            let bstr = atob(arr[1])
            let n = bstr.length
            let u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return new File([u8arr], `${filename}.${suffix}`, {
                type: mime
            })
        }
    }
}
</script>
<style scoped>
@import './index.scss';
</style>
<style lang="scss" scoped>
.avatar-wrapper {
    position: relative;
    .avatar-img {
        display: block;
        border-radius: 50%;
    }
    .upload-wrapper {
        position: relative;
        .upload-btn{
            margin: 22px auto 0 auto;
            width: 80px;
            height: 36px;
            font-size: 14px;
            line-height: 36px;
            display: block;
            color: #fff;
            text-align: center;
            background:rgba(255,128,17,1);
            border-radius:20px;
        }
        .avatar-input {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 36px;
            opacity: 0;
            cursor: pointer;
            z-index: 10
        }
    }
}
.personal-pops{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    .pops-content{
        width: 488px;
        height: 340px;
        padding: 20px 24px;
        background: #fff;
        position: absolute;
        left: 50%;
        top:50%;
        transform:translate(-50%,-50%);
        h4 {
            position: relative;
            font-size:20px;
            color:rgba(49,50,56,1);
            line-height:26px;
            font-weight: 400;
        }
        .pops-close {
            position: absolute;
            right: 0;
        }
        .el-dialog__close {
            font-size: 24px;
        }
    }
}
.editor{
    height: 70%;
    margin: 15px 0;
    img{
        width: 100%;
        height: 100%;
    }
}
.btn-row{
    text-align: right;
    .btn-list {
        margin-right: 10px;
        width: 76px !important;
        &:last-child {
            margin-right: 0;
        }
    }
}
</style>

index.scss


.cropper-container {
    font-size: 0;
    line-height: 0;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    direction: ltr;
    -ms-touch-action: none;
    touch-action: none;
}

.cropper-container img {
    display: block;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100%;
    height: 100%;
    image-orientation: 0deg;
}
.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.cropper-wrap-box {
    overflow: hidden;
}
.cropper-drag-box {
    opacity: 0;
    background-color: #fff;
}
.cropper-modal {
    opacity: 0.5;
    background-color: #000;
}
.cropper-view-box {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, 0.75);
}

.cropper-dashed {
    position: absolute;
    display: block;
    opacity: 0.5;
    border: 0 dashed #eee;
}
.cropper-dashed.dashed-h {
    top: 33.33333%;
    left: 0;
    width: 100%;
    height: 33.33333%;
    border-top-width: 1px;
    border-bottom-width: 1px;
}
.cropper-dashed.dashed-v {
    top: 0;
    left: 33.33333%;
    width: 33.33333%;
    height: 100%;
    border-right-width: 1px;
    border-left-width: 1px;
}
.cropper-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    opacity: 0.75;
}
.cropper-center:before,
.cropper-center:after {
    position: absolute;
    display: block;
    content: " ";
    background-color: #eee;
}
.cropper-center:before {
    top: 0;
    left: -3px;
    width: 7px;
    height: 1px;
}
.cropper-center:after {
    top: -3px;
    left: 0;
    width: 1px;
    height: 7px;
}
.cropper-face,
.cropper-line,
.cropper-point {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.1;
}
.cropper-face {
    top: 0;
    left: 0;
    background-color: #fff;
}
.cropper-line {
    background-color: #39f;
}
.cropper-line.line-e {
    top: 0;
    right: -3px;
    width: 5px;
    cursor: e-resize;
}
.cropper-line.line-n {
    top: -3px;
    left: 0;
    height: 5px;
    cursor: n-resize;
}
.cropper-line.line-w {
    top: 0;
    left: -3px;
    width: 5px;
    cursor: w-resize;
}
.cropper-line.line-s {
    bottom: -3px;
    left: 0;
    height: 5px;
    cursor: s-resize;
}
.cropper-point {
    width: 5px;
    height: 5px;
    opacity: 0.75;
    background-color: #39f;
}
.cropper-point.point-e {
    top: 50%;
    right: -3px;
    margin-top: -3px;
    cursor: e-resize;
}
.cropper-point.point-n {
    top: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: n-resize;
}
.cropper-point.point-w {
    top: 50%;
    left: -3px;
    margin-top: -3px;
    cursor: w-resize;
}
.cropper-point.point-s {
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: s-resize;
}
.cropper-point.point-ne {
    top: -3px;
    right: -3px;
    cursor: ne-resize;
}
.cropper-point.point-nw {
    top: -3px;
    left: -3px;
    cursor: nw-resize;
}
.cropper-point.point-sw {
    bottom: -3px;
    left: -3px;
    cursor: sw-resize;
}
.cropper-point.point-se {
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    opacity: 1;
}
@media (min-width: 768px) {
  .cropper-point.point-se {
    width: 15px;
    height: 15px;
  }
}
@media (min-width: 992px) {
  .cropper-point.point-se {
    width: 10px;
    height: 10px;
  }
}
@media (min-width: 1200px) {
  .cropper-point.point-se {
    width: 5px;
    height: 5px;
    opacity: 0.75;
  }
}
.cropper-point.point-se:before {
    position: absolute;
    right: -50%;
    bottom: -50%;
    display: block;
    width: 200%;
    height: 200%;
    content: " ";
    opacity: 0;
    background-color: #39f;
}
.cropper-invisible {
    opacity: 0;
}
.cropper-bg {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMzTjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}
.cropper-hide {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
}
.cropper-hidden {
    display: none !important;
}
.cropper-move {
    cursor: move;
}
.cropper-crop {
    cursor: crosshair;
}
.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
    cursor: not-allowed;
}
.el-form--inline .el-form-item__content {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}
vue3 - 超详细 cropper.js 实现图片（头像）裁剪效果功能，在vue3中上传图像后按比例进行图片的裁剪及实时预览，Element / Ant Desi（详细示例源码，一键复制开箱即用！）
高级前端工程师
06-13 4001
vue3图片裁剪及实时预览，vue3 vue-cropper，vue3头像裁剪，vue3 el-upload+vue-cropper 图像图片头像裁剪上传，vue3怎么进行图片的裁剪，vue3使用vue-cropper图片裁剪，vue3项目如何实现头像图片裁剪上传功能，vue3网站pc怎么将上传的图片按比例进行裁剪，vue3+element plus实现图片上传按尺寸大小裁剪，vue3中图片上传使用cropperjs 头像裁剪，vue3中图片上传使用cropperjs 头像裁剪，vue3好用的图片裁剪插件组
使用cropper.js 实现简单的头像裁剪上传
ljt123456765的博客
03-27 6545
最近项目中用到了头像上传功能，于是找了好久找到了cropper.js,简单做个小例子,话不多说直接上代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="x-ua-compatible" cont
cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像
06-12
使用cropper.js裁剪图片，通过canvas获取裁剪后的图片，获取的是base64图片上传。
js实现上传头像（看了你就懂，相信我）
weixin_44519496的博客
09-06 966
效果图： html: <div class="tx ovf"> <div class="tit">头像</div> <div class="ovf tx-img"><img src="" alt=""> <div class="upload-b"><span>修改头像</span><input type="file" class="upload1"&
前端npm包- CropperJS
最新发布
Bruce__taotao的博客
03-14 761
提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
基于cropperjs和vue3的头像上传组件
weixin_41897680的博客
03-20 3118
基于cropperjs和vue3的头像上传组件
cropper头像上传
xinshijimanon的专栏
03-23 1726
花了几天时间学习了下javaWeb中cropper头像上传功能，下面仅在此记录一下. 看到有篇博客是在前台用canvas的toDataURL处理，但貌似无法处理gif图像(如有大侠知道如何处理，还望告知),故放弃这一做法而选择在后端处理, 前台提交rotate,x,y,width,height及原始图片,后台旋转、裁剪(这里不提供水平垂直的翻转，感觉这种翻转比较少用). 一、下面先提
插件系列 =＞ 上传头像 cropper.js
Write less，do more
11-20 222
在父组件 注意父传子的头像值 @update-pic="userprofile.photo = $event" <!-- /导航栏 --> <van-cell title="头像" is-link @click="$refs.inputFile.click()"> <input type="file" hidden ref="inputFile" @change="inputonChange" />
Vue-cropper 实现图片头像上传裁剪（组件封装）
Yusian_的博客
01-23 998
Vue-cropper 实现图片头像上传裁剪
vue实现裁切头像的功能，cropperjs使用
你喜欢大熊猫嘛
01-11 1522
vue中实现修改头像的功能，cropperjs使用，头像裁剪，cropperjs怎么使用
前端使用cropperjs 裁剪正方形图片 设置头像（其实什么样比例的矩形图都行）以下代码兼容vue3和vue3+uniapp
qq_45503103的博客
05-20 817
就是长这样的参数给组件（blob:http://localhost:5173/f65e1c04-218a-49c0-b63f-edd0cf1cbb34）//cropperObj.afterImg为base64格式 按需转化为 file 格式。// 使用Blob对象创建一个新的文件对象。//是否允许通过拖动来调整裁剪框的大小。// 将base64的数据部分提取出来。//是否允许通过拖动来移动裁剪框。//是否允许通过拖动来缩放图片。// 创建一个虚拟的文件对象。//把裁剪的图片返回到父组件。
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
11-26
在前端开发中，图片裁剪功能常常被用于各种应用场景，如用户头像上传、产品图片编辑等。Vue.js 结合 Element-UI 和 cropper.js 可以方便地封装出一个强大的图片裁剪组件。以下将详细讲解如何在 Vue-cli 环境下实现这...
cropper.js 制作头像/图片上传、裁剪、并发送至后端-javascript
06-21
cropper.js 制作头像/图片上传、裁剪、并发送至后端 Cropper.js JavaScript 图像裁剪器。 网站照片编辑器 - Cropper.js 的高级示例。 jquery-cropper - Cropper.js 的 jQuery 插件包装器。 目录 功能 主要入门 选项 方法 事件 无冲突 浏览器支持 Contributing Versioning 许可证功能 支持 39 个选项 支持 27 种方法 支持 6 个事件 支持触摸（移动） 支持缩放 支持旋转 支持缩放（翻转） 支持多个裁剪器 支持在画布上裁剪支持在浏览器端通过canvas裁剪图片 支持翻译Exif 方向信息 跨浏览器支持 Main dist/ ├──cropper.css ├──cropper.min.css (compressed) ├──cropper.js (UMD) ) ├──cropper.min.js (UMD，压缩) ├──cropper.common.js (CommonJS，默认) └──cropper.esm.js (ES 模块) 入门安装 npm installcropper
cropper.js前端头像裁剪示例,附php代码
02-10
cropper.js前端头像上传裁剪示例Demo,附php简单处理代码
头像剪裁插件纯H5
04-16
头像剪裁插件纯H5，带弹出框
cropper.js 实现HTML5 裁剪上传头像
p1382526的博客
11-04 657
cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像。) option相关参数说明： viewMode 显示模式 Type: Number Default: 0 Options: 0: the crop box is just within the container 裁剪框只能在 1内移动 1: the crop box should be within the canvas...
Django 绝对可以成功的通过cropper.js实现的头像上传功能
ckk727的博客
05-02 637
说实话，给Django项目加上可以上传头像的功能真的是花了我不少时间，差不多前后折腾了两天，期间也在网上找了很多很多，很多很多的例子，但是几乎无一例外在我这里都行不通，要么是点击提交按钮无反应，要么是报一些奇奇怪怪让我难以解决的错误，要么是大神写的代码实在是看不明白，连复制粘贴都胆战心惊，更不要说二次改造了。嘛，人菜就不得不瞎折腾，所幸，最后居然侥幸成功了，所以特地心情澎湃的写篇博客，记录一下...
vue项目中使用cropperjs实现上传头像并裁切头像大小
qq_40881695的博客
01-06 857
github的cropperjs文档仓库地址：https://github.com/fengyuanchen/cropperjs 安装cropperjs npm install cropperjs 使用cropperjs html 1. 使用label的for属性和input进行绑定，实现点击label中的内容，相当于点击了input，达到上次图片功能 2. input的属性hidden相当于display:none 3. @change="onFileChange"是input本身支持的图片改变事件.
Web上传头像与图片剪切实例教程
在Web开发中，实现用户上传头像的功能是一个常见的需求。根据描述，这里使用了ajax无刷新技术来实现上传功能，提升用户体验。 - **无刷新上传**：指的是在上传文件时不需要刷新整个页面即可完成上传操作。这通常是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值