今天利用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; });