php+croppic.js实现剪切上传图片功能


Posted in PHP onAugust 14, 2018

最近需要实现裁剪图片上传,想起之前公司用到的一个插件,却不知道叫什么名字了。

在网上找了有些时间,最终找到了这个网站。

http://www.croppic.net/

因为官网文档全部都是英文,所以看起来有些吃力,可以大概看懂80%,但是缺少详细的案例说明,所以真正配置起来还是非常懵逼。

如果完全按照官网文档的步骤,大概就是这样的

下载安装

php+croppic.js实现剪切上传图片功能 

官网提供两种下载方式,第一种类似于SDK的whole website,另外一种 简洁版croppic。前者提供了完整的项目结构以及前后端案例,后者只有croppic.css、croppic.js、croppic.min.js三个文件。

基本使用

// css 部分
#yourId {
  width: 200px;
  height: 150px;
  position:relative; /* or fixed or absolute */
}
// html 部分
<div id="yourId"></div>
// js部分
var options = [
uploadUrl:'图片上传地址',
cropUrl: '图片裁切后发送的地址',
// 等等各种参数配置信息
];
var cropperHeader = new Croppic('yourId',options);

Options 参数

uploadUrl

uploadUrl:'制定上传的地址',
uploadData:{
"dummyData":1,
"dummyData2":"text"
}

php处理时,和普通的上传文件一模一样,使用$_FILES['img']可以直接获取文件信息,上传并保存;使用$_REQUEST[]则直接可以获取js中uploadData中的数据。

php在处理完成后,根据成功状态返回如下json结构

成功时

{
 "status":"success",
  "url":"返回成功后的图片url地址",
  "width":源图片宽度, 
 "height":源图片高度
}

注意:源图片宽高获取方式 list($width, $height) = getimagesize($_FILES["img"]["tmp_name"]);

失败时

{
 "status":"error",
 "message":"这里是你的失败提示信息"
}

cropUrl

接下来是裁切图片的请求,基本使用

var cropperOptions = {
  uploadUrl:'裁切后请求的地址',
  uploadData:{
   "dummyData":1,
   "dummyData2":"text"
  }
}
var cropperHeader = new Croppic('yourId', cropperOptions);

请求php的参数基本如下:

php+croppic.js实现剪切上传图片功能 

php 端使用 nezamy/route 的request类获取croppic.js裁切后发送过来的参数

$request = app('request');
// 上传服务器的图片路径
$imgUrl = $request->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库

$temp_name    = "crop_temp_" . uniqid();
$temp_path    = sys_get_temp_dir() . "/";
$output_filename = $temp_path . $temp_name;
$what      = getimagesize($imgUrl);
// 创建画布并载入图像
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('不支持的图片类型');
}
if (!is_writable(dirname($output_filename))) {
  throw new \Exception('文件无法写入');
}
// 创建一幅真彩色的图像,从而支持更为丰富的色彩,gif文件不可使用
$resizedImage = imagecreatetruecolor($imgW, $imgH);
if ($type == '.png') {
  // 将黑色定义为透明色
  imagecolortransparent($resizedImage, imagecolorallocate($resizedImage, 0, 0, 0));
}
imagecopyresampled($resizedImage, $source_image, 0, 0, 0, 0, $imgW, $imgH, $imgInitW, $imgInitH);
// 旋转图像
$rotated_image = $angle ? imagerotate($resizedImage, -$angle, 0) : $resizedImage;
// 获取图像宽高
$rotated_width = imagesx($rotated_image);
$rotated_height = imagesy($rotated_image);
// 旋转后 - 缩放后
$dx = $rotated_width - $imgW;
$dy = $rotated_height - $imgH;
// 裁剪旋转后的图片到图像
$cropped_rotated_image = imagecreatetruecolor($imgW, $imgH);
if ($type == '.png') {
  // 设置黑色为透明
  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);
// 剪切图像到规定区域
$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, $imgX1, $imgY1, $cropW, $cropH, $cropW, $cropH);
// 最后输出图像到文件,就可以直接使用file_get_content('output_filename'.$type)获取图片了
imagepng($final_image, $output_filename . $type);
/**
 * 这里需要进行上传服务器操作
 */
echo json_encode([
  'status' => 'success',
  'url'  => $output_filename . $type,
]);
// 最后删除缓存图片
//unlink($output_filename . $type);

JS各种配置

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: '加??D片',
    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('您是要使用原图还是清除图片?\n\r[确认]使用原图,[取消]清除图片');
      if (res) {
        $('#image_input').val(crop_image_src);
        $('#cropContainerEyecandy').prepend('<img class="croppedImg" src=' + crop_image_src + ' width="100%">');
      } else {
        $('#image_input').val('');
        $('.croppedImg').remove();
      }
    },
    onReset: function () {
      var res = confirm('您是要使用原图还是清除图片?\n\r[确认]使用原图,[取消]清除图片');
      if (res) {
        $('#image_input').val(crop_image_src);
        $('#cropContainerEyecandy').prepend('<img class="croppedImg" src=' + crop_image_src + ' width="100%">');
      } else {
        $('#image_input').val('');
      }
    },
    onError: function (errormessage) {
      alert('onError:' + errormessage)
    }
  };
  var cropperBox = new Croppic('cropContainerEyecandy', croppedOptions);

总结

以上所述是小编给大家介绍的php+croppic.js实现剪切上传图片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

PHP 相关文章推荐
腾讯QQ php程序员面试题目整理
Jun 08 PHP
基于递归实现的php树形菜单代码
Nov 19 PHP
PHP+MYSQL中文乱码问题
Jul 01 PHP
PHP实现GIF图片验证码
Nov 04 PHP
php用正则判断是否为数字的方法
Mar 25 PHP
Yii数据读取与跳转参数传递用法实例分析
Jul 12 PHP
PHP入门教程之表单与验证实例详解
Sep 11 PHP
PHP进程通信基础之信号
Feb 19 PHP
CentOS 上搭建 PHP7 开发测试环境
Feb 26 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
Aug 21 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
Mar 30 PHP
PHP实现简单的计算器
Aug 28 PHP
PHP设计模式之委托模式定义与用法简单示例
Aug 13 #PHP
PHP设计模式之建造者模式定义与用法简单示例
Aug 13 #PHP
PHP设计模式之装饰器模式定义与用法简单示例
Aug 13 #PHP
PHP实现的ID混淆算法类与用法示例
Aug 10 #PHP
PHP+ajax实现二级联动菜单功能示例
Aug 10 #PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
Aug 10 #PHP
PHP实现的服务器一致性hash分布算法示例
Aug 09 #PHP
You might like
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
pytorch标签转onehot形式实例
2020/01/02 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
软件工程师岗位职责
2013/11/16 职场文书
高二学生评语大全
2014/04/25 职场文书
青年标兵事迹材料
2014/08/16 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript