今天利用canvas 实现了图片的裁剪。具体代码看下面。
html:
首先我通过input file 获取图片file对象
var upphoto = document.querySelectorAll('.upphoto');
for(var i = 0; i < upphoto.length; i++) {
upphoto[i].addEventListener('change', function() {
console.log('点击了上传图片')
var file = this.files[0];
if(!/image\/\w+/.test(file.type)) {
mui.toast("文件必须为图片");
return false;
}
var fr = new FileReader();
fr.onload = function() {
preview = this.result;
console.log(preview);
location.href = 'clip_img.html?imgurl=' + preview;
}
fr.readAsDataURL(this.files[0]);
console.log(this.files[0])
})
}
获取成功以后将图片的base64编码传到裁剪页面处理
// 接受传过来的参数
waitingShow();
var params = getRequest();
console.log(params.imgurl);
// 图片Base64
var path = params.imgurl;
// 设置canvas的宽高
var displayHeight = window.screen.height - 45 + 'px';
var displayWidth = window.screen.width + 'px';
console.log(displayHeight);
console.log(displayWidth);
document.getElementById('canvas-box').setAttribute('width',displayWidth);
document.getElementById('canvas-box').setAttribute('height',displayHeight);
// 图片在canvas中显示
waitingHide();
var canvasbox = document.getElementById('canvas-box');
var context = canvasbox.getContext('2d');
var img=new Image();
img.src=path;
var imgHeight;
var imgwidth;
img.οnlοad=function(){
context.drawImage(img,0,0);
imgHeight= img.height;
imgWidth = img.width;
alert(imgHeight);
alert(imgWidth);
// 1.插件确定裁剪位置用方法一
clipP.setClip({
imgHeight: imgHeight + 45,
qiu: qiu,
clip: clip,
w: w,
h: h
});
}
// 2.确定裁剪位置用方法二
// var borderLeft,borderTop;
// var qiu = document.getElementById('qiu');
// var clip = document.getElementById('clip');
// clip.addEventListener('touchstart', function(event) {
// event.stopPropagation();
// var touch = event.targetTouches[0];
// borderLeft = touch.pageX - clip.offsetLeft;
// borderTop = touch.pageY - clip.offsetTop;
// });
// clip.addEventListener('touchmove', function(event) {
// event.stopPropagation();
// var touch = event.targetTouches[0];
// var left = touch.pageX - borderLeft;
// var top = touch.pageY - borderTop;
// var clipWidth = parseInt(clip.getAttribute('data-k'));
// var clipLeft = parseInt(clip.style.left);
// var clipTop = parseInt(clip.style.top);
//
// console.log('left'+ left);
// console.log('clipwidth'+clipWidth);
// console.log('displayWidth'+displayWidth);
// var maxleft = parseInt(imgWidth) - clipWidth;
// console.log('maxleft'+ maxleft);
// if(left < 0) {
// clip.style.left = '0px';
// clip.setAttribute('data-l', 0);
// } else if(left >= maxleft) {
// clip.style.left = maxleft + 'px';
// console.log(maxleft);
// clip.setAttribute('data-l', maxleft + 'px');
// } else {
// clip.style.left = left + 'px';
// clip.setAttribute('data-l', left);
// }
//
// //top
// if(top <= 45) {
// clip.style.top = '45px';
// clip.setAttribute('data-t', 45);
// } else if(top > imgHeight - clipWidth + 45) {
// clip.style.top = imgHeight - clipWidth + 45 + 'px';
// clip.setAttribute('data-t', imgHeight - clipWidth + 45 + 'px');
// } else {
// clip.style.top = top + 'px';
// clip.setAttribute('data-t', top);
// }
// });
// 保存截取图片
mui('#header').on('tap', '#save', function(){
// var x = clip.getAttribute('data-l');
// var y = clip.getAttribute('data-t');
// var width = clip.getAttribute('data-k');
// x = parseInt(x);
// y = parseInt(y);
// width = parseInt(width);
// 插件用法
var imgInfo= clipP.getClip()
console.log(JSON.stringify(imgInfo));
var x = imgInfo.left;
var y = imgInfo.top;
var width = imgInfo.width;
var height = imgInfo.height
// 获得裁剪的图片(创建一个canvas,将裁剪的图片复制上去)
var canvas2 = document.createElement("canvas");
var cxt2 = canvas2.getContext("2d");
canvas2.width = width;
canvas2.height = height;
// var imgData = context.getImageData(x,y-45,width,height);
// canvas 裁剪图片(复制)
var imgData = context.getImageData(x,y,width,height);
cxt2.putImageData(imgData,0,0);
console.log(canvas2.toDataURL());
// 转成base64
var newurl = canvas2.toDataURL("image/png");
// 将裁剪的图片返回到上一页面
window.location.href = 'red_packet_send.html?newurl='+ newurl;
});