js图片裁剪

最新推荐文章于 2024-06-15 21:04:06 发布

jeb222222

最新推荐文章于 2024-06-15 21:04:06 发布

阅读量683

点赞数

文章标签： h5 图片裁剪 js

本文链接：https://blog.csdn.net/jeb222222/article/details/80705871

版权

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
padding:0;
margin:0;
}
#cut{
opacity:0.6;
height:150px;
width:150px;
position:absolute;
top:100px;
left:150px;
cursor:pointer;
border:1px dotted red;

}
.box{
height:48.5%;
width:48.5%;
float:left;
background-color:#F0F0F0;
opacity:0.3;
}
.box-resize{
border:1px solid black;
width:4px;
height:4px;
position:absolute;
}
.box-top-left{
top:-3px;
left:-3px;
cursor:nw-resize;
}
.box-top-right{
top:-3px;
right:-3px;
cursor:ne-resize;
}
.box-left-center{
top:50%;
left:-3px;
cursor:w-resize;
}
.box-right-center{
top:50%;
right:-3px;
cursor:e-resize;
}
.box-bottom-left{
left:-3px;
bottom:-3px;
cursor:sw-resize;
}
.box-bottom-right{
right:-3px;
bottom:-3px;
cursor:se-resize;
}
.box-top-center{
left:50%;
top:-3px;
cursor:n-resize;
}
.box-bottom-center{
left:50%;
bottom:-3px;
cursor:s-resize;
}
</style>
</head>
<body>
<div>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid black;position:relative"></canvas><br/>
<div id="cut" draggable="true">
<div style="height:50%;width:100%;border-bottom:1px dotted red;position:absolute;top:2px;left:0;"></div>
<div style="height:100%;width:50%;border-right:1px dotted red;position:absolute;z-index:10;top:0;left:2px"></div>
<div class="box-resize box-top-left"></div>
<div class="box-resize box-top-right"></div>
<div class="box-resize box-left-center"></div>
<div class="box-resize box-right-center"></div>
<div class="box-resize box-bottom-left"></div>
<div class="box-resize box-bottom-right"></div>
<div class="box-resize box-top-center"></div>
<div class="box-resize box-bottom-center"></div>

</div>

</div>
<button οnclick="cutImage()">确定</button>
<canvas id="cutCanvas" width="200" height="120" style="border:1px solid black"></canvas><br/>
<img id="imgShow" src=""/>
<script>
var imgSrc="";
function draw(c){
var ctx=c.getContext("2d");
var img=new Image();
img.οnlοad=function(){
ctx.drawImage(img,0,0,500,300);
}
img.src="1.png";
imgSrc=img.src;
}

function cutImg(myCanvas,cutCanvas,top,left,width,height){
if(imgSrc==""){
alert("没有图片");
}
var img=new Image();
img.οnlοad=function(){
var canvasHeight=myCanvas.offsetHeight;
var canvasWidth=myCanvas.offsetWidth;
var ctxCut=cutCanvas.getContext("2d");
var imgHeight=img.height;
var imgWidth=img.width;
var heightPer=imgHeight/canvasHeight;
var widthPer=imgWidth/canvasWidth;
ctxCut.drawImage(img,left*widthPer,top*heightPer,width*widthPer,height*heightPer,0,0,200,120);
}
img.src=imgSrc;
//document.getElementById("imgShow").src=cutCanvas.toDataURL("image/png");//Chrome 本地文件跨域
//var imgData=myCanvas.getContext("2d").getImageData(left,top,width,height);//Chrome 本地文件跨域
//ctxCut.putImageData(imgData,0,0);//Chrome 本地文件跨域
}

