javascript - 프런트엔드 이미지 처리: 회전, 코딩, 자르기
- WBOY원래의
- 2016-12-01 00:26:021629검색
백엔드에는 회전, 코딩, 자르기 등 이미지 편집 작업이 필요합니다
왼쪽은 이미지 목록(서버에 있는 이미지 주소)
왼쪽 사진을 클릭하세요. 오른쪽 영역에는 편집 가능한 사진이 표시됩니다(편집 영역)
편집 작업: 회전, 코드, 자르기
답글 내용:
백엔드에는 회전, 코딩, 자르기 등 이미지 편집 작업이 필요합니다
왼쪽은 이미지 목록(서버에 있는 이미지 주소)
왼쪽 사진을 클릭하세요. 오른쪽 영역에는 편집 가능한 사진이 표시됩니다(편집 영역)
편집 작업: 회전, 코드, 자르기
회전과 자르기는 이전에 수행되었으며 캔버스를 사용하여 구현할 수 있습니다. 코딩은 이전에 수행되지 않았지만 이론적으로는 캔버스를 통해서도 구현할 수 있습니다.
자세한 내용은 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>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.