javascript - Front-end image processing: rotation, coding, cropping

1. Picture editing operations are required in the background: rotation, coding, cropping

2. On the left is the image list (image address on the server)

3. Click on any picture on the left. The right area displays (editing area) pictures ready for editing

4. Editing operations: rotate, code, crop
   

Reply content:

1. Picture editing operations are required in the background: rotation, coding, cropping

2. On the left is the image list (image address on the server)

3. Click on any picture on the left. The right area displays (editing area) pictures ready for editing

4. Editing operations: rotate, code, crop
   

Rotation and cropping have been done before and can be implemented using canvas. Coding has not been done before, but in theory it can be implemented through canvas.

For details, please refer to 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/imghwm/default1.png" data-src="../img/cof.jpg" class="lazy" alt="javascript - Front-end image processing: rotation, coding, cropping" ></li>
            <li><img  src="/static/imghwm/default1.png" data-src="../img/cof1.jpg" class="lazy" alt="javascript - Front-end image processing: rotation, coding, cropping" ></li>
            <li><img  src="/static/imghwm/default1.png" data-src="../img/cof2.jpg" class="lazy" alt="javascript - Front-end image processing: rotation, coding, cropping" ></li>
            <li><img  src="/static/imghwm/default1.png" data-src="../img/cof3.jpg" class="lazy" alt="javascript - Front-end image processing: rotation, coding, cropping" ></li>
            <li><img  src="/static/imghwm/default1.png" data-src="../img/cof4.jpg" class="lazy" alt="javascript - Front-end image processing: rotation, coding, cropping" ></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/imghwm/default1.png"  data-src="+iurl+"  class="lazy" alt="javascript - Front-end image processing: rotation, coding, cropping" >";
        }
        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>