javascript 如何使用带有 php 的cropit jquery 插件裁剪和上传照片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28085848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to crop and upload photo using cropit jquery plugin with php
提问by this.Tony
So I currently found this photo cropping plugin called cropit. Demos are here. So what I want to do is grab the cropped photo and upload the name of the photo to the mysql database and save it to a directory using php.
所以我目前找到了这个名为cropit 的照片裁剪插件。演示在这里。所以我想要做的是抓取裁剪后的照片并将照片的名称上传到mysql数据库并使用php将其保存到目录中。
So far I have this :
到目前为止，我有这个：
HTML :
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;
});
All I need help is with the php set up code because when I crop the photo and select submit, jquery returns the serialize code, and all this code that I'm usually not familiar with appears. Here is a few characters of the serialized code jquery returns:
我需要帮助的只是 php 设置代码，因为当我裁剪照片并选择提交时，jquery 返回序列化代码，所有这些我通常不熟悉的代码都会出现。这是jquery返回的序列化代码的几个字符：
image-data=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhE...
回答by oshell
1. Saving the base64 encoded image
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. Getting the filename of base64 encoded image
2.获取base64编码图片的文件名
$encoded = "data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhE";
$decoded = urldecode($encoded);
$exp = explode(';', $decoded);
$exp = explode(':', $exp[0]);
$image = array_pop($exp);
echo ($image);
回答by Javier Ugarte
I got Hosch Nok's answer to work by not decoding the encoded data. Not calling:
通过不解码编码数据，我得到了 Hosch Nok 的答案。不叫：
$decoded = urldecode($encoded);
But working directly with the $encodedvariable.
但是直接使用$encoded变量。
