javascript - 前端图片处理：旋转，打码，裁剪

1. 后台需要图片编辑操作：旋转，打码，裁剪

2. 左边是图片列表（服务器上的图片地址）

3. 点击左边任意一张图片。右边区域显示（编辑区域）图片准备编辑

4. 编辑操作：旋转，打码，裁剪
   

回复内容：

1. 后台需要图片编辑操作：旋转，打码，裁剪

2. 左边是图片列表（服务器上的图片地址）

3. 点击左边任意一张图片。右边区域显示（编辑区域）图片准备编辑

4. 编辑操作：旋转，打码，裁剪
   

旋转和剪裁之前做过，可以用canvas实现，打码没做过，但理论上也是可以通过canvas实现的。

具体可以参考cropperjs

<code>
    <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>


    <div>
        <ul class="img_box">
            <li><img  src="/static/imghw/default1.png" data-src="../img/cof.jpg" class="lazy" alt="javascript - 前端图片处理：旋转，打码，裁剪" ></li>
            <li><img  src="/static/imghw/default1.png" data-src="../img/cof1.jpg" class="lazy" alt="javascript - 前端图片处理：旋转，打码，裁剪" ></li>
            <li><img  src="/static/imghw/default1.png" data-src="../img/cof2.jpg" class="lazy" alt="javascript - 前端图片处理：旋转，打码，裁剪" ></li>
            <li><img  src="/static/imghw/default1.png" data-src="../img/cof3.jpg" class="lazy" alt="javascript - 前端图片处理：旋转，打码，裁剪" ></li>
            <li><img  src="/static/imghw/default1.png" data-src="../img/cof4.jpg" class="lazy" alt="javascript - 前端图片处理：旋转，打码，裁剪" ></li>
        </ul>
        <div class="edit_box">
        
        </div>
    </div>
    <div class="edit_btn">
        <input type="button" id="rod" value="旋转">
        <input type="button" id="dama" value="打码">
        <input type="button" id="caij" value="裁剪">
    </div>
    <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="/static/imghw/default1.png"  data-src="+iurl+"  class="lazy" alt="javascript - 前端图片处理：旋转，打码，裁剪" >";
        }
        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>
</code>