裁剪合成图片之前,首先需要去了解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=&