图片编辑器,包括在线图片上传，裁剪，旋转，水

包括图片上传，裁剪，缩放,旋转，水印（文字和图片）等操作，最终上传到服务器，先来看看效果吧：

首先html中需要先添加如下div,3个canvas分别表示主图，水印图片和水印文字画布，外面套一层遮罩层（为了方便鼠标拖动）。

<div style="width:600px; height:450px; overflow:auto;z-index:3;position:absolute;"> <div> <canvas id="canvas" width="400" height="400" style="border:2px solid gray;position:absolute;"></canvas> </div> <div id='imageCover' style="width:100px; height:100px;position:absolute;cursor:pointer;display:none;z-index:4;"> <canvas id="watermarkImageCanvas" width="100" height="100" style="position:absolute;"></canvas> </div> <div id='textCover' style="width:100px; height:30px;position:absolute;cursor:pointer;z-index:5;display:none"> <canvas id="watermarkTextCanvas" width="100" height="30" style="position:absolute;"></canvas> </div> </div>

div添加好了，接下来就是初始化和对图片的操作：
1.初始化操作，主图片画布，水印图片遮罩层，水印图片画布，水印文本遮罩层，水印文本画布

sinoImageEditModule.init({ canvasId:'canvas', imageCoverId:'imageCover', imageCanvasId:'watermarkImageCanvas', textCoverId:'textCover', textCanvasId:'watermarkTextCanvas', });

2.裁剪，鼠标选择一块矩形区域裁剪

sinoImageEditModule.imageCut();

3.旋转，设置旋转角度（正数顺时针旋转，负数逆时针旋转）

sinoImageEditModule.imageRotation(document.getElementById('inputRotation').value);

4.缩放，根据宽和高缩放图片

sinoImageEditModule.setSize(500,300);

5.水印图片，可以鼠标移动图片，设置图片透明度，图片路径，大小等

sinoImageEditModule.imageWatermark(src,opcity,left,top,width,height,callback);

6.水印文字，可以鼠标移动文字，设置文字内容，透明度，大小等

sinoImageEditModule.textWatermark(opcity,txt,font,style,left,top,width,height,textLeft,TextTop,callback);

7.保存到服务端,POST图片base64值到远程服务器，CORS跨域保存

sinoImageEditModule.saveImage('http://localhost:8055/Home/SaveImage',function(result) { if(result.State==1) alert('保存成功,文件名：'+result.FileName); else alert('保存失败'); });