cropper裁剪图片和canvas合成图片

裁剪合成图片之前，首先需要去了解canvas和cropper。

canvas

1、先创建一个节点：var c=ocument.createElement("canvas");  

2、给c创建一个绘画环境：var ctx = canvas.getContext("2d");

3、可以对其设置宽高：canvas.width=330；canvas.height=440（看自己要多大设置）；

4、可以借助canvas的drawImage开始画图：ctx.drawImage(img,0,0,300,400)，其中img是要画进来的图片路径，两个0分别是x和y轴起点，300与400是要画的图片的宽高；

4、如果画布要添加文字可以使用canvas的fillText：ctx.fillText('合成成功',10,20),其中10和20是距离x和y轴的距离；

5、通过canvas的toDataURL反回合成的图片路劲，canvas返回的路径本来就是base64的：var dase64 = canvas.toDataURL("image/jpeg"，0.1)，其中0.1是canvas压缩图片大小，看要可以不要

例子：html

js：

cropper

可以参考这一篇文章，很强：http://blog.csdn.net/qq727013465/article/details/51823231

这是一个裁剪图片的插件http://fengyuanchen.github.io/cropper/，配合jq一起使用即可，记住一定要用cropper最新版的，很多bug它都解决了

直接粘贴代码：

css: