cropperjs图像裁剪功能详细实现步骤(angular项目中使用)

可乐可乐可爱呀

于 2022-11-29 19:30:00 发布

阅读量780

点赞数

分类专栏：经验工具类文章标签：经验分享

本文链接：https://blog.youkuaiyun.com/weixin_45152334/article/details/127982782

版权

本文详细介绍了如何在Angular项目中实现cropperjs图像裁剪功能，包括安装依赖、引入样式文件、组件代码实现及操作效果展示。针对安装问题，提供了备用解决方案，如手动下载静态资源和更新package.json。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 安装依赖。(安装失败的小伙伴请移步文章底部)
npm install cropperjs或者yarn add cropperjs
在这里插入图片描述

2. 项目中style.less文件中引入cropperjs的样式文件，如下图圈出部分。

3. 组件文件详细代码贴出如下
（1）img-cropper.component.html文件

<div class="container p-2">
  <nz-row>
    <nz-col nzSpan="12">
      <div class="uploaded imgContent" [ngStyle]="{display:isShowUpload?'block':'none'}">
        <img  #imgCropper class="cropperMain"/>
      </div>
      <div class="input-upload" *ngIf="!isShowUpload">
        <label for="btn" class="upload-btn" >
          <div class="imgContent">
            <i class="iconfont icon-zengjia" style="font-size: 60px;color: #bcbcbc;"></i>
          </div>
        </label>
        <input id="btn" #imageInput accept=".jpg,.png,.jpeg" type="file" style="display: none;"
               (change)="imageChangeEvent($event)">
      </div>
      <nz-row nzJustify="center" class="icons">
        <button nz-but

最低0.47元/天解锁文章