這不是一個完整的插件,只是做了一些方法的記錄..完整的裁剪圖片太復雜了
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,html{
margin: 0;
padding: 0;
}
#mark{
position:absolute;
height:100px;
width:100px;
left:0;
top:0;
/* border:1px solid rgba(0,0,0,0.5); */
cursor:move;
opacity: 0;
z-index: 2;
}
.input{
position:absolute;
height:300px;
width:300px;
left:0px;
top:400px;
/* opacity: 0; */
z-index: 10;
}
#img{
position:absolute;
width: 100px;
height: 100px;
left:400px;
}
#c3,#c1{
position:absolute;
height:300px;
width:300px;
left:0;
}
#c2{
position:absolute;
height:100px;
width:100px;
left:0;
}
</style>
</head>
<body>
<input type="file" onchange="getFile(files,event)" class="input">
<canvas id="c1"></canvas> //顯示原圖像
<canvas id="c2"></canvas>
<div draggable="true" class="mark" id="mark"></div>
<img alt="" id="img">
<canvas id="c3"></canvas> //顯示剪切后的圖像
<img id="img1" alt="">
<script>
</script>
<script>
// function changepic(event){
var canvas1 = document.getElementById("c1")
var oMark = document.getElementById("mark")
var canvas3 = document.getElementById("c3")
canvas1.height = 300;
canvas1.width = 300;
canvas3.height = 300;
canvas3.width = 300;
var cxt1 = canvas1.getContext("2d");
var cxt3 = canvas3.getContext("2d");
var getFile = function (files, event) { //input的onchange方法
console.log(event)
var inputfile = files[0];
fileToCanvas(inputfile);
event.target.value = '' //如果不使用,如果再上傳同一張圖片 不會觸發onchange方法
// fileToImage(inputfile);
}
// // var img = new Image();
// // img.crossOrigin = '';
var cl
var ct
var srcX
var srcY
var sWidth
var sHeight
function fileToCanvas(file) {
document.querySelector("#img1").src = window.URL.createObjectURL(file);//可以直接創建url賦值給img
var reader = new FileReader();
reader.readAsDataURL(file); //讀取圖像文件 result 為 DataURL, DataURL 可直接 賦值給 img.src
reader.onload = function (event) {
var image = new Image();
// console.log(event.target.result)
image.src = event.target.result;
image.onload = function () {
cxt1.drawImage(image, 0, 0, canvas1.width, canvas1.height); //把img繪制到canvas1上
document.getElementsByClassName('mark')[0].style.opacity = '1' //同時打開截圖小方塊
clipR(cxt3, cxt1)
// cxt3.clearRect(srcX, srcY, sWidth, sHeight)
}
}
}
function clipR(cxt, a) {
cl = canvas1.getBoundingClientRect().left;
ct = canvas1.getBoundingClientRect().top;
srcX = oMark.getBoundingClientRect().left - cl; //移動的話,始終需要計算這兩個值
srcY = oMark.getBoundingClientRect().top - ct; //移動的話,始終需要計算這兩個值
sWidth = oMark.offsetWidth;
sHeight = oMark.offsetHeight;
cxt3.clearRect(0, 0, 300, 300);
cxt3.fillStyle = "rgba(0,0,0,0.8)";
cxt3.fillRect(0, 0, 300, 300);
cxt3.save() //保存canvas狀態,再進行裁剪canvas,保證每次鼠標移動后,都是從完全的蒙版上進行裁剪
cxt3.clearRect(srcX, srcY, sWidth, sHeight)
cxt3.restore();
// console.log(a)
var dataImg = a.getImageData(srcX, srcY, sWidth, sHeight) //把截圖的坐標圖片數據賦值
getClipImg(dataImg)
}
function getClipImg(dataImg) {
var canvas2 = document.createElement("canvas")
var cxt2 = canvas2.getContext("2d")
canvas2.width = sWidth;
canvas2.height = sHeight;
cxt2.putImageData(dataImg, 0, 0, 0, 0, canvas2.width, canvas2.height); //把裁剪的圖片數據賦給cxt2
var img2 = canvas2.toDataURL("image/png"); //把canvas變成base64
document.getElementById('img').src = img2; //賦給img
}
var startX, startY, endX, endY
function changeM(event) { //touch或者dragstart時記錄開始的坐標
// console.log(event)
startX = event.touches ? event.touches[0].clientX : event.clientX
startY = event.touches ? event.touches[0].clientY : event.clientY
}
var et = 0;
var el = 0;
function changeO(event) {//touchmove或者drag移動狀態,觸發mark的位移,同時觸發裁剪
endX = event.touches ? event.touches[0].clientX : event.clientX
endY = event.touches ? event.touches[0].clientY : event.clientY
var markT = document.getElementById('mark').style.top.split('px')[0] - 0
var markL = document.getElementById('mark').style.left.split('px')[0] - 0
// var et = (markT + Math.floor((endY - startY)/5))
// var el = (markL + Math.floor((endX - startX)/5))
et += Math.floor((endY - startY) / 5)
el += Math.floor((endX - startX) / 5)
console.log(et, el)
document.getElementById('mark').style.transform = `translate(${el}px,${et}px)`
// if (et < 0) {
// document.getElementById('mark').style.top = 0
// } else if (et > 200) {
// document.getElementById('mark').style.top = '200px'
// } else {
// document.getElementById('mark').style.top = et + 'px'
// }
// if (el < 0) {
// document.getElementById('mark').style.left = 0
// } else if (el > 200) {
// document.getElementById('mark').style.left = '200px'
// } else {
// document.getElementById('mark').style.left = el + 'px'
// }
// console.log(cxt3)
clipR(cxt3, cxt1)
}
function changeMM(event) {
event.preventDefault()
}
document.getElementById('mark').addEventListener('dragstart', changeM)
document.getElementById('mark').addEventListener('drag', changeMM)
document.getElementById('mark').addEventListener('dragover', changeO)
document.getElementById('mark').addEventListener('touchstart', changeM)
document.getElementById('mark').addEventListener('touchmove', changeO)
</script>
</body>
</html>
