84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
后台需要图片编辑操作:旋转,打码,裁剪
左边是图片列表(服务器上的图片地址)
点击左边任意一张图片。右边区域显示(编辑区域)图片准备编辑
编辑操作:旋转,打码,裁剪
认证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>