欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-12 22:47:58
最近需要实现裁剪图片上传,想起之前公司用到的一个插件,却不知道叫什么名字了。 在网上找了有些时间,最终找到了这个网站。 因为官网文档全部都是英文,所以看起来有些吃力...

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

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

因为官网文档全部都是英文,所以看起来有些吃力,可以大概看懂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: '加載圖片',
    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实现剪切上传图片功能,希望对大家有所帮助