cropper裁剪图片和canvas合成图片

xiaoxiao2021-02-28  14

裁剪合成图片之前,首先需要去了解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.οnlοad=function(){ ctx.drawImage(img,0,0,300,400);//要多少张图片合成drawImage多少个 var img2=new Image; img2.src='img/img2.png'; img2.οnlοad=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.οnlοad=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这个对象。 (以上做得比较粗陋,时间紧急,还望多多包含)

转载请注明原文地址: https://www.6miu.com/read-1950205.html

最新回复(0)