问题标签 [cropper]

我正在使用cropper.js，当我尝试初始化时，我得到了错误Uncaught TypeError: image.cropper is not a function at FileReader.oFReader.onload。我已经从我所做的最后一个项目中复制了代码，并且在该项目中它可以正常工作。

我已经尝试了cropper和cropper.js，但没有任何效果。我将裁剪器导入到 html 中，就像文档的头部一样。

我的表单是这样的，其中包含其他字段。

图像应该出现在这里。

这是我初始化 Cropper 的方法。

我期待打开裁剪器，但Uncaught TypeError: image.cropper is not a function at FileReader.oFReader.onload在第一个裁剪器 ( image.cropper("destroy");) 中出现错误。

我正在制作图像裁剪器，裁剪器必须具有固定尺寸，但用户可以动态更改这些尺寸。

每次盒子更新时，我都会运行这段代码。

我这样做是为了确保尺寸保持不变。由于某种原因，这不起作用。但是，如果我将 setCropBoxData 函数更改为此

一切正常。

控制台中没有错误，什么都没有。我完全不知所措。

我正在尝试裁剪图像，使用图像的某些部分，但也允许在其周围添加“额外”空间。但是，当裁剪的图像在“额外”空间中生成黑色空间时，我希望它是透明的。

使用cropper JavaScript 获取裁剪坐标：https ://fengyuanchen.github.io/cropperjs/

然后使用 PHP imagecopyresampled 将图像裁剪为大小。

图像的裁剪很好，但是如果我将图像裁剪为大于原始尺寸，它会在图像周围添加黑色空间，我想将其更改为透明。

研究了在裁剪后的图像中搜索黑色像素并将它们转换为透明的，但是当图像中有黑色时，这个想法就会中断

我正在使用 slim cropper 在我的 codeigniter 项目上上传头像，它在我的本地主机上完美运行，但在服务器上，对执行图像上传的 php 的 ajax 调用不断给出 403 禁止错误，下面是代码部分：

根据我的阅读，提供 CSRF 令牌可能会解决问题，但请求是从同一个域发出的，我不需要在我的本地主机上这样做。可能是什么问题呢？

目前我正在使用 react-native-image-crop-picker，它非常适合在 iOS 中裁剪图像。但我想阻止放大/缩小功能。不幸的是，这个库不支持它。

我的要求是，

1. 以 4:5 的比例启动裁剪窗口
2. 不应允许用户放大/缩小
3. 用户可以将裁剪窗口移动到图像上，并可以调整裁剪窗口的大小。但它应该是 4:5 的比例

请推荐任何其他满足上述要求的流行图书馆

我正在尝试制作一个查看用户个人资料并显示用户图片的表单。我创建了一个自定义用户类并添加了带有个人资料图片（头像）的新字段。想法是，当用户查看个人资料时，他可以单击他的图片，并弹出显示当前图片（或看起来像匿名用户的默认图片）的模式表单。然后用户可以点击上传任意大小的新图片并使用cropper.js 将其裁剪为设置为220 x 300 像素的标准格式。

为了开发这个，我在互联网上举了几个例子，并将它们混合在一起。在我希望将新图片保存在用户数据库中之前，它可以完美运行，这只是被忽略，没有任何错误显示。当然，当我从管理界面执行此操作并上传图片时，它每次都有效。

因此，我希望保存图片的部分是从模态表单触发的，它是用 javascript 编写的部分，用于从cropper.js 获取数据：

我在提交时为表单创建了一个新的保存功能，用于实际裁剪：

我的表单有一个 enctype 集：

我究竟做错了什么？

编辑：我制作了一个视频来展示当前的问题。用旧的macbook录的，所以花了点时间哈哈。无论如何，在视频中你可以看到我上传图像，裁剪它并用它生成一个 pdf。预览没有黑色边框，pdf 有黑色边框。希望这有帮助。

