Angular 图像上传，带裁剪、缩放、缩放

在这一步，我们将学习使用缩放、裁剪和比例来上传图片。 我们将使用 Angular 来做到这一点。 如果我们想下载裁剪后的图像，我们可以将其以 base64 格式下载。 我们可以使用各种版本的 Angular 应用程序，例如 Angular 6、7、8、9、10 和 11。

当我们想要使用带裁剪的图像上传时，ngx-image-cropper 的 npm 包将很有用。它将在加载时为我们提供缩放、裁剪、缩放和预览等功能。我们可以非常容易地在我们的 Angular 应用程序中使用它。 为了上传带有裁剪的图片，步骤描述如下

步骤 1

在这一步，我们将要创建新应用程序。 以下命令对于创建我们的新 Angular 应用程序将很有用，如下所示

步骤 2

在这一步，我们将要安装 Npm 包。 在我们的 Angular 应用程序中，我们可以使用 ngx-image-cropper 的 npm 包来上传图像裁剪功能。

步骤 3

在这一步，我们将要导入 ImageCropperModule。 我们将使用 ngx-image-cropper 来导入它。 之后，我们将使用声明部分来添加它。 现在我们将使用名为 app.module.ts 的文件并像这样更新它

src/app/app.module.ts

步骤 4

在这一步，我们将要更新组件 ts 文件。 此文件用于编写 imageLoaded()、fileChangeEvent()、loadImageFailed()、fileChangeEvent() 和 cropperReady()。 所有这些函数均由 ngx-image-cropper 给出。 现在我们将打开 app.component.ts 文件并像这样更新它

src/app/app.component.ts

步骤 5

在这一步，我们将要更新 HTML 文件。 在此表单中，我们将使用 Bootstrap 类。 如果我们没有 Bootstrap，我们可以使用以下链接将其安装在我们的系统中

angular-7-with-bootstrap!

现在我们将打开我们的 HTML 文件并像这样更新它

src/app/app.component.html

现在我们上面的代码已经准备好运行了。为了运行上面的代码，我们将使用以下命令

当我们运行此命令时，将生成以下输出