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
});
}