Php+croppic.js realization of cash tray platform rental cut upload image

The official website provides two kinds of download cash tray Platform Rental (www.1159880099.com) QQ1159880099 mode, the first one is similar to the SDK whole website, another simple version croppic. The former provides a complete project structure and a front-end case, the latter only croppic.css, Croppic.js, croppic.min.js three files.

Basic use
Copy Code
CSS Section
#yourId {
width:200px;
height:150px;
position:relative; / or fixed or absolute /
}

HTML section
<div id= "Yourid" ></div>

JS section
var options = [
Uploadurl: ' Image upload address ',
Cropurl: ' The address sent after the picture is cut ',
And so on. Various parameter configuration information
];
var cropperheader = new Croppic (' Yourid ', options);

Copy Code
Options parameters
Uploadurl
Uploadurl: ' Make an upload address ',
uploaddata:{
"Dummydata": 1,
"DummyData2": "Text"
}

PHP processing, and ordinary upload files exactly the same, using $_files[' img '] can directly obtain the file information, upload and save, using $_request[] directly can get the data in JS Uploaddata.
After processing is completed, PHP returns the following JSON structure based on the success status
When successful
Copy Code
{
"Status": "Success",
"url": "Returns the image URL address after success",
"width": Source picture width,
"Height": Source image Height
}
Copy Code
Note: The source image is wide-height get the list ($width, $height) = getimagesize ($_files["img" ["Tmp_name"]);

When failed
{
"Status": "Error",
"Message": "Here is your message of failure"
}
Cropurl
Next is the request to crop the picture, basic use

Copy Code
var cropperoptions = {
Uploadurl: ' requested address after cutting ',
uploaddata:{
"Dummydata": 1,
"DummyData2": "Text"
}
}
var cropperheader = new Croppic (' Yourid ', cropperoptions);
Copy Code
The parameters to request PHP are basically as follows:

The PHP side uses Nezamy/route's request class to get the parameters that are sent after the croppic.js is cut.

Copy Code
$request = App (' request ');
Image path of the upload server
$IMGURL = $request->body[' Imgurl ');
Original picture Width height
$imgInitW = $request->body[' IMGINITW ');
$imgInitH = $request->body[' Imginith ');
New scaled picture width height
$imgW = $request->body[' IMGW ');
$imgH = $request->body[' imgh ');
The upper-left corner of the cropped image associated with the scaled image
$imgY 1 = $request->body[' imgY1 ');
$imgX 1 = $request->body[' imgX1 ');
Crop Image Width Height
$cropW = $request->body[' CROPW ');
$cropH = $request->body[' croph ');
Angle
$angle = $request->body[' rotation ');
Copy Code
Other parameters will not be introduced, the document can be seen above, if you do not understand or not too clear can directly download the case for reference, than the document to be more detailed. The next plays are handled on the PHP side.

PHP various operation Pictures GD library
Copy Code
$temp _name = "cropTemp" . Uniqid ();
$temp _path = Sys_get_temp_dir (). "/";
$output _filename = $temp _path. $temp _name;
$what = getimagesize ($IMGURL);
Create a canvas and load images
Switch (Strtolower ($what [' MIME ')]) {
Case ' image/png ':
$source _image = imagecreatefrompng ($IMGURL);
$type = '. png ';
Break
Case ' Image/jpeg ':
$source _image = Imagecreatefromjpeg ($IMGURL);
$type = '. jpeg ';
Break
Case ' image/gif ':
$source _image = imagecreatefromgif ($IMGURL);
$type = '. gif ';
Break
Default
throw new \exception (' Unsupported image type ');
}
if (!is_writable (dirname ($output _filename))) {
throw new \exception (' file cannot be written ');
}
Create a true color image to support richer colors, GIF files are not available
$resizedImage = Imagecreatetruecolor ($imgW, $imgH);
if ($type = = '. png ') {
Define black as a transparent color
Imagecolortransparent ($resizedImage, imagecolorallocate ($resizedImage, 0, 0, 0));
}
Imagecopyresampled ($resizedImage, $source _image, 0, 0, 0, 0, $imgW, $imgH, $imgInitW, $imgInitH);
Rotate image
$rotated _image = $angle? Imagerotate ($resizedImage,-$angle, 0): $resizedImage;
Get Image Width Height
$rotated _width = imagesx ($rotated _image);
$rotated _height = Imagesy ($rotated _image);
After rotation-after zooming
$DX = $rotated _width-$imgW;
$dy = $rotated _height-$imgH;
Crop a rotated picture to an image
$cropped _rotated_image = Imagecreatetruecolor ($imgW, $imgH);
if ($type = = '. png ') {
Set Black to Transparent
Imagecolortransparent ($cropped _rotated_image, Imagecolorallocate ($cropped _rotated_image, 0, 0, 0));
}
Imagecopyresampled ($cropped _rotated_image, $rotated _image, 0, 0, $DX/2, $dy/2, $imgW, $imgH, $imgW, $imgH);
Cut the image to the specified area
$final _image = Imagecreatetruecolor ($cropW, $cropH);
if ($type = = '. png ') {
Imagecolortransparent ($final _image, Imagecolorallocate ($final _image, 0, 0, 0));
}
Imagecopyresampled ($final _image, $cropped _rotated_image, 0, 0, $imgX 1, $imgY 1, $cropW, $cropH, $cropW, $cropH);
The final output image to the file, you can directly use File_get_content (' Output_filename '. $type) to get the picture.
Imagepng ($final _image, $output _filename. $type);

/**

• Upload server operation is required here
  */

Echo Json_encode ([
' Status ' = ' success ',
' url ' = $output _filename. $type,
]);
Finally delete the cached picture
Unlink ($output _filename. $type);
Copy Code
JS various configurations
Copy Code
var crop_image_src = ' image_src ';
var croppedoptions = {
Cropurl: '/http/deng.com/m/tool/crop_pic/crop ',
Modal:true,
Doublezoomcontrols:false,
Enablemousescroll:true,
imgeyecandyopacity:0.4,
Rotatefactor:90,
ZOOMFACTOR:20,
Outputurlid: ' Image_input ',
LoadPicture: ' Download the picture ',
Processinline:true,
loaderhtml: ' <div class= "loader bubblingg" ><span id= "bubblingg_1" ></span><span id= "bubblingG_2 "></span><span id=" Bubblingg_3 "></span></div>",
Onbeforeimgupload:function () {
CROP_IMAGE_SRC = $ (' #image_input '). Val ();
},
Onafterremovecroppedimg:function () {
var res = confirm (' Do you want to use the original image or clear the picture? \n\r[confirm] Use original image, [Cancel] clear picture ');
if (res) {
$ (' #image_input '). Val (CROP_IMAGE_SRC);
$ (' #cropContainerEyecandy '). Prepend (' ');
} else {
$ (' #image_input '). Val (');
$ ('. Croppedimg '). Remove ();
}
},
Onreset:function () {
var res = confirm (' Do you want to use the original image or clear the picture? \n\r[confirm] Use original image, [Cancel] clear picture ');
if (res) {
$ (' #image_input '). Val (CROP_IMAGE_SRC);
$ (' #cropContainerEyecandy '). Prepend (' ');
} else {
$ (' #image_input '). Val (');
}
},
Onerror:function (errormessage) {
Alert (' OnError: ' + errormessage)
}
};
var cropperbox = new Croppic (' Cropcontainereyecandy ', croppedoptions);
Copy Code

Php+croppic.js realization of cash tray platform rental cut upload image