h5实现图片的裁剪(单页面)
html:
<!--单张图片--> <div id="onephoto" style="display: block;"> <div class="goods-title">红包图片</div> <div class="img-all"> <div class="img-add imgadd"> <img src="images/iconfont-tianjia.png" alt="" width="100%" height="auto" /> <input class="upphoto" type="file" name='file' accept="image/jpg,image/jpeg,image/png" /> </div> </div> </div>
<!--图片裁剪--> <div class="clip-img mui-hidden"> <header class="mui-bar mui-bar-nav" id="header"> <h1 class="mui-title seller-name">图片裁剪</h1> <a class="mui-pull-left icon-back clip-hidden"></a> <a class="mui-pull-right font-16px" id="save">保存</a> </header> <div id="clip" data-k='200' data-l="0" data-t="45" style="left: 0px; top: 45px;"></div> <div id="qiu"></div> <canvas id="canvas-box" width="100%" height="100%" style="margin-top: 0px;"></canvas> </div>
css
* { /*overflow: hidden;*/ } body { /*overflow: hidden;*/ } .clip-img img { width: 100%; height: auto; } .img { padding-top: 45px; } #clip { position: absolute; top: 45px; left: 0; border: 1px solid #f00; overflow: hidden; } #qiu { width: 20px; height: 20px; border-radius: 20px; background: #f00; position: absolute; overflow: hidden; } #canvas-box { margin-top: 45px; }
js
// 图片上传 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("文件必须为图片"); this.outerHTML = this.outerHTML; return false; } var fr = new FileReader(); fr.onload = function() { preview = this.result; console.log(preview); document.querySelector('.clip-img').classList.remove('mui-hidden'); openClipPage(preview); } fr.readAsDataURL(this.files[0]); console.log(this.files[0]) }, false) }
//***********************图片裁剪*************************** // 设置canvas的宽高 var context; 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中显示 function openClipPage(path) { var canvasbox = document.getElementById('canvas-box'); context = canvasbox.getContext('2d'); var img = new Image(); img.src = path; var imgHeight; var imgWidth; img.onload = function() { imgHeight = img.height; imgWidth = img.width; var proportion = getProportion(imgWidth,window.screen.width); context.clearRect(0, 0, window.screen.width, window.screen.height); context.drawImage(img, 0, 0,imgWidth,imgHeight,0,0,window.screen.width,imgHeight/proportion); // 1.插件确定裁剪位置用方法一 clipP.setClip({ imgHeight: imgHeight/proportion + 45, qiu: qiu, clip: clip, w: 90, h: 140 }); } } $.tapHandler({ selector: '#save', callback: function() { // 插件用法 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, width, height); cxt2.putImageData(imgData, 0, 0); console.log(canvas2.toDataURL()); // 转成base64 var newurl = canvas2.toDataURL("image/png"); appendFile(sellerId, newurl); //上传图片函数(省略) } });
// 计算图片和显示屏的比例
function getProportion(imgW, displayW) {
return imgW / displayW;
}
补充: urlbase64 转 file 对象
function ba64toFile(fileName, dataUrl) {
var blob = dataURLtoBlob(dataUrl);
var fileBody = new File([blob], fileName);
return fileBody;
}
function dataURLtoBlob(dataUrl) {
var arr = dataUrl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
}