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

<div class="container">
<img src="" alt="" id="img1">
</div>

js：

<script src="http://mat1.gtimg.com/tech/css/huiyan/jquery.min.js"></script>
<script type="text/javascript">
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width=330;
canvas.height=440;
var img=new Image;//new一个img对象
img.src='img/img1.png';//此处只能用相对路径，绝对存在跨域问题
img.onload=function(){
ctx.drawImage(img,0,0,300,400);//要多少张图片合成drawImage多少个
var img2=new Image;
img2.src='img/img2.png';
img2.onload=function(){
ctx.drawImage(img2,250,350,30,40);
ctx.fillText("Hello World!",10,50);//fillText可以添加文字
var base64=canvas.toDataURL("image/jpeg");//toDataURL自带放回路径
$('#img1').attr('src',base64)
}
}
</script>

cropper

可以参考这一篇文章，很强：http://blog.csdn.net/qq727013465/article/details/51823231
这是一个裁剪图片的插件http://fengyuanchen.github.io/cropper/，配合jq一起使用即可，记住一定要用cropper最新版的，很多bug它都解决了
直接粘贴代码：
css:

<link rel="stylesheet" type="text/css" href="http://guangzhou.auto.qq.com/cropper/cropper.css"/>
<link rel="stylesheet" type="text/css" href="http://guangzhou.auto.qq.com/cropper/main.css"/>
<style type="text/css">
html,body{font-family: "微软雅黑";font-size: 14px;}
body,h1,h2,h3,h4,h5,div,span,p,ul,ol,dl,dt,dd,a,input,img,select{margin: 0;padding: 0;list-style: none;border: 0;font-weight: normal;outline: none;}
.container{width: 300px;height: 400px;margin: auto;background-color: gainsboro;}
#img{width:100%;height: auto;margin: auto;}
input{width: 100px;height: 40px;border: 1px solid red;}

html:

<input type="file" id="file" accept="image/*">
<div class="container">
<img src="" alt="" id="img">
</div>
<input type="submit" name="button" id="submit" value="裁剪"  /><input type="submit" name="submit1" id="submit1" value="合成" />
<div >
<img src="" id="img2" style="width: 300px;height: 400px;"/>
</div>
<div >
<img src="" id="bg"/>
</div>

js:

<script src="http://mat1.gtimg.com/tech/css/huiyan/jquery.min.js"></script>
<script src="http://guangzhou.auto.qq.com/cropper/cropper.js" type="text/javascript" charset="utf-8"></script>
<script src="http://guangzhou.auto.qq.com/cropper/main.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var $image =  $('.container > img');
$image.cropper({
aspectRatio: 3 / 4,
background:false,
movable:true,
cropBoxResizable :true,
});
$('#file').change(function(){
var file = this.files[0];
fileName = file.name;
var reader = new FileReader();
//reader回调，重新初始裁剪区
reader.onload = function(){
// 通过 reader.result 来访问生成的 DataURL
var url = reader.result;
//选择图片后重新初始裁剪区
$image.cropper('reset', true).cropper('replace', url);
};
reader.readAsDataURL(file);
});
$('#submit').click(function(){
var type = $image.attr('src').split(';')[0].split(':')[1];
var canVas = $image.cropper("getCroppedCanvas", {});
$('#img2').attr('src', canVas.toDataURL());
})
//这一块是合成图片和裁剪一起的代码
var canvas=document.createElement('canvas');
var ctx=canvas.getContext('2d')
canvas.width=300;
canvas.height=400;
$('#submit1').click(function(){
var img1=new Image;
img.src='img/bg.png'
img.onload=function(){
ctx.drawImage(img,0,0,300,400);
var img2=new Image;
img2.src=$('#img2').attr('src');
ctx.drawImage(img2,50,50,200,300);
ctx.fillText('合成图片成功',40,50)
var dase64 = canvas.toDataURL("image/jpeg");
$('#bg').attr('src',dase64)
}
})
</script>

其实这里还需要了解FileReader这个的用法，网上都有，可以参考这里：https://www.cnblogs.com/MrZouJian/p/5909263.html
然后还有就是Image这个对象。
（以上做得比较粗陋，时间紧急，还望多多包含）