利用Javascript裁剪图片并存储的简单实现
程序员文章站
2022-06-02 14:44:22
前言
就我而言,页面上的设计比较灵动的部分,其实不是很多,诸如滑动验证码,图片裁剪等比较好的交互设计。
从刚开始工作的时候,我就想把这些东西了解下,无奈一直没这个需求,...
前言
就我而言,页面上的设计比较灵动的部分,其实不是很多,诸如滑动验证码,图片裁剪等比较好的交互设计。
从刚开始工作的时候,我就想把这些东西了解下,无奈一直没这个需求,乘着今天的空闲,研究了一下午,期间遇到了大大小小的问题,一直备受折磨,这其实也反映一个问题,我的
还是比较薄弱。
实现效果:
用户点击上传图片后,页面显示所上传的图片,并且出现裁剪框和两个预览区域,最后点击裁剪按钮保存裁剪的图片到服务器上。
效果很简单,整个过程我遇到的两个难点,第一个是裁剪的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能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。