js實(shí)現(xiàn)圖片切割功能
更新時(shí)間：2021年09月01日 11:21:38 作者：KatyLight
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片切割功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)圖片切割的具體代碼，供大家參考，具體內(nèi)容如下
代碼：
<!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個(gè)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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript前端中的偽類(lèi)元素before和after使用詳解
before和after也算是css里面最常見(jiàn)的元素了，而我卻一直不太了解，再不學(xué)一下就真的太不像話了。所以學(xué)習(xí)一下，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02
javascript 隨機(jī)抽獎(jiǎng)程序代碼
javascript 隨機(jī)抽獎(jiǎng)程序代碼,主要是利用了js的Math.random方法。需要的朋友可以參考下。2009-11-11
基于JS實(shí)現(xiàn)導(dǎo)航條flash導(dǎo)航條
flash導(dǎo)航條在網(wǎng)站建設(shè)中應(yīng)用比較廣泛，此種效果給瀏覽者帶來(lái)極好的視覺(jué)效果，非常棒，下面小編給大家介紹基于JS實(shí)現(xiàn)導(dǎo)航條flash導(dǎo)航條，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
flash調(diào)用js中的方法,讓js傳遞變量給flash的辦法及思路
前幾天發(fā)表了 將FlashVars寫(xiě)在JS函數(shù)中，實(shí)現(xiàn)與后臺(tái)的實(shí)時(shí)變量更新，但是僅支持 IE，隨后與 Luckyer 進(jìn)行了交流，發(fā)現(xiàn)用 SetVariable 可以很方便的實(shí)現(xiàn)多瀏覽器兼容。舉例如下。2013-08-08
20分鐘輕松創(chuàng)建自己的Bootstrap站點(diǎn)
這篇文章主要教大家如何在短短的20分鐘內(nèi)輕松創(chuàng)建自己的Bootstrap站點(diǎn)，學(xué)會(huì)使用twitter bootstrap建立一個(gè)站點(diǎn)，從而鞏固Bootstrap一系列基礎(chǔ)知識(shí)，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了微信小程序視圖template模板引用的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下2017-09-09
微信小程序非swiper組件實(shí)現(xiàn)的自定義偽3D輪播圖效果示例
這篇文章主要介紹了微信小程序非swiper組件實(shí)現(xiàn)的自定義偽3D輪播圖效果,涉及微信小程序事件響應(yīng)及元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)輪播圖效果相關(guān)技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12
使用Javascript和DOM Interfaces來(lái)處理HTML
使用Javascript和DOM Interfaces來(lái)處理HTML...2006-10-10
JavaScript常用數(shù)組去重的方法及對(duì)比詳解
數(shù)組去重在面試和工作中都是比較容易見(jiàn)到的問(wèn)題。這篇文章主要是來(lái)測(cè)試多個(gè)方法，對(duì)下面這個(gè)數(shù)組的去重結(jié)果進(jìn)行分析討論，需要的可以參考一下2022-07-07
瀏覽器是否支持html5的canvas,我們可以使用js來(lái)判斷下，具體如下，喜歡的朋友可以收藏2013-11-11