javascript - 前端图片处理:旋转,打码,裁剪

php中文网
发布: 2016-12-01 00:26:02
原创
1796人浏览过

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

    立即学习Java免费学习笔记(深入)”;

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

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

  4. 编辑操作:旋转,打码,裁剪
    javascript - 前端图片处理:旋转,打码,裁剪

回复内容:

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

    立即学习Java免费学习笔记(深入)”;

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

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

  4. 编辑操作:旋转,打码,裁剪
    javascript - 前端图片处理:旋转,打码,裁剪

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

具体可以参考cropperjs


<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>@@##@@</li>
            <li>@@##@@</li>
            <li>@@##@@</li>
            <li>@@##@@</li>
            <li>@@##@@</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="@@##@@";
        }
        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>
登录后复制

javascript - 前端图片处理:旋转,打码,裁剪javascript - 前端图片处理:旋转,打码,裁剪javascript - 前端图片处理:旋转,打码,裁剪javascript - 前端图片处理:旋转,打码,裁剪javascript - 前端图片处理:旋转,打码,裁剪javascript - 前端图片处理:旋转,打码,裁剪
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
相关标签:
css
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号