<body>
-
后台需要图片编辑操作：旋转，打码，裁剪
-
左边是图片列表（服务器上的图片地址）
-
点击左边任意一张图片。右边区域显示（编辑区域）图片准备编辑
-
编辑操作：旋转，打码，裁剪
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20
回复内容：
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<body>
-
后台需要图片编辑操作：旋转，打码，裁剪
-
左边是图片列表（服务器上的图片地址）
-
点击左边任意一张图片。右边区域显示（编辑区域）图片准备编辑
-
编辑操作：旋转，打码，裁剪
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20
旋转和剪裁之前做过，可以用canvas实现，打码没做过，但理论上也是可以通过canvas实现的。
具体可以参考cropperjs
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20
%20%20%20%20<meta%20charset="UTF-8">%20%20%20%20%20%20%20%20<style>%20%20%20%20body{%20%20%20%20%20%20%20%20overflow-x:%20hidden;%20%20%20%20%20%20%20%20overflow-y:%20auto;%20%20%20%20}%20%20%20%20%20%20%20%20.img_box{%20%20%20%20%20%20%20%20%20%20%20%20display:%20inline-block;%20%20%20%20%20%20%20%20%20%20%20%20width:%20150px;%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%;%20%20%20%20%20%20%20%20%20%20%20%20padding:%200;%20%20%20%20%20%20%20%20%20%20%20%20margin:%200;%20%20%20%20%20%20%20%20%20%20%20%20list-style:%20none;%20%20%20%20%20%20%20%20%20%20%20%20float:%20left;%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20.img_box%20li{%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%;%20%20%20%20%20%20%20%20%20%20%20%20height:%20150px;%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20.img_box%20li%20img{%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%;%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%;%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20.edit_box{%20%20%20%20%20%20%20%20%20%20%20%20display:%20inline-block;%20%20%20%20%20%20%20%20%20%20%20%20padding-left:%20150px;%20%20%20%20%20%20%20%20%20%20%20%20width:%201000px;%20%20%20%20%20%20%20%20%20%20%20%20height:%20800px;%20%20%20%20%20%20%20%20%20%20%20%20float:%20left;%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20.edit_box%20img{%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%;%20%20%20%20%20%20%20%20%20%20%20%20height:%20100%;%20%20%20%20%20%20%20%20}%20%20%20%20</style><body>%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20
<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=""; } 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: *本文来@源gao@daima#com搞(%代@#码@网2搞代gaodaima码"+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>
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：javascript – 前端图片处理：旋转，打码，裁剪
