Heim >Backend-Entwicklung >PHP-Tutorial >Javascript – Front-End-Bildverarbeitung: Drehung, Codierung, Zuschneiden

Javascript – Front-End-Bildverarbeitung: Drehung, Codierung, Zuschneiden

WBOYOriginal: 2016-12-01 00:26:021628Durchsuche

Backend erfordert Bildbearbeitungsvorgänge: Drehung, Codierung, Zuschneiden
Links befindet sich die Bilderliste (Bildadresse auf dem Server)
Klicken Sie links auf ein beliebiges Bild. Im rechten Bereich werden (Bearbeitungsbereich) Bilder angezeigt, die zur Bearbeitung bereit sind
Bearbeitungsvorgänge: Drehen, Codieren, Zuschneiden

Antwortinhalt:

Backend erfordert Bildbearbeitungsvorgänge: Drehung, Codierung, Zuschneiden
Links befindet sich die Bilderliste (Bildadresse auf dem Server)
Klicken Sie links auf ein beliebiges Bild. Im rechten Bereich werden (Bearbeitungsbereich) Bilder angezeigt, die zur Bearbeitung bereit sind
Bearbeitungsvorgänge: Drehen, Codieren, Zuschneiden

Rotation und Zuschneiden wurden bereits durchgeführt und können mithilfe von Canvas implementiert werden. Codierung wurde bisher noch nicht durchgeführt, kann aber theoretisch auch mithilfe von Canvas erreicht werden.

Weitere Informationen finden Sie unter 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>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Warum kann die Funktion now() die Uhrzeit nicht anzeigen?Nächster Artikel：Warum kann die Funktion now() die Uhrzeit nicht anzeigen?

In Verbindung stehende Artikel

Mehr sehen