利用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 相关文章推荐
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
js 自动播放的实例代码
Nov 19 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
Underscore源码分析
Dec 30 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
微信小程序实现时间进度条功能
Nov 17 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
PHP中几个常用的魔术常量
2012/02/23 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
文字幻灯片
2006/06/26 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
angularjs 的数据绑定实现原理
2018/07/02 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
Python  连接字符串(join %)
2008/09/06 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
Python模块 _winreg操作注册表
2020/02/05 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
椰子猫砂:CatSpot
2018/08/27 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
课程设计心得体会
2013/12/28 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python