随笔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的浏览器，只好上传裁剪区域坐标、图片缩放比，由后端裁剪。

判断代码

var temCanvas = document.createElement('canvas');
if (temCanvas .getContext && temCanvas .toDataURL){
        //you code for canvas
}else{
       //you code   
}

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

设置裁剪区域显示代码

　　　　　　var setClip = function() {
                var position = $dragHelp.position();
                var w = $dragHelp.width();
                var h = $dragHelp.height();
                $cutHelper.css({
                    clip: 'rect(' + position.top + 'px ' + (w + position.left) + 'px ' + (h + position.top) + 'px ' + position.left + 'px)'
                });
                Options.cuting.call($this.get(0),{
                    x: position.left - $this.position().left,
                    y: position.top - $this.position().top,
                    w: w,
                    h: h,
                    imgW: $this.width(),
                    imgH: $this.height(),
                    imgRealW: realSize[0],
                    imgRealH: realSize[1]
                });
            };

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