利用Javascript裁剪图片并存储的简单实现


Posted in Javascript onMarch 13, 2017

前言

就我而言,页面上的设计比较灵动的部分,其实不是很多,诸如滑动验证码,图片裁剪等比较好的交互设计。

从刚开始工作的时候,我就想把这些东西了解下,无奈一直没这个需求,乘着今天的空闲,研究了一下午,期间遇到了大大小小的问题,一直备受折磨,这其实也反映一个问题,我的

还是比较薄弱。

实现效果:

用户点击上传图片后,页面显示所上传的图片,并且出现裁剪框和两个预览区域,最后点击裁剪按钮保存裁剪的图片到服务器上。 

效果很简单,整个过程我遇到的两个难点,第一个是裁剪的JS效果,第二个则是图片数据的处理。 

对于第一个问题,我引用了网上的一个插件,就我感觉来说,裁剪过程用户的满意度只能算一般,因为它只能裁剪正方形区域,就算边框上有八个拉动设置,但是拉动框时还是按正方形缩放,就这点不太让我满意。

实现方法如下: 

以下是简单的页面设计:

<div style="float:left;"><img id="target"></div>
<div style="width:48px;height:48px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview" ></div>
<div style="width:190px;height:195px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview2" ></div>
<form action="{:U('/test/crop_deal')}" method="post" onsubmit="return checkCoords()" enctype="multipart/form-data" id="form">
<input type="file" name="file" onchange="change_image(this)">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="submit" value="裁剪"/>
</form>

下面是JS代码:

function change_image(file){
var reader = new FileReader();
reader.onload = function(evt){
$("#target").attr('src',evt.target.result);
$('#preview').attr('src',evt.target.result);
$('#preview2').attr('src',evt.target.result);
// $('#target').css({"height":"600px","width":"600px"});
// 限制了大小会影响到截图的效果
};
reader.readAsDataURL(file.files[0]);

var jcrop_api, boundx, boundy;

setTimeout(function(){


$('#target').Jcrop({
minSize: [48,48],
setSelect: [0,0,190,190],
onChange: updatePreview,
onSelect: updatePreview,
onSelect: updateCoords,
aspectRatio: 1
},
function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});

function updatePreview(c){
if (parseInt(c.w) > 0)
{
var rx = 48 / c.w; //小头像预览Div的大小
var ry = 48 / c.h;

$('#preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
{
var rx = 199 / c.w; //大头像预览Div的大小
var ry = 199 / c.h;
$('#preview2').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};


function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};

},500);

}

这里稍作两点提醒:

其一:不要忘记在页面头部引入插件:

<script src="/plug/js/jquery.min.js" type="text/javascript"></script>

<script src="/plug/js/jquery.Jcrop.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="/plug/css/Jcrop.css" rel="external nofollow" type="text/css" />

其二:有些人眼尖的话可能看到了JS里有个定时,同时心理是不是很疑惑这不是有点多此一举吗?其实不是,上传图片到JS加载到页面上,是需要时间的,这个定时的意义在于

等到图片被JS加载到页面上时才去加载裁剪效果,这里也是反复实验后得出的做法。 

后端PHP处理我用的是THINKPHP框架,版本是3.1.3

贴上代码:

function crop_deal(){
ob_clean();

import ( 'ORG.Net.UploadFile' );

$upload = new UploadFile ();

$upload->maxSize = 2000000;

$upload->allowExts = array (


'jpg',


'gif',


'png',


'jpeg'

);

$upload->savePath = './upload/test/';

$upload->autoSub = true;

$upload->subType = 'date';

$upload->dateFormat = 'Ymd';

if ($upload->upload () ) {


$info = $upload->getUploadFileInfo();


$new_path = "./upload/test/thumb".date('Ymd');


$file_store = $new_path."/".date('YmdHis').".jpg";


if(!file_exists($new_path)){



mkdir($new_path,0777,true);


}


$source_path = "http://".$_SERVER['HTTP_HOST']."/upload/test/".$info[0]['savename'];


$img_size = getimagesize($source_path);


$width = $img_size[0];


$height = $img_size[1];



$mime = $img_size['mime'];


$srcImg = imagecreatefromstring(file_get_contents($source_path));


$cropped_img = imagecreatetruecolor($_POST['w'], $_POST['h']);


//缩放


// imagecopyresampled($cropped_img,$srcImg,0,0,$_POST['x'],$_POST['y'],$_POST['w'],$_POST['h'],$width,$height);


//裁剪


imagecopy($cropped_img,$srcImg,0,0,$_POST['x'],$_POST['y'],$_POST['w'],$_POST['h']);


header("Content-Type:image/jpeg");


imagejpeg($cropped_img,$file_store);


imagedestroy($srcImg);


imagedestroy($cropped_img);

}

}

这里就是调用GD库里创建图像的一系列方法,最重要就是imagecopy() ,它是将原图按规定的裁剪位置,裁剪大小复制到新的图片上去,这也说明了一件事,页面用户在裁剪图片

的时候其实前端并没有对图片操作,而是得到裁剪时的坐标位置,裁剪大小,然后提交到PHP操作!!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者使用Swift能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
详解vue项目首页加载速度优化
Oct 18 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
个人小程序接入支付解决方案
May 23 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
js实现手机发送验证码功能
Mar 13 #Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 #Javascript
原生js实现吸顶效果
Mar 13 #Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 #Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 #Javascript
深入理解Node.js中的进程管理
Mar 13 #Javascript
jQuery简易时光轴实现方法示例
Mar 13 #Javascript
You might like
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
PHP 字符串 小常识
2009/06/05 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
python中argparse模块用法实例详解
2015/06/03 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
python统计文章中单词出现次数实例
2020/02/27 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
应用数学专业求职信
2014/03/14 职场文书
租房协议书怎么写
2014/04/10 职场文书
大学生见习报告范文
2014/11/03 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
学校安全管理制度
2015/08/06 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android