Croppie JS使用jquery分离裁剪函数和上传函数
Croppie JS是一个基于jQuery的图片裁剪插件，它提供了分离的裁剪函数和上传函数，可以方便地实现图片裁剪和上传的功能。
裁剪函数主要用于裁剪图片，它可以设置裁剪框的大小、裁剪框的比例、裁剪结果的大小等参数。通过调用裁剪函数，可以将原始图片按照指定的裁剪参数进行裁剪，并返回裁剪后的图片数据。
上传函数主要用于将裁剪后的图片上传到服务器。它可以设置上传的目标地址、上传的方式（同步或异步）、上传的参数等。通过调用上传函数，可以将裁剪后的图片数据发送到服务器，并进行相应的处理。
Croppie JS的优势在于它简单易用、功能丰富、兼容性好。它提供了丰富的配置选项和回调函数，可以满足不同场景下的需求。同时，Croppie JS还支持移动端和桌面端的使用，可以在不同设备上实现图片裁剪和上传的功能。
Croppie JS的应用场景包括但不限于：
- 用户头像裁剪：可以使用Croppie JS让用户自定义裁剪头像的区域和大小，然后将裁剪后的头像上传到服务器。
- 图片编辑器：可以使用Croppie JS实现在线图片编辑功能，包括裁剪、旋转、缩放等操作。
- 商品图片裁剪：可以使用Croppie JS让用户自定义裁剪商品图片的区域和大小，以适应不同的展示需求。
推荐的腾讯云相关产品：
- 腾讯云对象存储（COS）：用于存储和管理裁剪后的图片数据，提供高可靠性和高可扩展性的存储服务。产品介绍链接：https://cloud.tencent.com/product/cos
- 腾讯云云服务器（CVM）：用于部署和运行裁剪函数和上传函数的服务器实例，提供高性能和可靠性的云服务器。产品介绍链接：https://cloud.tencent.com/product/cvm
- 腾讯云内容分发网络（CDN）：用于加速裁剪后的图片的传输和访问，提供全球覆盖的加速节点，提高用户访问体验。产品介绍链接：https://cloud.tencent.com/product/cdn
以上是关于Croppie JS使用jquery分离裁剪函数和上传函数的完善且全面的答案。
相关·内容
我已经得到了这个工作代码，但我想调整一些东西，我想分开裁剪和上传，但问题是，我不知道如何获得裁剪的图像结果，当我点击裁剪按钮，然后使用它发送到我的upload.php时，上传按钮被点击。我已经尝试搜索和我一样的问题，所以我不需要在这里张贴问题和打扰任何人，但仍然没有运气，我也阅读了文档，但我仍然不知道该怎么办。
浏览 4提问于2018-07-29得票数 0
我正在使用jquery Croppie插件"“在上传之前裁剪图像，它工作得很好，但它停止了我的jquery代码中的"$(window).resize”函数
浏览 13提问于2019-07-15得票数 0
回答已采纳
我正在使用JavaScript Croppie库来创建一个图像裁剪器。我的任务是添加按钮，如果用户愿意，可以选择裁剪到特定的纵横比，而不是自己调整大小(我目前包含的选项是9 x 16、1 x 1和16 x 9)。为此，我编写了一个名为changeSize的函数，该函数将传入照片裁剪器的新宽度和新高度。这是可行的，但唯一的问题是，每次我点击不同的纵横比按钮时，它都会让我重新上传图像。我如何解决这个问题？/3.
浏览 18提问于2021-02-25得票数 0
1回答
我正在使用一个名为Croppie.js的库，它可以对图像进行裁剪。我想做的是：
$("#confirm-photo-edit").click(function(){
浏览 0提问于2018-06-25得票数 1
回答已采纳
我使用了一个jquery插件来裁剪图片。该插件将裁剪图像，并给我一个base64编码的字符串。为了将其上传到S3，我需要将其转换为文件，并将该文件传递给upload函数。我该怎么做呢？我尝试了很多方法，包括使用atob解码字符串。都不起作用。这是裁剪插件('croppie')的代码，它给出了编码后的字符串：
浏览 33提问于2016-07-29得票数 3
回答已采纳
使用Croppie plugin裁剪和上传图像，运行良好的示例代码如下 <html lang="en"> <title>PHP and jQuery - Crop Image and/2.6.2/croppie.min.css">
<script src="https://cdnjs.cloudflare.com/
浏览 21提问于2020-12-02得票数 0
我正在尝试将裁剪的结果上传到S3存储桶中。当我成功裁剪，然后尝试上传裁剪的结果时，我当前收到一个空白错误。 我遵循了亚马逊的文档，包括设置S3存储桶、身份池和配置我的CORS。我相信这个错误与croppie对裁剪后的结果的打包方式有关。我已经包含了我的app.js文件(我在其中处理上传)和调用addPhoto函数的代码。Resp是来自croppie的响应。预期的结
浏览 15提问于2020-04-28得票数 0
1回答
我想在我的网站上使用Jquery Croppie插件为我的用户裁剪图像，但我有这个问题，我写的代码没有在中显示为示例HTML代码<div class="upload-msg"></div>
<div id="upload-demo">&
浏览 1提问于2015-12-12得票数 23
回答已采纳
1回答
我正在尝试使用将图像裁剪到剪贴簿<div id="vanilla-demo"></div><img id="myImage" src="">
<script src="https://code.jquery.com/jquery</em
浏览 2提问于2015-12-03得票数 3
回答已采纳
3回答
jQuery图像裁剪插件
、、、、
我正在为我正在开发的一个应用程序使用jQuery croppie插件，并且遇到了一个问题。我使用上传功能，允许用户上传要裁剪的图像。这两件事我都去不了了：
调用destroy()函数--不幸的是，这删除了croppie为使脚本工作而添加的所有标记。一旦它被摧毁，我就找不到重新初始化它的方法了。使用内置的bind函数将url属性设置为空值--这是在croppie页面上的一个建议。
浏览 4提问于2016-09-13得票数 3
回答已采纳
1回答
我试图添加一个图像裁剪到我正在工作的网站。我所依据的例子是：
});因此，据我所知，第一个$(函数() )可以通过调用onLoad方法来简化，$(‘demo’)可以通过使用document.getElementById因此，该页面导入croppie javascript文件。croppie
浏览 0提问于2018-05-06得票数 1
回答已采纳
1回答
Croppie.js外帧
、、、、
从该示例中，croppie.js用于在上传到后端之前对图像进行裁剪和预览。在该示例中，边界和视图设置为400 so (宽度和高度)，因此代码如下所示： width: 400 viewport: { heig
浏览 3提问于2021-09-24得票数 0
在上传之前，我使用编辑图片。任务是在不重新加载页面的情况下销毁并再次初始化这个插件。('#someID').croppie('bind');croppie.min.js:1 Uncaught Error: Croppie: Can't initialize croppie more than once
很明显，我现在
浏览 14提问于2018-02-22得票数 1
我正在使用一个名为croppie的jquery裁剪插件在用户将图像上传到数据库之前对图像进行裁剪，但是由于某些原因，图像被插入到上传文件夹中，但是sql查询不起作用。有谁能帮帮我吗？<br/>
<button class="btn btn-success upload-result">Upload Imag
浏览 14提问于2017-08-01得票数 0
3回答
我使用插件这个作物图像功能。当用户单击文件输入上的cancel时，输入文本字段变为空，并且图像不会变为空。当用户单击文件输入上的“取消”按钮时，我也要删除该图像。="hidden" id="imagebase64" name="imagebase64"></form> var r
浏览 0提问于2017-06-08得票数 1
回答已采纳
1回答
我正在使用Croppie.js在我的网站上裁剪和上传图像。然而，我发现在浏览图片的同时，它还会显示视频和其他格式的文件，甚至还在选择它。我在中搜索了解决方案，但没有找到。它确实在文档中提到了支持jpeg和png的格式，但这只是在结果中。我没有找到一种限制显示视频文件的方法。任何帮助都将不胜感激。代码： var resize = $('#upload-demo').<
浏览 14提问于2020-05-30得票数 1
回答已采纳
4回答
我正在使用Croppie来裁剪和上传图片。一切正常，除了我不能设置上传前的默认图片。function (e) { $uploadCrop.croppieurl: e.target.result
浏览 141提问于2018-02-22得票数 0
回答已采纳
1回答
在我的应用程序中，我使用croppie裁剪图像，然后预览，然后上传裁剪后的图像。我已经裁剪图像作为预览，但我无法在我的输入字段中设置裁剪值。btn-default" data-dismiss="modal">Close</button> </form>
</div>
浏览 28提问于2019-01-19得票数 1
2回答
例如，我有一个JavaScript函数： var crop = new Croppie(document.getElementById('js-image-editor{ width: y, height: y, type: 'square'}, });现在，我需要访问这些代码中使用的“裁剪”变量：
$('.fa-sa
浏览 1提问于2018-06-25得票数 2
回答已采纳
3回答
我使用croppie.js来裁剪用户上传的图像，一旦裁剪完成，ajax就被用来上传结果。这是它的代码。. $('.upload-result').on('click', function (ev) { type: '> 如您所见，uploader.php使用time()作为
浏览 25提问于2021-09-24得票数 0
回答已采纳
云服务器
ICP备案
对象存储
云直播
腾讯会议
腾讯云开发者
