问题标签 [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.

0 投票
1 回答
3483 浏览

javascript - 如何使用 Cropper.js 进行“缩放”和“旋转”

我正在使用 Cropper.JS 来编辑图像。到目前为止一切顺利,我可以加载、裁剪和保存这些图像。

我无法让“缩放”和“旋转”按钮正常工作。

*** 当我使用鼠标滚轮时,缩放确实有效

我尝试从主发行版中粘贴代码并尝试从那里进行调整,但没有任何积极的结果。

的HTML:

JS:(我从 dist 粘贴的代码从以下行开始:var URL = window.URL || window.webkitURL; 并在以下行结束:console.log("test"); 所有其他代码都在工作为了我。

尝试使用按钮进行滚动和旋转工作。

0 投票
1 回答
1287 浏览

javascript - 通过范围滑块旋转图像

大家好,如何通过范围滑块使图像旋转?

我构建了函数,使其范围可以在 0 到 360 之间并显示值范围,它工作正常,但是如何应用它来旋转图像?裁剪图像脚本文档在这里

我用裁剪脚本更新了代码,请帮助旋转图像并输出到 div

0 投票
1 回答
383 浏览

javascript - 当我尝试使用cropperJS 获取 50% 的图像时出现错误

我想用 'cropperJS' 获得 50% 的图像。我创建了一个新的 Image() 并尝试创建新的 Cropper 以进一步获取画布。我收到错误“无法读取 null 的属性 'insertBefore'”,请帮我解决这个问题。或者告诉我如何在没有“cropperJS”的情况下获得 50% 的图像。提前致谢。

0 投票
0 回答
255 浏览

javascript - 仅在裁剪区域内显示图像(cropper-js)

我正在使用cropper-js(由fengyuanchen制作)开发图像裁剪工具。这是一个很棒的工具,一切都很完美,除了一件事,我不确定我是否错过了设置中的某些内容。

用户应该能够移动图像(而不是可移动的裁剪区域)。裁剪区域是一个响应方块,图像应该只在裁剪区域内可见。现在图像在裁剪区域内外可见。我想删除边缘(当图像处于纵向模式时,边缘位于顶部/底部)。

例子:

我目前使用的设置是:

可以使用 css (类cropper-canvas)隐藏边缘,但这会在每一侧留下空白,并且对于纵向图像,这些空白位于顶部/底部。

任何人都可以帮助解决这个问题吗?

0 投票
1 回答
1620 浏览

vue.js - 在使用 vue-cropperjs 裁剪图像后上传图像 - Base64 / 二进制编码/解码问题

我有一个表单,允许用户上传图像,裁剪该图像(使用 vue-cropperjs 包装器组件)然后上传裁剪的图像(不是原始图像)。

我无法为文件提供正确的格式以便上传。该文件已被转换(编码)为 base64 图像字符串以在页面上显示。我现在需要将其转换(解码)回文件格式以上传(作为默认的图像上传表单输入)。

可以在以下位置找到视图组件:https ://www.npmjs.com/package/vue-cropperjs

以下代码基于此包示例中的代码,我刚刚为此示例添加了上传方法:

我已经对 blob、解码等进行了一些研究——但一直无法找到可靠的解决方案。

0 投票
2 回答
5123 浏览

javascript - CROPPER JS 获取裁剪器画布不适用于较大的文件

我正在使用 https://github.com/fengyuanchen/cropperjs/但它在功能上有问题getCroppedCanvas,它在小图像上工作得很好,但在大图像上不显示

我正在使用这个现场示例https://fengyuanchen.github.io/cropperjs/examples/upload-cropped-image-to-server.html;源代码:

裁剪器脚本位于:https://fengyuanchen.github.io/cropperjs/js/cropper.js

0 投票
0 回答
249 浏览

angular - cropper.replace 不替换图像

我在替换图像时遇到问题。我有一个组件,在按钮单击时我选择要在裁剪器中输入的图像。但是,如果我选择重新选择它,cropper 会在cropper 中设置两个图像。我正在使用cropper.replace,但它并没有改变任何东西。

我试图用cropper.destroy() 和cropper.reset() 方法破坏cropper,然后再次初始化它,但对我也不起作用。

我希望输出一张由两张图片组成的图片

0 投票
0 回答
51 浏览

javascript - 使用 Js 为列表视图中的每个条目制作模式?

我有一个页面,其中存在多个图像,我想让用户能够裁剪其中的任何一个,所以我制作了一个 for 循环来为每个图像制作一个模式,并且我也循环了 js 函数。

这是我的模态。

这是我使用的功能

但问题是模态永远不会显示,所以我真的不明白有什么问题?我应该怎么做才能使这项工作是显示模式的第一个功能的问题是否有更简单的方法来做到这一点我想要的是用户能够指定他们想要的图像的一部分?

0 投票
1 回答
97 浏览

jquery - 使用 blueimp 从cropperjs 上传文件

我正在尝试使用 fileupload 从cropperjs 上传已编辑的图像。fileupload 类适用于网站的其他方面,所以我知道它有效。当我尝试运行 add 方法时,没有任何反应,控制台中也没有错误。

如果我这样做:让 r = $('#selector').fileupload(); 警报(JSON.stringify(r));

我从初始化中得到返回,但它不会触发 add 方法。有一个简单的 alert('dsf'); 在 add 方法中,它不会弹出。任何关于可能问题或如何排除故障的想法将不胜感激!裁剪器在对话框中运行,并且 blueimp 小部件包含在父页面中。

0 投票
0 回答
130 浏览

javascript - Javascript 模态裁剪现有图像?如何使用 js 函数遍历模态列表来处理它们?

我有一个页面,其中包含用户上传的多张图片,用户可以选择这些图片的一部分以表格形式提交(只是坐标 x,y,h,w)所以我为每张图片制作了一个模式,但我的问题是javascript 函数,因为它不会触发模式显示,而且我还不太熟悉 javascript。

基本上,当我单击按钮时,我想要一个模式打开并预览图像。

cropper.js用来抓取裁剪数据,当我在页面中有一个表单并且模式由文件字段触发的常规文件上传表单上尝试时成功加载,但现在我想将它与现有图像一起使用。

图片列表:

和模态

以及触发模态裁剪的功能:

我使用 django 模板语法来遍历图像并分配 pks。我进入控制台

SyntaxError: missing ) 在参数列表之后

更新1:

我显示了模态框,但裁剪框没有显示这是我更改的内容。我将按钮data-toggle设置为模态modal并删除了处理模态的功能。data-targetid

现在错误消息不会显示在控制台中。但我现在明白了

ReferenceError: $image 未定义