vue 使用img-cropper

引用提供了使用vue-avatar-cropper的示例代码。首先，需要安装vue-avatar-cropper，可以使用npm命令进行安装。然后，在代码中使用img标签来显示图片，通过button标签选择图片。最后，使用avatar-cropper组件来处理上传的图片，并调用handleUploaded方法来处理上传后的结果。

引用提供了使用vuex存储头像的代码示例。首先，创建一个a.js文件，并引入封装好的接口。然后，使用import语句导入viewPic方法。最后，通过vuex来存储头像信息。

引用提供了关于头像修改的代码示例。首先，在父组件中定义一个div容器来显示头像，并在点击事件中调用edit方法打开修改图片的弹窗。然后，在子组件中定义一个avatar-modal组件，并在点击确认按钮时调用setavatar方法来传递头像URL。最后，在父组件的created钩子函数中将头像从vuex中取出并显示在页面上。

综上所述，vue使用img-cropper的主要步骤包括安装vue-avatar-cropper、编写HTML模板代码、使用avatar-cropper组件处理上传图片、使用vuex存储头像信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue-avatar-cropper：一个简单而优雅的头像裁剪和上传插件](https://download.csdn.net/download/weixin_42132359/15108564)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [【vue+vue-cropper】好玩的图片裁剪插件vue-cropper，使用方法详解](https://blog.csdn.net/weixin_49668076/article/details/121262867)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]