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 相关文章推荐
PHP初学者头疼问题总结
Jul 08 PHP
在PHP中读取和写入WORD文档的代码
Apr 09 PHP
PHP面向对象概念
Nov 06 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
May 07 PHP
深入理解php的MySQL连接类
Jun 07 PHP
json的键名为数字时的调用方式(示例代码)
Nov 15 PHP
PHP数据库链接类(PDO+Access)实例分享
Dec 05 PHP
PHP 等比例缩放图片详解及实例代码
Sep 18 PHP
PHP中多线程的两个实现方法
Oct 14 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
Nov 17 PHP
Laravel实现ORM带条件搜索分页
Oct 24 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
Mar 26 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 Curl出现403错误的解决办法
2014/05/29 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
js打开windows上的可执行文件示例
2014/05/27 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
python字符串连接的N种方式总结
2014/09/17 Python
详解Python的Lambda函数与排序
2016/10/25 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
Python补齐字符串长度的实例
2018/11/15 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Django设置Postgresql的操作
2020/05/14 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
责任胜于能力演讲稿
2014/05/20 职场文书
工程部文员岗位职责
2015/02/04 职场文书
听证通知书
2015/04/24 职场文书
技能培训通讯稿
2015/07/18 职场文书
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
golang的文件创建及读写操作
2022/04/14 Golang