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这个对象。
(以上做得比较粗陋,时间紧急,还望多多包含)





猜你喜欢

转载自blog.csdn.net/Angular_/article/details/79231900