js实现图片切割功能
更新时间：2021年09月01日 11:21:38 作者：KatyLight
这篇文章主要为大家详细介绍了js实现图片切割功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现图片切割的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cube{
height: 0;
width: 0;
position: absolute;
left: 0;
top:0;
box-sizing: border-box;
background-color: lightseagreen;
opacity: .3;
z-index: 99;pointer-events: none;
}
#big{
border: 1px solid black;
height: 500px;
width: 500px;
position: relative;
background-image: url("img/pixel.png");
line-height: 500px;
overflow: hidden;
vertical-align: middle;
text-align: center;
float: left;
}
#big>img{line-height: 500px; vertical-align: middle;
max-height: 100%;
max-width: 100%;
pointer-events: none;
}
.cv{
position: relative;
float: left; border: 2px solid lightseagreen;
}
</style>
<script>
let count=0;let c,b,d,p1,p2,cv,cx,img,p;
window.onload=function (){
c=document.querySelectorAll(".cube");
b=document.getElementById("big");
cv=document.getElementById("c");
cx=cv.getContext('2d');
img=new Image();
d=b.querySelector("img");
img.src=d.src;
img.onload=function(){
cx.drawImage(img, 0,0,500,500,0,0,500,500);
p=img.width/b.querySelector("img").width;
console.log(img);
}
p1={
x:0,
y:0
};
p2={
x:0,
y:0
};
b.addEventListener("click",function (e){
count++;
if(count===1){
p1.x=e .offsetX;
p1.y=e.offsetY;
p2.x=e .offsetX;
p2.y=e.offsetY;
f2();
f4();
}
if(count===2){
p2.x=e.offsetX;
p2.y=e.offsetY;
myDraw();
}
});
function f1(){
c[0].style.height=p2.y+"px";
c[1].style.height=p2.y+"px";
c[2].style.height=p2.y+"px";
c[3].style.top=p2.y+"px";
c[4].style.top=p2.y+"px";
c[3].style.height=(p1.y-p2.y)+"px";
c[4].style.height=(p1.y-p2.y)+"px";
c[5].style.top=p1.y+"px";
c[6].style.top=p1.y+"px";
c[5].style.height=(b.offsetHeight-p1.y)+"px";
c[6].style.height=b.offsetHeight-p1.y+"px";
c[7].style.top=p1.y+"px";
c[7].style.height=(b.offsetHeight-p1.y)+"px";
}
function f2(){
c[0].style.height=p1.y+"px";
c[1].style.height=p1.y+"px";
c[2].style.height=p1.y+"px";
c[3].style.top=p1.y+"px";
c[4].style.top=p1.y+"px";
c[3].style.height=(p2.y-p1.y)+"px";
c[4].style.height=(p2.y-p1.y)+"px";
c[5].style.top=p2.y+"px";
c[6].style.top=p2.y+"px";
c[5].style.height=(b.offsetHeight-p2.y)+"px";
c[6].style.height=b.offsetHeight-p2.y+"px";
c[7].style.top=p2.y+"px";
c[7].style.height=(b.offsetHeight-p2.y)+"px";
}
function f3(){
c[0].style.width=p2.x+"px";
c[1].style.left=p2.x+"px";
c[1].style.width=(p1.x-p2.x)+"px";
c[2].style.left=p1.x+"px";
c[2].style.width=(b.offsetWidth-p1.x)+"px";
c[3].style.width=p2.x+"px";
c[4].style.left=p1.x+"px";
c[4].style.width=(b.offsetWidth-p2.x)+"px";
c[5].style.width=p2.x+"px";
c[6].style.left=p2.x+"px";
c[6].style.width=(p1.x-p2.x)+"px";
c[7].style.left=p1.x+"px";
c[7].style.width=(b.offsetWidth-p1.x)+"px";
}
function f4(){
c[0].style.width=p1.x+"px";
c[1].style.left=p1.x+"px";
c[1].style.width=(p2.x-p1.x)+"px";
c[2].style.left=p2.x+"px";
c[2].style.width=(b.offsetWidth-p2.x)+"px";
c[3].style.width=p1.x+"px";
c[4].style.left=p2.x+"px";
c[4].style.width=(b.offsetWidth-p2.x)+"px";
c[5].style.width=p1.x+"px";
c[6].style.left=p1.x+"px";
c[6].style.width=(p2.x-p1.x)+"px";
c[7].style.left=p2.x+"px";
c[7].style.width=(b.offsetWidth-p2.x)+"px";
}
b.addEventListener("mousemove",function (e){
if(count===1){
p2.x=e.offsetX;
p2.y=e.offsetY;
if(p2.y<p1.y){
f1();
}else{
f2();
}
if(p2.x<p1.x){
f3();
}else{
f4();
}
}
})
}
function myDraw(){
cx.clearRect(0,0,500,500);
let w=p1.x-p2.x;
if(w<0){
w=-w;
}
w*=p;
let h=p1.y-p2.y;
if(h<0){
h=-h;
}
h*=p;
if(p1.x<p2.x){
p1.x=(p1.x-b.querySelector("img").offsetLeft)*p;
}else{
p1.x=(p2.x-b.querySelector("img").offsetLeft)*p;
}
if(p1.y<p2.y){
p1.y=(p1.y-b.querySelector("img").offsetTop)*p;
}else{
p1.y=(p2.y-b.querySelector("img").offsetTop)*p;
}
cx.drawImage(img,
p1.x,p1.y,
w,h,0,0,500,500);
p1.x=0;
p1.y=0;
p2.x=0;
p2.y=0;
}
</script>
</head>
<body >
<div
id="big">
<!-- 8个div覆盖-->
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<img src="img/katy2.jpg" alt=""/>
</div>
<div class="cv">
<canvas id="c" height="500" width="500">
</canvas>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaScript前端中的伪类元素before和after使用详解
before和after也算是css里面最常见的元素了，而我却一直不太了解，再不学一下就真的太不像话了。所以学习一下，需要的朋友们下面随着小编来一起学习吧2023-02-02
javascript 随机抽奖程序代码,主要是利用了js的Math.random方法。需要的朋友可以参考下。2009-11-11
flash导航条在网站建设中应用比较广泛，此种效果给浏览者带来极好的视觉效果，非常棒，下面小编给大家介绍基于JS实现导航条flash导航条，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-06-06
flash调用js中的方法,让js传递变量给flash的办法及思路
前几天发表了 将FlashVars写在JS函数中，实现与后台的实时变量更新，但是仅支持 IE，随后与 Luckyer 进行了交流，发现用 SetVariable 可以很方便的实现多浏览器兼容。举例如下。2013-08-08
这篇文章主要教大家如何在短短的20分钟内轻松创建自己的Bootstrap站点，学会使用twitter bootstrap建立一个站点，从而巩固Bootstrap一系列基础知识，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要介绍了微信小程序视图template模板引用的实例详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-09-09
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
这篇文章主要介绍了微信小程序非swiper组件实现的自定义伪3D轮播图效果,涉及微信小程序事件响应及元素属性动态操作实现轮播图效果相关技巧与注意事项,需要的朋友可以参考下2018-12-12
使用Javascript和DOM Interfaces来处理HTML
使用Javascript和DOM Interfaces来处理HTML...2006-10-10
数组去重在面试和工作中都是比较容易见到的问题。这篇文章主要是来测试多个方法，对下面这个数组的去重结果进行分析讨论，需要的可以参考一下2022-07-07
浏览器是否支持html5的canvas,我们可以使用js来判断下，具体如下，喜欢的朋友可以收藏2013-11-11
最新评论