问题标签 [cropperjs]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

205 问题

0 投票

1 回答

2031 浏览

javascript - 如何处理 Cropper.js 中的缩放和大图像？

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

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

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

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

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

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

2017-05-17T16:10:43.893

0 投票

2 回答

4438 浏览

javascript - HTML 画布和内存使用情况

我正在使用画布和科尔多瓦为移动设备制作一个非常基本的图像编辑器。不幸的是，当涉及到画布时，javascript 是记忆的猪，这会导致一切在移动设备上彻底崩溃。

我正在使用cropperjs 来处理裁剪。（如果你有更好的，请告诉我）。Cropper 只允许使用 base 64 数据 URL 检索图像，这似乎是巨大的内存浪费。裁剪图像后，我需要重新显示它以再次裁剪。一个好处是图像会根据裁剪方式变成黑白。这部分工作得很好，但可能再次使内存大小翻倍，因为它最终使用从画布中提取的 dataURL。

页面上的按钮调用此函数。这就是麻烦似乎开始的地方。

我猜最终的问题是 dataURL 是如此庞大，即使不在 DOM 中它也会消耗内存。这段代码导致 chrome 和 firefox 为 600kb 的照片增加了大约 700mb 的 RAM 使用量。有没有更好的方法将修改后的图像存储在内存中？更小的东西？或者，有没有办法制作一个新的临时文件并加载它？还是我完全走错了路？

- 编辑 Blindman67 的答案

从文件上传加载图像的代码

页面本身基本上是

- 编辑看起来使用画布而不是 imgs 效果很好。

html:

脚本

javascript html cordova canvas cropperjs

2017-06-22T12:43:03.763

0 投票

1 回答

837 浏览

javascript - cropperjs > 创建容器时出错

我正在构建一个 chrome 扩展：https ://github.com/justaguy84/resizemy.photos.chrome这将有助于从网络上裁剪和调整图像大小。
我正在使用cropperjs 库：https
://github.com/fengyuanchen/cropperjs 出于某种原因，当更改裁剪尺寸时，我得到了 2 个裁剪容器，而不仅仅是一个，而且它们的宽度/高度都有一些问题。

奇怪的是，它有时工作，有时不工作，而唯一的变化是刷新页面。

希望有人可以提供帮助。谢谢。

更新

这是html和js代码： html

javascript - main.js

希望这将有助于调试。谢谢

javascript google-chrome-extension cropperjs

2017-06-29T20:37:44.773

0 投票

1 回答

6275 浏览