• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

PHP admin 12个月前 (06-08) 11次浏览 未收录 0个评论
文章目录[隐藏]

回复内容:

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

具体可以参考cropperjs


    
    
    
    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%;
        }
    


    

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

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,懒得弄了


39MO , 版权所有丨如未注明 , 均为原创丨转载请注明原文链接:javascript – 前端图片处理:旋转,打码,裁剪
喜欢 (0)
[1353713598@qq.com]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址