84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
后台需要图片编辑操作:旋转,打码,裁剪
左边是图片列表(服务器上的图片地址)
点击左边任意一张图片。右边区域显示(编辑区域)图片准备编辑
编辑操作:旋转,打码,裁剪
认证0级讲师
旋转和剪裁之前做过,可以用canvas实现,打码没做过,但理论上也是可以通过canvas实现的。
具体可以参考cropperjs
<!DOCTYPE html><html>
<head> <meta charset="UTF-8"> <title></title> <style> body{ overflow-x: hidden; overflow-y: auto; } .img_box{ display: inline-block; width: 150px; height: 100%; padding: 0; margin: 0; list-style: none; float: left; } .img_box li{ display: block; width: 100%; height: 150px; } .img_box li img{ width: 100%; height: 100%; } .edit_box{ display: inline-block; padding-left: 150px; width: 1000px; height: 800px; float: left; } .edit_box img{ width: 100%; height: 100%; } </style> </head> <body> <p > <ul class="img_box"> <li><img src="../img/cof.jpg"></li> <li><img src="../img/cof1.jpg"></li> <li><img src="../img/cof2.jpg"></li> <li><img src="../img/cof3.jpg"></li> <li><img src="../img/cof4.jpg"></li> </ul> <p class="edit_box"> </p> </p> <p class="edit_btn"> <input type="button" id="rod" value="旋转"> <input type="button" id="dama" value="打码"/> <input type="button" id="caij" value="裁剪"/> </p> <script> var list=document.getElementsByClassName("img_box")[0]; var list_item=list.children; var e_box=document.getElementsByClassName("edit_box")[0]; var num=0; var rod=document.getElementById("rod"); var dama=document.getElementById("dama"); var caij=document.getElementById("caij"); for (var i=0,len=list_item.length;i<len;i++) { (function(i){ list_item[i].onclick=function(){ var iurl=this.children[0].src; creatdom(iurl); } })(i) } function creatdom(iurl){ e_box.innerHTML="<img src="+iurl+">"; } rod.onclick=function(){//旋转的方法 num++; e_box.style.cssText='transform: rotate('+90*num+'deg);'; } dama.onclick=function(){//我不明白你的打码是几个意思,我就做成了修改透明度了 num++; if(num<=10){ e_box.style.cssText="opacity: "+num*0.1+";"; }else{ e_box.style.cssText="opacity: 0.1;"; num=0; } } //caij的方法你可以去看看http://www.zhangxinxu.com/study/201005/image-crop-rotation-demo.html,懒得弄了 </script> </body>
</html>
旋转和剪裁之前做过,可以用canvas实现,打码没做过,但理论上也是可以通过canvas实现的。
具体可以参考cropperjs
<!DOCTYPE html>
<html>
</html>