正文 

当前位置： 首页 > 源码 >

如何使用带有 php 的cropit jquery 插件裁剪和上传照片

     2023-02-22     19

关键词：

【中文标题】如何使用带有 php 的cropit jquery 插件裁剪和上传照片【英文标题】：How to crop and upload photo using cropit jquery plugin with php 【发布时间】：2015-03-21 01:43:53 【问题描述】：

所以我目前发现了这个名为 cropit 的照片裁剪插件。演示是here。所以我想要做的是抓取裁剪的照片并将照片的名称上传到mysql数据库并使用php将其保存到目录中。

到目前为止，我有这个：

HTML：

<form method="POST">
    <div class="image-editor">
        <div class="cropit-image-preview-container">
            <div class="cropit-image-preview"></div>
        </div>
            <div class="image-size-label">
            Resize image
        </div>
        <input type="range" class="cropit-image-zoom-input">
        <input type="hidden" name="image-data" class="hidden-image-data" />
        <button type="submit">Submit</button>
    </div>
</form>

jQUERY：

    $('form').submit(function() 
        // Move cropped image data to hidden input
        var imageData = $('.image-editor').cropit('export');
        $('.hidden-image-data').val(imageData);

        // Print HTTP request params
        var formValue = $(this).serialize();
        $('#result-data').text(formValue);

        // Prevent the form from actually submitting
        return false;
    );

我需要帮助的是 php 设置代码，因为当我裁剪照片并选择提交时，jquery 返回序列化代码，并且我通常不熟悉的所有这些代码都会出现。这是jquery返回的序列化代码的几个字符：

image-data=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhE...

【问题讨论】：

看看这个很棒的库 -Intervention Image-，你不会后悔的。它可以作为独立库使用，也可以作为 Laravel 包使用。 完全可以推荐Intervention Image。下面答案中的代码不起作用（空白图像），但一旦我使用干预，它就可以完美运行。 接受的答案对我不起作用，但这个干预图像做得很好 【参考方案1】：

1.保存base64编码的图片

    <?php
    //save your data into a variable - last part is the base64 encoded image
    $encoded = "data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhE";

    //decode the url, because we want to use decoded characters to use explode
    $decoded = urldecode($encoded);

    //explode at ',' - the last part should be the encoded image now
    $exp = explode(',', $decoded);

    //we just get the last element with array_pop
    $base64 = array_pop($exp);

    //decode the image and finally save it
    $data = base64_decode($base64);
    $file = 'data.png';

    //make sure you are the owner and have the rights to write content
    file_put_contents($file, $data);

2。获取base64编码图片的文件名

    $encoded = "data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhE";
    $decoded = urldecode($encoded);
    $exp = explode(';', $decoded);
    $exp = explode(':', $exp[0]);
    $image = array_pop($exp);
    echo ($image);

【讨论】：

优秀的答案。我有 1 个问题，我如何获得照片扩展名，因为它并不总是 png？我问的原因是因为我要将它添加到文件名的末尾。 图像名称包含它。您可以再次使用 explode() ，就像我的示例中所示。请注意，给定的文件扩展名不必与文件的 MIME 类型匹配。 我们如何将 jquery 数据保存在 php 变量中？ @JaskaransinghRajal 你必须使用 ajax 并设置 POST 或 GET 参数 我注意到，即使我上传“jpg”，我仍然收到编码为“data:image/png;base64”。如果它是“jpg”，它不应该显示“data:image/jpg;base64”吗？【参考方案2】：

通过不解码编码数据，我得到了 Hosch Nok 的答案。 不打电话：

$decoded = urldecode($encoded);

但直接使用 $encoded 变量。

【讨论】：

如何使用带有 json 和 php 的 jquery 的 $.ajax 函数上传文件

】如何使用带有json和php的jquery的$.ajax函数上传文件【英文标题】：HowcanIuploadafileusingjquery\'s$.ajaxfunctionwithjsonandphp【发布时间】：2012-05-1613:59:15【问题描述】：我正在尝试使用jQuery的$.ajax函数上传文件，但没有得到任何输出。有... 查看详情

jquery裁剪图片插件cropit示例

重装农药第16天！！jquery裁剪图片插件cropit示例背景：做的手机网页项目，用htmlfile控件上传图片，有些手机拍照后图片会很大，20M以上的，用之前的H5formdata上传的话有时会非常慢的，就想着能不能在选择图片的时候直接在客户... 查看详情

使用cropit的多个预览图像不同的高度和宽度

...和移动触摸屏上运行良好，但我的项目中有最后一个问题如何在此页面中进行多个预览！已经看过那里的问题，发现有人发布了和我一样的 查看详情

使用带有摘要身份验证、jquery ajax 调用的 RestFul PHP Web 服务

...all【发布时间】：2012-06-2719:04:36【问题描述】：我想知道如何使用摘要认证调用RestFulPHP网络服务？当我创建基本请求时，服务器需要身份验证，但我不知道如何发送用户名和密码。我需要这个用于phonegap应用程序。 查看详情

如何创建带有框架的新图像？

