随笔-javascript/html5裁剪初试

裁剪，首先要有drag、resize，来定义裁剪区，显示上面 裁剪掉的部分显示阴影，可以使用css属性clip，属性值这个样子写，就兼容了所有的浏览器：clip:rect('1px 30px 30px 1px')

考虑到后端裁剪图片的效率（jsp后天，裁剪、编辑图片灰常慢，原因未知），做了个判断，支持html5的canvas和toDataUrl() 则上传DataUrl()数据，因为裁剪后最大尺寸只有130×130，所以数据量很小。DataUrl数据要去掉最初的“data:image/gif;base64,”字符，不支持html5的浏览器，只好上传裁剪区域坐标、图片缩放比，由后端裁剪。

判断代码

1 var temCanvas = document.createElement('canvas');
2 if (temCanvas .getContext && temCanvas .toDataURL){
3         //you code for canvas
4 }else{
5        //you code   
6 }

drag和resize的同时会setClip，更新显示，setClip中调用传过来的cuting方法，可以实时预览裁剪部分。

设置裁剪区域显示代码

 1 　　　　　　var setClip = function() {
 2                 var position = $dragHelp.position();
 3                 var w = $dragHelp.width();
 4                 var h = $dragHelp.height();
 5                 $cutHelper.css({
 6                     clip: 'rect(' + position.top + 'px ' + (w + position.left) + 'px ' + (h + position.top) + 'px ' + position.left + 'px)'
 7                 });
 8                 Options.cuting.call($this.get(0),{
 9                     x: position.left - $this.position().left,
10                     y: position.top - $this.position().top,
11                     w: w,
12                     h: h,
13                     imgW: $this.width(),
14                     imgH: $this.height(),
15                     imgRealW: realSize[0],
16                     imgRealH: realSize[1]
17                 });
18             };

取到UrlData，需要使用drawImage，三种类型参数最多的那个（裁剪写入图片），如需更多尺寸即可写入刚创建的canvas,即 canvas.getContext('2d').drawImage(canvas_130,0,0,48,48);  //得到48×48的canvas

分别canvas.toDataURL("image/png").substring(22)，即得到完整的base64编码的DataUrl数据，ajax上传吧~

 

不支持html5就用ajax发送这些裁剪参数，一切后台搞定。

posted @ 2013-05-16 10:51  henry_li  阅读(313)  评论(0)  编辑  收藏  举报