所以我得到了一个 web 应用程序，它可以让用户上传个人资料图片，然后生成带有个人资料图片的 pdf。问题是我想用圆角/圆形显示个人资料图片。

我jspdf用来生成pdf。使用该库，我可以使用该方法添加图像，该addImage方法采用 base64 编码的 DataUrl。不幸的是，没有一种原生方法来显示带有圆角/圆形的图像，所以我决定让用户在将 url 编码为 base64 之前裁剪他们的图像。那是奇怪的行为开始的时候......如果裁剪的图像显示在img标签中，那一切都很好，显示了一个漂亮的圆形个人资料图片。当该 dataUrl 用于生成 pdf 时，由于某种原因，图像周围会生成 1px 黑色边框...如果我在浏览器中检查 dataurl 或使用在线 base64 预览器，则只有当它获取时，才会看到黑色边框生成为pdf...

出于演示目的，我制作了一个代码框。白色背景的图像最能说明问题。例如，使用这个图像：profilepicture

这种方法很可能是导致问题的原因（我直接从github上的cropperjs示例中获取了这个方法）：

这种方法用在这样的crop方法中：roundedCanvas = getRoundedCanvas(croppedCanvas);如果我拿出那个方法并只使用roundedCanvas = croppedCanvas;图像，就会被裁剪成一个正方形，并且显示时没有黑色边框。

我不知道如何解决这个问题，甚至是否有可能解决。非常感谢任何在正确方向上的帮助。甚至欢迎在 pdf 上显示圆形/圆形图像的替代方法（我已经尝试过html2canvas但没有用）。

我正在使用ngx-image-cropper库在我的 Angular 8 项目中裁剪图像。

我想做的是：

• 我想在选择文件的模式内显示裁剪器。
• 模态框有一个裁剪按钮，单击该按钮将裁剪图像（无自动裁剪）和一个取消按钮，可用于关闭模态框而不裁剪图像。
• 裁剪图像后，模态将关闭，并且将有一个编辑按钮，可用于重新裁剪图像（单击裁剪时，我实际上是裁剪图像并隐藏模态。所以单击编辑时，我只显示再次隐藏模态。）。
• 如果从文件输入中选择了另一个文件，则模态将与新图像一起显示。用户可以裁剪或取消。如果它被取消，我想将裁剪器的源图像重置为上一个图像。我怎样才能做到这一点？

我尝试了以下方法，但不起作用：

HTML 代码：

使用该sourceImage物业是做我想做的事情的正确方法吗？我更改了this.lastCroppedImage唯一的内部crop() 方法。但是，只要在文件输入中选择新图像，它似乎就会发生变化。为什么会这样？

PS：我已经尝试过sourceImage直接分配而不创建新的ElementRef. 那也行不通。

Stackblitz 示例：https ://stackblitz.com/edit/image-cropper-r5pyqh

在 Stackblitz 中重现的步骤：

我有一个 vue 应用程序表单，其中包含 ant-design-vue 上传的图像上传器。我将此图像上传器链接到一个新组件，该组件在使用cropper.js 上传后处理要裁剪的图像。第一次作物一切都很好，工作完美。但是当用户第二次需要更换照片并再次裁剪时，裁剪区域上的图像仍然使用第一张图像。第三次上传将裁剪第二个区域，下一次将收到相同的影响。

这是我的代码的结构：

这是脚本和样式：

问题发生在这里：

我已经破坏了 this.cropper 但仍然裁剪相同的图像。我试图通过 console.log 预览 this.cropper、this.image、this.initialImage、this.uploadedImage 的每个值，但它们都没有问题。它将在 this.uploadedImage 上携带新值，使用 vue watch 进行更改。我不知道为什么只有上面的这个函数仍然带有相同的图像。有什么方法可以初始化 this.cropper 或者可以克服我的问题的方法，比如重新渲染这个子组件？

我试过这个教程我在此链接

我的代码是

但是，它Uncaught TypeError: $(...).cropper is not a function在$("#teh").cropper();