随笔-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发送这些裁剪参数，一切后台搞定。