利用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复选框CHECKBOX全选,取消全选
Aug 30 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
用Javascript实现Sleep暂停功能代码
Sep 03 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 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
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
php模板函数 正则实现代码
2012/10/15 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
JavaScript类的写法
2016/09/17 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
python 实现单例模式的5种方法
2020/09/23 Python
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
中秋节礼品促销方案
2014/02/02 职场文书
经理助理岗位职责
2014/03/05 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
4s店活动策划方案
2014/08/25 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
介绍信范文
2015/01/31 职场文书
污水处理保证书
2015/05/09 职场文书
公司员工辞职信范文
2015/05/12 职场文书
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL