问题标签 [cropper]

我想添加文件以<input type="file" multiple>使用 js/jQuery。

这是遇到问题的地方，我使用的是cropperjs，所以我希望将裁剪后的图像附加到表单数据并在提交时发送。

我正在尝试将cropper.js 用于以下场景：

1. 用户通过表单输入上传图片
2. 用户裁剪图像，导致裁剪 a
3. 裁剪 a 显示为新图像
4. 用户进一步裁剪图像，导致裁剪 b
5. 两个裁剪的图像都发送到服务器

出于某种原因，当我将通过我的代码生成的 base64 数据 url 放入解码器或图像标签时，我得到一个损坏的图像或一小块图像。以下是我的代码的相关部分：

1. 包含图像标签的页面上存在 Html：id=originalImg

   /li>

2. 用户使用cropper.js 界面选择一个裁剪，然后单击一个按钮，该按钮获取裁剪部分：

   /li>

3. 然后，我将 originalImg 标记替换为具有第二步中的源的新图像标记，然后再次执行上面的步骤 1 和 2。

知道为什么生成的 base64 看起来很不稳定吗？

所以我想要什么：

选择具有输入类型文件的图像，使用 blueimp 缩小比例，使用cropper.js裁剪该图像

所以 blueimp 部分工作正常，图像被调整为 maxWidth 属性并作为<img>标签附加到“#imagearea”然后我想根据该标签初始化cropper.js，就像在文档中一样，这是我的代码

但是在初始化裁剪器时，首先我收到一个 404 错误，例如

进而

Uncaught RangeError: Offset is outside the bounds of the DataView at DataView.getUint8 () at m (6eaf333.js:7051) at e.value (6eaf333.js:7051) at XMLHttpRequest.n.onload (6eaf333.js:7051)

我正在尝试使用 Cropper.js 来允许用户裁剪大图像——图像通常大于 3000x3000 像素。

当图像加载到我的 div 元素中时，它会缩小到 1024px 宽。在我的测试用例中，原始图像是 4032x2268，所以在浏览器中是 1024x576。

getCropBoxData() 和 getCanvasData() 方法返回要裁剪的选定区域的 x、y、宽度和高度值，但它们表示相对于图像的 1024x576 缩放比例，而不是原始图像的实际图像尺寸。

我尝试编写一个转换例程来确定 X 和 Y 比例值并进行相应的转换，但它不能正常工作。

在这一点上，我想我会在这里发帖，看看是否有更简单的方法。Cropper.js 似乎在 getImageData() 方法中返回了 scaleX 和 scaleY 值，但它并没有像我希望的那样工作。

有人知道我该如何处理吗？

我有没有机会允许将图像添加到输入的用户在通过 ajax 将其发送到服务器之前实际进行裁剪？我可以通过转换为 base64 格式轻松显示它，但是在任何 jquery 插件中都没有关于如何在检测到输入更改后生成裁剪的文档。我尝试了cropper.js 和Jcrop.js，但在选项中找不到这样的方法 - 只能从静态源读取，无法通过用户添加到输入的blob 类型读取。有什么帮助吗？

我一直在使用cropper js。

我正在根据输入值（整数）调整裁剪器的大小。例如 A 和 B。

因此，当用户输入 A = 200 和 B = 240 时。裁剪器计算纵横比并显示裁剪器。是否有选项或某种技巧可以强制裁剪器根据比率强制它填充宽度或高度？

如果我的问题不清楚，请参阅下面的图片。首先有一个不正确的图像，我在两侧以及顶部和底部都有空格。 不正确

此图像是正确的： 正确 因此，在正确的图像上，用户不应该将其缩小，并且如果比率低于 1，则它应该填充高度而不是宽度。

有人对此有好感吗？

我正在尝试从 Internet 下载图像并将其传递给设备的默认裁剪器，但它显示无法加载图像。

我的代码是：

我浏览了https://github.com/fengyuanchen/cropperjs提供的文档，但在那里找不到任何信息。我还尝试使用像 imgAreaSelect 这样的库，它提供 x1、y1、x2、y2 格式的坐标信息。

我正在使用cropper.js 来裁剪图像我编写了一个指令，该指令将获取图像src

然后创建图像元素，将其附加到 dom 并将图像传递给裁剪器构造函数

我已将默认选项 checkCrossOrigin 设置为 false 但仍然给出错误

请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问源“ http://localhost:9090 ”。

任何帮助，将不胜感激。