php+croppic.js实现剪切上传图片功能
最近需要实现裁剪图片上传，想起之前公司用到的一个插件，却不知道叫什么名字了。
在网上找了有些时间，最终找到了这个网站。
因为官网文档全部都是英文，所以看起来有些吃力，可以大概看懂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'])) {
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实现剪切上传图片功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明 需要使用jQuery库文件 和AjaxFileUpload库文件 使用实例 一,包含文件部分 复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <scr
-
JavaScript代码实现txt文件的上传预览功能
今天做项目刚好碰到这个记录一下.因为是简单的txt文件,只涉及文本,如果需要涉及图片预览就需要使用papaparse和jschardet,此处不多叙述. 表单按钮使用js的onchange="uploadfile()" 事件,function函数代码如下所示: //此处为txt文件上传预览的js代码 function uploadfile(){ var file=$("#txt")[0].files[0]; //判断上传文件是不是txt格式,判断后缀是不是.txt
-
vue.js 图片上传并预览及图片更换功能的实现代码
这里讲解是图片上传和图片预览.主要是围绕我们常用功能的列子做讲解 ,并且没有格外引入其他js 所以你复制过去做简单修改便可以看到效果 效果图: 样式以及效果图一并展示 1.HTML <div class="rz-picter"> <img :src="avatar" class="img-avatar"> <input type="file" name="avatar" id=
-
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
本文实例为大家分享了Vue2.0实现调用摄像头进行拍照功能的具体代码,以及图片上传功能引用exif.js,供大家参考,具体内容如下 可以在github 上下载demo链接 vue组件代码 <template> <div> <div style="padding:20px;"> <div class="show"> <div class="picture" :style="'backg
-
Servlet+Jsp实现图片或文件的上传功能具体思路及代码
现在不管是博客论坛还是企业办公,都离不开资源的共享.通过文件上传的方式,与大家同分享,从而达到大众间广泛的沟通和交流,我们既可以从中获得更多的知识和经验,也能通过他人的反馈达到自我改进和提升的目的. 下面我就为大家介绍 web项目中的这一上传功能,那么文件是如何从本地发送到服务器的呢?看我慢慢道来: 首先,我们创建一个新的web工程,在工程的WebRoot目录下新建一个upload文件夹,这样当我们将该工程部署到服务器上时,服务器便也生成个upload文件夹,用来存放上传的资源. 然后,在Web
-
js 实现 input type="file" 文件上传示例代码
在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type="file" />隐藏,点其他的标签(图片等)来时实现选择文件上传功能. 看代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he
-
vue.js图片转Base64上传图片并预览的实现方法
对于前端人员来说,图片处理是一个很常见的需求,由于图片稍微特殊,现在多数做法都是使用调用ajax接口通过http方法来提交,例如post方法提交,后台处理后返回一个图片路径给前端,前端根据这个路径写入img标签,但是基于当前的前后端分离的开发模式下,前后端代码往往不在同一个系统目录下,而且部署时可能liunx路径与windows路径不一样,这样后期路径更改可能会导致维护困难问题出现. 针对这种问题,这里我推荐使用图片转base64格式,再发给后端,后端只需将转码结果存入数据库即可,前端调用接口直
-
原生JS和jQuery版实现文件上传功能
本文实例分享了原生JS版和jQuery 版实现文件上传功能的例子,供大家参考,具体内容如下 <!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <title>HTML5 Ajax Uploader</title> <script src="jquery-2.1.1.min.js"></
-
JS+Struts2多文件上传实例详解
本文实例为大家分享了JS Struts2多文件上传的具体代码,供大家参考,具体内容如下 1.JSP页面: JS控制增加删除多个上传文件框,代码如下: <%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <!DOCTYPE html PUBLIC "-//W3C
-
JS实现图片上传多次上传同一张不生效的处理方法
在做图片上传的功能时, 使用删除功能删除了一张图片, 然后想重新上传原来删除的图片, 结果预览不显示, 也不能上传成功 解决办法, 在删除方法里置空input $("#id").find('input').val(''); 拿到input所在的位置, 找到这个input, 然后置空 还有一种方法是来回切换input的属性 每次删除图片后, 改变input的type属性 先变成text, 删除完成后变回file, 方便删除后能继续上传 $("#inputId").at
-
上传图片预览JS脚本 Input file图片预览的实现示例
在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预览的功能,还被我给翻了出来,在这里做个记录,方便自己以后用,也方便其他需要的朋友! 代码很简单,如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
-
简单实现js上传文件功能
本文实例为大家分享了js实现上传文件功能的具体代码,供大家参考,具体内容如下 一.用input完成上传,效果图如 选择文件后,提交后出现图片url 二.传输格式采用form-data形式. html代码 <form id="upload" enctype="multipart/form-data" method="post"> <input type="file" name="file"
-
Javascript图片上传前的本地预览实例
图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子. 原理: 分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL):把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.URL.createObjectURL()方法. Fil
-
SpringBoot+Vue.js实现前后端分离的文件上传功能
这篇文章需要一定Vue和SpringBoot的知识,分为两个项目,一个是前端Vue项目,一个是后端SpringBoot项目. 后端项目搭建 我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一个SpringBoot项目,一直点next即可 项目创建成功后,maven的pom配置如下 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> &l
-
JS实现上传图片的三种方法并实现预览图片功能
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持). 以下是实现上述思路的方法: 1. 模板文件 <!DOCTYPE html> <html l
-
js实现文件上传功能 后台使用MultipartFile
本文为大家分享了js实现文件上传功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <script type="text/javascript"> //图片上传 var xhr; //上传文件方法 function Upl
-
JS和Canvas实现图片的预览压缩和上传功能
先来一张效果图,压压惊 第一步:用户选择需要上传的图片 <input type="file" accept="image/*" type="file"" name="imageFile" onchange="upload()"> 在选定了图片后 upload 函数将被触发,我们需要在这个函数中,获取到图片的资源,将它压缩并利用canvas绘制出来,若需要上传到服务器,也可以利用ajax
-
原生JS实现前端本地文件上传
本文实例为大家分享了JS实现前端本地文件上传的具体代码,供大家参考,具体内容如下 通过input type = file来选择本地文件 <div> <form> <input type="file" id="file-input" name="fileContent"> </form> </div> var fileInput = document.querySelector('#fil
-
js实现上传图片预览的方法
本文实例讲述了js实现上传图片预览的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: function PreviewImage(imgFile) { var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length); filextension=filextension.toLowerCase(); if ((filext
-
js实现图片上传并正常显示
项目经常会用到头像上传,那么怎么实现呢? 首先是HTML布局: <label for="thumbnail" class="col-md-3 control-label">缩略图</label> <div class="col-md-6"> <input type="file" class="form-control" id="thumbnail"
-
JavaScript实现异步图像上传功能
当向服务器上传图像时,根据服务器操作的复杂性和服务器性能,需要几秒钟到几分钟的时间来完成.本文的重点是在图像上传至服务器时使用JavaScript立即显示图像. 介绍 当使用JavaScript将图像上传到服务器时,根据服务器操作的复杂性,可能需要几秒到几分钟来完成操作.在某些情况下,即使图像上传成功,也需要花费更多的时间,这取决于服务器对图像进行额外处理的能力. 本文展示了一种使用代码示例立即显示图像的方法(使用图像的Base64编码版本),同时将其上载到服务器,而无需等待操作完成.这种方法的
-
js实现图片上传并预览功能
本文为大家分享了js实现图片上传并预览的具体代码,供大家参考,具体内容如下 思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个<img/>标签,在图片上传之后,用新图片的src替换原来<img/>标签中的src. 如下图所示,是原始的按钮样式: 美化步骤: (1)将上传图片标签采用绝对定位,使之位于一个图片,按钮,div等标签上.或者给图片,按钮或div设置绝对定位,总之,是要让上传文件按钮和用户指定的按钮重合. (2)给上传图片标签设置大大小,使之和与它重叠的图片,按钮
-
JS中使用FormData上传文件、图片的方法
关于FormData XMLHttpRequest Level 2添加了一个新的接口 ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用F
-
node.js自动上传ftp的脚本分享
起因 刚加入一个小组的项目开发,开发环境是基于node环境,通过webpack打包构建代码,然后上传sftp,在浏览器测试.这种开发模式无可厚非,但是每次修改源代码,然后build,然后upload,不胜其烦.之前项目中有过 gulp-sftp任务脚本,然而并不是生效.于是自力更生,另谋他法,搞一个自动上传sftp的服务脚本. 设想 因为基于webpack,所以直接启动webpack编译的watch监听即可,在watch回调里执行stfp的上传,上传去npm社区找一个sftp的客户端插件 实现
-
分享5个好用的javascript文件上传插件
文件上传是我们开发网站程序时经常遇到的功能,选择一个功能强大,使用简单的上传插件可以节省我们很多开发时间,下面就为大家介绍5个不错的javascript文件上传插件 这篇文章的资源均来自https://dcrazed.com/html5-jquery-file-upload-scripts/ .我选择了其中自己觉得可用性比较强的几个. Mini AJAX File Upload Form 这个插件的UI和体验都非常棒,不过它依赖于下面介绍的jQuery File Upload plugin. 特
-
JavaScript使用享元模式实现文件上传优化操作示例
本文实例讲述了JavaScript使用享元模式实现文件上传优化操作.分享给大家供大家参考,具体如下: 一.享元模式是一种用于性能优化的模式,主要优化方式为,若系统中因为创建了大量类似的对象而导致内存占用过高,则可以考虑使用享元模式实现. 二.实例说明: 如果在浏览器中上传文件,若使用常规写法, 每上传一个文件,就会创建一个实例对象:如果上传2000个文件,那就有2000个对象,浏览器很可能出现假死状态.这种情况下,我们考虑适应享元模式. 三.实例: var Upload = function(
-
JS实现的文件拖拽上传功能示例
本文实例讲述了JS实现的文件拖拽上传功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS文件拖拽上传</title> <style> div{ width: 300px; height: 300px; border:1px dashed #000; position:
-
js实现上传图片之上传前预览图片
上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出来了.功能很简单,却很实用. 预览图片的js代码: 复制代码 代码如下: <script type="text/javascript"> function setImagePreview(docObj,localImagId,imgObjPreview) { if(docObj
-
JS实现可视化文件上传
本文实例为大家分享了JS可视化文件上传的具体代码,供大家参考,具体内容如下 测试-Style <style type="text/css"> .imgbox,.imgbox1 { position: relative; width: 200px; height: 180px; border: 1px solid #ddd; overflow: hidden; } .imgnum{ left: 0px; top: 0px; margin: 0px; padding: 0px;
-
JS简单实现文件上传实例代码（无需插件）
复制代码 代码如下: <span class="up-btn" id="selectFile">请选择文件</span><input type="file" name="fileupload" style="FILTER: alpha(opacity=0); moz-opacity: 0; opacity: 0;" /> // 点击#selectFile触发input:f
-
微信JSSDK上传图片
前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用.先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给uploadImage接口上传图片. 最近做的一个项目,刚好用到了JSSDK,把用到的东西整理下. 先附上微信开发者文档链接:微信开发者文档 主要用到了: 引入JS文件 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq
-
学习使用AngularJS文件上传控件
前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用...但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法.好东
-
Angularjs实现多图片上传预览功能
最近要实现一个多图片上传的预览功能,网上有很多例子大多不太完整,我就把他们的整合了下并且加了一些功能和界面,我们只需要调用一条指令就可以实现,但传给后台还需要额外的代码,会在后面controller里介绍.不知道封装的是否符合标准,还希望大家一起讨论下,如果有时间封装下Angular4的图片上传和预览分享给大家. 图片上传的预览,我们最主要解决的是拿到input的on-change事件,再是读取图片,读取图片我们需要用到FileReader. 我们先写一个读取图片的服务,这是网上的一位大佬写的,
-
客户端js判断文件类型和文件大小即限制上传大小
由于项目需要!需要脚本在客户端判断大小和文件类型!自己网上找资料找的好辛苦!索性自己写了一个并测试 文件上传大小限制的一个例子,兼容ie6,ie7,ie8 ,Google Chrome,ff等浏览器 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="
-
js获取上传文件的绝对路径实现方法
在html中 <input type="file" id="importFile" /> <input type="button" onclick="upload()"/> <script> function upload() { var filename = document.getElementById("importFile").value; // 这时的filen
-
JS文件上传神器bootstrap fileinput详解
Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一段调用方发和servlet端的接收代码,未完待续. 引言: 一个强化的HTML5 文件输入插件,适用于Bootstrap 3.x.本插件对多种类型的文件提供文件预览,并且提供了多选等功能.本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap CSS3样式.通过