问题标签 [cropperjs]

在 Angular 7 中，我使用 ngx-cropperjs 插件裁剪图像，但我已将我的插件指令放在我的模态主体中，比如

在我的 ts 中，我使用以下方法打开模态

对于cropper插件，我有一个像这样的viewchild

如果 ngx-cropper 在模态之外，我将直接在 console.log 中获取实例

但是由于插件在模态中，我现在变得未定义，我现在如何访问插件的实例？

我想将 fengyuanchen/cropperjs 添加到图像元素，但是当页面加载时，我在控制台中收到此错误TypeError: Error resolving module specifier: cropperjs。

我正在使用官方 github 页面https://github.com/fengyuanchen/cropperjs上提供的 js 和 css 的 CDN 链接

我尝试按照 github 页面上的“入门”进行操作。我添加了 CDN 链接，创建了一个带有 id 图像的 div uploaded-img，然后在页面底部添加了一个带有页面提供的代码的脚本标签

我用谷歌搜索了这个，发现其他人在导入时遇到了麻烦，推荐的解决方案是用其中一个替换import Cropper from 'cropperjs';或import Cropper from 'cropperjs/dist/cropper.esm.js';创建一个 var 并像这样要求它。也有人建议我应该使用"./cropperjs"or "../cropperjs"。但上述变化都没有奏效。

我究竟做错了什么？

我想在裁剪前放大或缩小图像。我正在使用cropperjs。我正在通过以下代码尝试此操作。

我将裁剪器安装在渲染上。但是，我不能调用缩放方法。它显示错误消息“糟糕，缺少预期的对象键'zoom'”。

当我将缩放称为 (ocall cropper-inst "cropper" "zoom" 0.1) 时，错误消息是"Oops, Expected a function on key path 'cropper', got instead"。

事件对象如下图所示： 但是，crpper-el 是一个 HTML 标记，有<img src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg" class="spots_ui_components_cropper--cropped-image27970 spots_ui_components_cropper--cropped-image cropper-hidden"> 什么想法吗？

当用户单击并拖动图像的某个区域时，cropper.js 运行良好。

当用户只需单击图像的一部分时，如何让cropper.js 裁剪图像的一个区域？

例如，无论用户点击哪里，都会在点击的 x,y 位置周围创建一个 50x50 的“裁剪框”区域。

就目前而言，我可以使用 .setCropData() 方法来设置裁剪框的位置和尺寸，但我只能让它作为cropend 事件的一部分“触发”。

cropstart 事件似乎是一个理想的地方，因为它捕获了初始 mousedown 事件，但我无法让 setCropData() 方法作为该事件的一部分触发。

据我所知，为了让cropper.js 做任何事情，它必须经历一系列事件：从cropperstart，到crop，然后最终到cropend。这意味着必须向某个方向拖动鼠标。如果用户只是单击鼠标就可以了，没有进一步的拖动动作，只会触发cropstart 事件。

例如，作为测试目的简单的东西，这是行不通的：

单击鼠标后，控制台日志报告看似为空的cropBoxData，并且没有在图像上绘制任何裁剪。我怀疑这是因为，如果没有从技术上开始的作物事件，还没有任何东西可以设置。

但是，如果我将同样的东西作为cropend 事件的一部分，它会按预期工作。但不同的是，我不能只是“点击”，而是必须实际拖动任意大小的裁剪框：

有什么想法可以让裁剪器通过手动设置尺寸来“完成动作”，但通过点击而不是通常的拖动？先感谢您！

我正在开发基于ngx-rocket入门套件的 Ionic 4 应用程序。

我有一个带有角度裁剪器元素的模态窗口和一个带有“关闭”和“应用”按钮的工具栏。

这是模态的html：

问题：在 Android 和浏览器（chrome、FF 和 safari）上一切正常，但仅在 iPhone 设备上的 Safari 上（在 5、7、8+ 上测试），按钮不会触发点击事件。实际上，我放置在模态页面上、页眉、页脚、工具栏或内容中、裁剪器上方、下方，甚至是其顶部的绝对定位覆盖层上的任何按钮或可点击元素都不起作用，并且仅在 iPhone 设备上（苹果浏览器）。模态框上的裁剪器元素工作正常。

此外，按钮是可访问和可点击的——它们与点击进行视觉交互，在检查器中，当点击按钮元素时，我可以看到类在按钮元素上发生变化。但是由于某种原因，没有点击事件发送到应用程序，并且点击处理程序没有运行。如果我删除 angular-cropper 元素，按钮可以正常工作。

我尝试将模式转换为弹出框，但结果相似（按钮未触发点击事件）。我没有尝试过的一件事是为作物设置一个完整的路由页面，但这不是一个可接受的解决方案，设计明智。

我还创建了一个带有类似页面和模态的小型离子侧菜单测试应用程序，但在那里一切正常，所以这不是 Ionic 在模态上不支持裁剪器的问题。请注意，整个小工具在 V3 中运行良好。问题发生在最新的 Ionic4 上。

我错过了什么？有没有我没有导入的模块？欢迎任何想法或线索。

打开模态的代码：

以及模态的 ngModule 声明：

包：

离子信息

版本

npm 列表 | grep 离子

使用cropper js 尝试在页面上裁剪一个img，然而，它实际上是在页面上附加了两个相同的图像，我可以“滚动”来改变它们的纵横比。

我也尝试这样做来设置裁剪尺寸；

然而，事实证明这很困难。我错过了什么吗？

如何在输入中下载 blob？

代码html：

代码JS

它不工作......

因此，在几乎每个 .ts 文件的顶部，我都看到了这一点：

Cropper 安装在 package.json 中

Cropper 作为 @typings 安装在 package.json 中

Cropper 在typings.d.ts 中

这是 typings.d.ts 的第一张图片中的相同错误，但在评论中！

所以，它没有破坏任何东西，但 Netbeans 8.2 报告了这一点。会不会是 Netbeans 是“错误的”并且一切正常？

想法？

为什么我没有得到特定高度和宽度的图像？

假设我将裁剪图像设置为 width=308 & height=200，它返回 308 X 308。如果我设置 width=200 & height=308，它返回 308 x 308。它返回高度和宽度的最大尺寸。我该如何解决这个问题？

我正在使用cropper.js

我是 Django 和前端技术的新手，试图构建一个 Django Web 应用程序，用户在其中上传图像，查看完整图像并仅在客户端裁剪相同的图像。服务器端将只接收原始未裁剪的图像并裁剪所选裁剪框用户的坐标（x，y，宽度，高度）。我已经阅读了几个使用cropper.js的教程，但我无法弄清楚这样做的正确方法是什么？

目前用户可以浏览和上传图像文件，然后将其保存在数据库（文件路径）中。

我的文件如下

表格.py

模型.py

视图.py

模板 index.html

我发现此问题已回答此代码片段，但无法理解如何与现有的 django 应用程序集成。cropper.js 上传带有坐标的原始图像

提前致谢。