】如何创建带有框架的新图像？【英文标题】：howtocreatenewimagewithframeonit?【发布时间】：2016-09-2803:44:33【问题描述】：我要创建类似http://www.photofacefun.com/photoframes/的东西，它创建一个带有框架的新图像，我可以用php、jquery或html... 查看详情

BlackBerry - 开发类似 Cropit 的应用程序

...问题描述】：我想开发类似裁剪的应用程序，我只想知道如何增加或减小图像上矩形的大小（多点触控事件），它定义了要裁剪的图像部分。非常感谢【问题讨论】：【参考方案1】：使用onTouchEvent，查找DOWN和MOVE事件以正确绘制... 查看详情

带有json响应的jQuery ajax请求，如何？

】带有json响应的jQueryajax请求，如何？【英文标题】：jQueryajaxrequestwithjsonresponse,howto?【发布时间】：2012-02-2407:11:58【问题描述】：我正在发送一个带有两个post值的ajax请求，第一个是“action”，它定义了我的php脚本必须解析的操... 查看详情

如何使用 jquery 将带有 laravel 路由的 <a> 标签添加到表行

】如何使用jquery将带有laravel路由的<a>标签添加到表行【英文标题】：howtoadd<a>tagwithlaravelroutingtoatablerowusingjquery【发布时间】：2016-05-1506:30:23【问题描述】：如何使用jQuery向带有Laravel路由的表格行添加标签？exam.blade.php&l... 查看详情

如何使用 jQuery 选择带有文本的按钮

】如何使用jQuery选择带有文本的按钮【英文标题】：HowtoselectbuttonwithtextusingjQuery【发布时间】：2016-09-0211:56:09【问题描述】：是否可以使用jQuery中的text属性来选择按钮？我想：$.each(data,function(index,element)if(element.table_aval==0)varelmt=... 查看详情

PHP 使用 jQuery .post() 提交带有多个提交按钮的表单

】PHP使用jQuery.post()提交带有多个提交按钮的表单【英文标题】：PHPsubmittingaformwithmultiplesubmitbuttonsusingjQuery.post()【发布时间】：2013-02-2313:09:26【问题描述】：我有以下HTML代码：<formmethod="post"action="the_file.php"id="the-form"><inputt... 查看详情

如何使用 PHP、MySQL 和 Jquery 创建测验

】如何使用PHP、MySQL和Jquery创建测验【英文标题】：HowtoCreateQuizusingPHP,MySQLandJquery【发布时间】：2011-11-0417:22:20【问题描述】：我需要创建一个带有正确答案的测验/多项选择题。它基本上是针对词汇的，所以“将显示一个定义”... 查看详情

Symfony2-Crop |如何取回我裁剪的图像？

】Symfony2-Crop|如何取回我裁剪的图像？【英文标题】：Symfony2-Cropit|Howtogetbackmycroppedimage?【发布时间】：2016-03-0213:53:40【问题描述】：我对这个插件非常失望。我是JS/Jquery的菜鸟，但我的网站非常需要这个插件......所以我在这里找... 查看详情

如何使用 jQuery 使用带有逗号的动画来增加数字？

】如何使用jQuery使用带有逗号的动画来增加数字？【英文标题】：HowtoincrementnumberusinganimatewithcommausingjQuery?【发布时间】：2013-04-2002:54:44【问题描述】：我正在尝试增加页面元素内的数字。但我需要在数字中包含一个逗号作为千... 查看详情

如何使用带有 React 视图切换的 jQuery 模式？

】如何使用带有React视图切换的jQuery模式？【英文标题】：HowtouseajQuerymodalwithReactviewswitching?【发布时间】：2014-05-0208:39:16【问题描述】：在React方面我有点新手，所以希望有人可以提供帮助。我已经能够使用React创建一个通用的... 查看详情

使用带有外部 Json 的 jquery UI 自动完成

...ithexternalJson【发布时间】：2018-02-1603:43:36【问题描述】：如何使用带有https://www.w3schools.com/js/customers_mysql.php的jqueryUI自动完成小部件例如【问题讨论】：【参考方案1】：您可以在这里找到答案：https://jqueryui.c 查看详情

使用 Javascript、jQuery 和/或 php 创建带有基于坐标的标记的地图

】使用Javascript、jQuery和/或php创建带有基于坐标的标记的地图【英文标题】：Createamapwithcoordinates-basedmarkerusingJavascript,jQueryand/orphp【发布时间】：2013-09-0313:53:06【问题描述】：我正在开发一个客户端-服务器应用程序，我需要创建... 查看详情

在通过 slingshot 上传之前使用 Meteor js 中的 Cropit 进行图像裁剪

】在通过slingshot上传之前使用Meteorjs中的Cropit进行图像裁剪【英文标题】：UseCropitinMeteorjsforimagecroppingbeforeuploadviaslingshot【发布时间】：2016-07-2523:42:09【问题描述】：有没有人有使用cropit和流星的经验？我想在通过slingshot将图像... 查看详情

使用带有“远程”选项的 jQuery 验证插件

】使用带有“远程”选项的jQuery验证插件【英文标题】：UsingthejQueryvalidatepluginwiththe"remote"option【发布时间】：2011-10-0923:19:53【问题描述】：我正在使用jQuery验证插件及其远程选项来检查输入字段中的用户名是否存在。我... 查看详情