利用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 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
用ADODB.Stream转换
Jan 22 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
jQuery each函数源码分析
May 25 Javascript
Jqprint实现页面打印
Jan 06 Javascript
js时间查询插件使用详解
Apr 07 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
vue vant中picker组件的使用
Nov 03 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
JavaScript日历实现代码
2010/09/12 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
使用Python抓取模板之家的CSS模板
2015/03/16 Python
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
python实现多线程网页下载器
2018/04/15 Python
python从子线程中获得返回值的方法
2019/01/30 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
Python持续监听文件变化代码实例
2020/07/22 Python
python装饰器代码深入讲解
2021/03/01 Python
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
常见的软件开发流程有哪些
2015/11/14 面试题
员工薪酬福利制度
2014/01/17 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
工程质量承诺书范文
2014/03/27 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
安全保证书怎么写
2015/02/28 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技