php+croppic.js实现剪切上传图片功能
|
最近需要实现裁剪图片上传，想起之前公司用到的一个插件，却不知道叫什么名字了。 在网上找了有些时间，最终找到了这个网站。 因为官网文档全部都是英文，所以看起来有些吃力，可以大概看懂80%，但是缺少详细的案例说明，所以真正配置起来还是非常懵逼。 如果完全按照官网文档的步骤，大概就是这样的 下载安装
官网提供两种下载方式，第一种类似于SDK的whole website，另外一种 简洁版croppic。前者提供了完整的项目结构以及前后端案例，后者只有croppic.css、croppic.js、croppic.min.js三个文件。 基本使用
// js部分
var options = [
uploadUrl:'图片上传地址', cropUrl: '图片裁切后发送的地址', // 等等各种参数配置信息
];
var cropperHeader = new Croppic('yourId',options);
Options 参数uploadUrlphp处理时，和普通的上传文件一模一样，使用$_FILES['img']可以直接获取文件信息，上传并保存;使用$_REQUEST[]则直接可以获取js中uploadData中的数据。 php在处理完成后，根据成功状态返回如下json结构 成功时 注意：源图片宽高获取方式 list($width,$height) = getimagesize($_FILES["img"]["tmp_name"]); 失败时 cropUrl接下来是裁切图片的请求，基本使用 请求php的参数基本如下：
php 端使用 nezamy/route 的request类获取croppic.js裁切后发送过来的参数 body['imgUrl'];
// 原始图片宽高
$imgInitW = $request->body['imgInitW'];
$imgInitH = $request->body['imgInitH'];
// 新缩放的图片宽高
$imgW = $request->body['imgW'];
$imgH = $request->body['imgH'];
// 与缩放图像相关的裁剪图像的左上角
$imgY1 = $request->body['imgY1'];
$imgX1 = $request->body['imgX1'];
// 裁剪图像宽高
$cropW = $request->body['cropW'];
$cropH = $request->body['cropH'];
// 角度
$angle = $request->body['rotation'];
其他参数就不用介绍了，文档上面可以看，如果看不懂或者不太清晰的可以直接下载案例做参照，比文档要详细些。接下来的重头戏在php端的处理。 PHP 各种操作图片GD库 'success','url' => $output_filename . $type,]);
// 最后删除缓存图片
//unlink($output_filename . $type);
JS各种配置 ',onBeforeImgUpload: function () {
crop_image_src = $('#image_input').val();
},onAfterRemoveCroppedImg: function () {
var res = confirm('您是要使用原图还是清除图片？nr[确认]使用原图，[取消]清除图片');
if (res) {
$('#image_input').val(crop_image_src);
$('#cropContainerEyecandy').prepend(' 
总结以上所述是小编给大家介绍的php+croppic.js实现剪切上传图片功能，希望对大家有所帮助。程序员遇到问题都会上（编程之家52php.cn）查找问题解答方法！如果觉得站点还不错，随手转发给程序员朋友一下！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