function cutImage(){
var myCanvas=document.getElementById("myCanvas");
var cutCanvas=document.getElementById("cutCanvas");
var cutBox=document.getElementById("cut");
var top=cutBox.offsetTop;
var left=cutBox.offsetLeft;
var width=cutBox.offsetWidth;
var height=cutBox.offsetHeight;
cutImg(myCanvas,cutCanvas,top,left,width,height);
}
window.οnlοad=function(){
var resize=document.getElementsByClassName("box-resize");
var cut=document.getElementById("cut");
var canvas=document.getElementById("myCanvas");
draw(canvas);
var cutWidth=0;
var cutHeight=0;
var startX=0;
var startY=0;
var top=0;
var left=0;
var dir="";
var canvasTop=0;
var canvasLeft=0;
var canvasWidth=0;
var canvasHeight=0;
var canvasRight=0;
var canvasBottom=0;
for(var i=0;i<resize.length;i++){
resize[i].οnmοusedοwn=function(e){
startX=e.clientX;
startY=e.clientY;
cutWidth=cut.offsetWidth;
cutHeight=cut.offsetHeight;
top=cut.offsetTop;
left=cut.offsetLeft;
canvasTop=canvas.offsetTop;
canvasLeft=canvas.offsetLeft;
canvasBottom=canvasTop+canvas.offsetHeight;
canvasRight=canvasLeft+canvas.offsetWidth;
var className=this.className;
if(className.indexOf("box-right-center")>-1){
dir="E";
}
else if(className.indexOf("box-top-left")>-1){
dir="NW";
}
else if(className.indexOf("box-top-right")>-1){
dir="NE";
}
else if(className.indexOf("box-left-center")>-1){
dir="W";
}
else if(className.indexOf("box-bottom-left")>-1){
dir="SW";
}
else if(className.indexOf("box-bottom-right")>-1){
dir="SE";
}
else if(className.indexOf("box-bottom-center")>-1){
dir="S";
}
else if(className.indexOf("box-top-center")>-1){
dir="N";
}
document.addEventListener('mousemove',stretch);
e.preventDefault();
}
}


document.οnmοuseup=function(event){
dir="";
document.removeEventListener('mousemove',stretch);
event.preventDefault();
}

function stretch(e){
var width=e.clientX-startX;
var height=e.clientY-startY;
if(dir=="E"){
if(left+cutWidth+width<=canvasRight)
cut.style.width=cutWidth+width+"px";
}
else if(dir=="S"){
if(top+cutHeight+height<=canvasBottom)
cut.style.height=cutHeight+height+"px";
}
else if(dir=="N"){
if(height<cutHeight&&top+height>=canvasTop)
{
cut.style.height=cutHeight-height+"px";
cut.style.top=top+height+"px";
}
}
else if(dir=="W"){
if(width<cutWidth&&left+width>=canvasLeft){
cut.style.width=cutWidth-width+"px";
cut.style.left=left+width+"px";
}
}
else if(dir=="NW"){
if(width<cutWidth&&height<cutHeight){
if(left+width>=canvasLeft){
cut.style.width=cutWidth-width+"px";
cut.style.left=left+width+"px";
}
if(top+height>=canvasTop){
cut.style.height=cutHeight-height+"px";
cut.style.top=top+height+"px";
}

}
}
else if(dir=="NE"){
if(height<cutHeight){
if(left+cutWidth+width<=canvasRight){
cut.style.width=cutWidth+width+"px";
}
if(top+height>=canvasTop){
cut.style.height=cutHeight-height+"px";
cut.style.top=top+height+"px";
}
}
}
else if(dir=="SW"){
if(width<cutWidth){
if(left+width>=canvasLeft){
cut.style.width=cutWidth-width+"px";
cut.style.left=left+width+"px";
}
if(top+cutHeight+height<=canvasBottom){
cut.style.height=cutHeight+height+"px";
}
}
}
else if(dir=="SE"){
if(width<cutWidth){
if(left+cutWidth+width<=canvasRight){
cut.style.width=cutWidth+width+"px";
}
if(top+cutHeight+height<=canvasBottom){
cut.style.height=cutHeight+height+"px";
}
}
}
}

cut.οndragstart=function(e){
cutWidth=cut.offsetWidth;
cutHeight=cut.offsetHeight;
canvasTop=canvas.offsetTop;
canvasLeft=canvas.offsetLeft;
canvasWidth=canvas.offsetWidth;
canvasHeight=canvas.offsetHeight;
startX=e.clientX;
startY=e.clientY;
left=cut.offsetLeft;
top=cut.offsetTop;

}
cut.οndragοver=function(e){
var rightBorder=canvasLeft+canvasWidth;
var bottomBorder=canvasTop+canvasHeight;
var cutTop=top+e.clientY-startY;
var cutLeft=left+e.clientX-startX;
var cutRight=cutLeft+cutWidth;
var cutBottom=cutTop+cutHeight;
if(cutTop>=canvasTop&&cutBottom<=bottomBorder){
cut.style.top=cutTop+"px";
}
if(cutLeft>=canvasLeft&&cutRight<=rightBorder){
cut.style.left=cutLeft+"px";
}
e.preventDefault();
}


}

</script>
</body>
</html>

jeb222222

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js图片裁剪

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{ padding:0; margin:0; } #cut{ opacity:0.6; height:150px; width:150px; position:abso...
复制链接

扫一扫