问题标签 [cropit]

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 回答
344 浏览

jquery - cropit jQuery 插件 - 如何设置自定义拖放区?

我正在使用cropit - 一个“可定制的裁剪和缩放” jQuery 插件。

以下代码是cropit使用的HTML结构。默认情况下,用户可以将图像拖放到.cropit-preview-image-container. 我的问题是如何设置自定义拖放区?因为我想要一个大于图像大小的拖放区。

0 投票
1 回答
1131 浏览

javascript - 插件不适用于 JQuery-3.1.0

我正在尝试使用cropit插件创建图像裁剪器

此代码工作正常,没有任何问题。但是,如果我用最新版本(3.1.0)替换当前版本(2.0.0),则不会加载浏览的图像。即,如果我们替换:

那么图像将不会被加载。我不能使用 jQuery 旧版本,因为我已经在使用其他插件的最新版本。

0 投票
0 回答
218 浏览

javascript - 使用cropit插件导出多个图像

我正在使用cropit插件,它运行良好,但有人知道如何放置多个图像预览并正确导出它们而不执行多个功能吗?这是插件的演示,这里是代码:

0 投票
1 回答
1140 浏览

jquery - 如何在 jquery/php 中上传序列化的图像数据?

我正在尝试http://scottcheng.github.io/cropit/使用OpenCart 3. 但我不知道如何上传序列化的图像数据。

这是代码的 HTML 部分,实际上是 Cropit 扩展的代码:

和 JQuery / Ajax 脚本:

有趣的是,页面successful image upload通过单击提交按钮显示消息,但实际上并没有上传文件。

更新:更多信息

这是PHP上传功能:

返回此错误:
PHP Warning: is_file() expects parameter 1 to be a valid path, string given

不知道如何计算它!

0 投票
1 回答
1061 浏览

javascript - 无法在cropit.js 中缩放小图像

阅读文档后,即使图像很小,我仍然没有找到如何调整图像大小的解决方案。但它正在处理大图像,但又一次它不适用于小图像。请在下面查看我的代码:

示例图像

在此处输入图像描述

0 投票
0 回答
68 浏览

ajax - 在laravel中,当我有两个刀片模板并且都使用ajax和cropit来读取和保存图像时,是否可以将cropit与ajax一起使用

在 laravel 中,我有两个刀片模板,我在两个引导模式中使用 ajax 阅读并显示它们,我有cropit.js 来裁剪图像并将它们保存为编辑用户和插入用户,但是,我不能同时包含两者我的模板,一个覆盖另一个,例如@include('addstudent.blade.template')第一次,我可以使用它保存图像,但我无法保存图像,@include('editstudent.blade.template') 我什至更改了表单的名称,但没有成功!我只能包含我的刀片模板之一,有什么解决方案可以同时使用它们吗?(记住我使用的是ajax)。这是addstudent的代码:从$('#cropitbaby').on('submit',function (e)e.preventDefault();,是重要的部分,其余的与我的问题无关。

更新代码是一样的。但这不是问题。问题是为什么其中一个会覆盖另一个,例如,如果我使用并包含addstudent.blade.php我将无法使用更新(我的意思是与使用cropit 读取和保存图像相关的部分)。它会从addstudent.blade.php!!

0 投票
1 回答
47 浏览

angular5 - 我们可以在 Angular 5 中使用 Cropit 吗?

我可以在 Angular 5 中使用 Cropit 插件吗? http://scottcheng.github.io/cropit/

0 投票
1 回答
878 浏览

javascript - Cropit 获取图像 src

我正在使用cropit,我想以模态预览裁剪的图像。如何获取裁剪图像的 src url

我复制了这个插件HTML的部分基本 html 代码

JS

到目前为止我尝试的是从文档中使用

演示和文档似乎没有融合,所以我很难使用插件。

0 投票
0 回答
226 浏览

image - 数据 URL 中缺少图像的一部分

以下问题的背景故事:

我正在使用 jQuery 插件 Cropit 生成以数据 URL 形式获取的图像(用户上传图像,Cropit 允许他们操作它,当用户满意时,Cropit 会导出最终图像)。

此数据 URL 通过Shopify 属性附加到产品(这是 Shopify 网站) (以类似的方式附加雕刻产品的文本),然后在创建订单时,我有一个应用程序正在侦听新订单,我从订单中提取数据 URL。

通过测试,我可以确认下订单时数据 URL 错误/损坏/损坏,并且在运输过程中没有损坏。

原始问题

我有一个奇怪的情况,我在网上找不到任何类似的情况。

正在向我发送数据 URL 格式的图像(如果相关,来自 Shopify,我编写了一个私有应用程序,他们的 webhook 正在向我发送图像)

图像采用数据 URL 格式,例如,

我遇到的问题是有时(可能不到 10% 的时间)当我获取图像并尝试打印它时,它会丢失图像的底部块。在 PDF 中,它认为图像已损坏,而在 Web 浏览器中,它只是将图像的底部视为透明的,尽管缺少很多。

当您将鼠标悬停在图片 URL 上时,这就是在 Google Chrome 上的 Inspect Element 中的样子(图片因匿名而变紫)

在此处输入图像描述

我的问题是,有人知道为什么吗?

我们找不到与浏览器或设备类型的关联。而且我不确定是不是因为部分数据 URL 丢失了(可能是字符限制,因为它是一个非常长的字符串!)或者是图像的类型。上传过程中可能出现问题?

有没有人能够阐明任何观点?这是一个奇怪的问题,我什至不知道该谷歌搜索什么!

为了确认,由于一系列原因,图像绝对必须以这种格式发送,主要是 Shopify 的限制,所以我不能以文件格式发送图像。

0 投票
1 回答
675 浏览

javascript - 使用更高效的 blob 或 base64 进行上传

我们正在使用cropit在客户端裁剪图像,然后将base64字符串上传到服务器,但是对于大图像,有时它会使内存较低的移动浏览器崩溃,将base64转换为blob是个好主意[在JavaScript中从Base64字符串创建一个BLOB然后将其上传到服务器上,否则它将影响更多的移动用户,因为第一张图像将被覆盖到 based64 进行裁剪,然后返回到 blob 。