javascript - Front-end image processing: rotation, coding, cropping-PHP Tutorial-php.cn

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

WBOY

Release： 2023-03-01 19:58:02

Original

1601 people have browsed it

Picture editing operations are required in the background: rotation, coding, cropping
On the left is the image list (image address on the server)
Click on any picture on the left. The right area displays (editing area) pictures ready for editing
Editing operations: rotate, code, crop

Reply content:

Picture editing operations are required in the background: rotation, coding, cropping
On the left is the image list (image address on the server)
Click on any picture on the left. The right area displays (editing area) pictures ready for editing
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><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>
    <div >
        <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>
        <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="+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></code>

Copy after login