最近需要实现裁剪图片上传,想起之前公司用到的一个插件,却不知道叫什么名字了。
在网上找了有些时间,最终找到了这个网站。
因为官网文档全部都是英文,所以看起来有些吃力,可以大概看懂80%,但是缺少详细的案例说明,所以真正配置起来还是非常懵逼。
如果完全按照官网文档的步骤,大概就是这样的
下载安装
官网提供两种下载方式,第一种类似于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 端使用 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'])) { ca 'image/png': $source_image = imagecreatefrompng($imgurl); $type = '.png'; break; ca 'image/jpeg': $source_image = imagecreatefromjpeg($imgurl); $type = '.jpeg'; break; ca '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, $im国家规定的产假gh, $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: '/d/file/titlepic/crop', modal: true, doublezoomcontrols: fal, enablemouscroll: 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%">'); } el { $('#image_input').val(''); $('.croppedimg').remove(); } }, onret: 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%">'); } el { $('#image_i2022高考英语nput').val(''); } }, onerror: function (errormessage) { alert('onerror:' + errormessage) } }; var cropperbox = new croppic('cropcontainereyecandy', croppedoptions);
总结
以上所述是www.887551.com给大家介绍的php+croppic.js实现剪切上传图片功能,希望对大家有所帮助
本文发布于:2023-04-06 17:16:22,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/db594849e9f97ab9702e189b1dc2e8b6.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:php+croppic.js实现剪切上传图片功能.doc
本文 PDF 下载地址:php+croppic.js实现剪切上传图片功能.pdf
留言与评论(共有 0 条评论) |