canvas裁剪部分图片,以及图片绘制在canvas,H5的fi
2019-01-07 本文已影响0人
chouchou723
这不是一个完整的插件,只是做了一些方法的记录..完整的裁剪图片太复杂了
<!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>
