引入exif.js解决旋转
css：
.weui-uploader__hd {
padding-bottom: 0;
}
.weui-uploader__files {
margin-top: 10px;
}
.weui-uploader__file .mdm_img {
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.weui-uploader__file {
position: relative;
}
.weui-uploader__file span {
background: #fff;
width: 24px;
height: 24px;
top: -8px;
right: -8px;
border-radius: 50%;
z-index: 10;
}
.weui-uploader__file span img {
width: 100%;
}
.weui-gallery__img {
bottom: 0;
}
.weui-gallery__opr {
display: none;
}html：
<div class="form-group weui-cell"> <div class="weui-cell__bd"> <div class="weui-uploader"> <div class="weui-uploader__hd"> <p class="weui-uploader__title">图片上传</p> <div class="weui-uploader__info" id="img_url_info">0/4</div> </div> <div class="weui-uploader__bd"> <ul class="weui-uploader__files" id="img_url_box"></ul> <div class="weui-uploader__input-box" id="img_url_btn_box"> <input id="img_url_btn" class="weui-uploader__input" type="file" accept="image/*" /><!--加入capture="camera"设置只允许拍照--> </div> </div> </div> </div> </div> <div class="weui-gallery" id="gallery"> <span class="weui-gallery__img" id="galleryImg"></span> <div class="weui-gallery__opr"> <a href="javascript:" rel="external nofollow" class="weui-gallery__del"> <i class="weui-icon-delete weui-icon_gallery-delete"></i> </a> </div> </div>
javascript：
var $gallery = $("#gallery"),
$galleryImg = $("#galleryImg"),
$uploaderInput = $("#img_url_btn"),
$uploaderFiles = $("#img_url_box"),
maxCount = 4,
imgNum = 0,
imgIdNum = 0,
ajaxnum = 0;
$uploaderInput.on("change", function (e) {
var files = e.target.files;
if (files.length === 0) {
return;
}
for (var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
var Orientation = null;//图片方向角
if (file) {
//获取照片方向角属性，用户旋转控制
EXIF.getData(file, function () {
EXIF.getAllTags(this);
Orientation = EXIF.getTag(this, 'Orientation');//这个Orientation 就是我们判断需不需要旋转的值了，有1、3、6、8
});
if (imgNum >= maxCount) {
$('#img_url_btn_box').css('display', 'none');
$.alert({ text: '最多只能上传' + maxCount + '张图片' });
return;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
var img = new Image();
img.src = e.target.result;
var typeArr = img.src.split(',');
typeArr = typeArr[0].split(';');
typeArr = typeArr[0].split(':');
img.onload = function () {
// 图片原始尺寸
var imgWidth = this.width,
imgHeight = this.height;
// 最大尺寸限制，可通过设置宽高来实现图片压缩程度
var maxw = 800,
maxh = 800;
// 图片尺寸超过限制
if (imgWidth > imgHeight && imgWidth > maxw) {
imgWidth = maxw;
imgHeight = Math.ceil(maxw / this.width * imgHeight);
} else if (imgWidth < imgHeight && imgHeight > maxh) {
imgWidth = Math.ceil(maxh / this.height * this.width);
imgHeight = maxh;
}
//绘制图形处理旋转
var canvas = document.createElement("canvas"),
ctx = canvas.getContext('2d');
canvas.width = imgWidth;
canvas.height = imgHeight;
if (Orientation && Orientation != 1) {
switch (Orientation) {
case 6:
canvas.width = imgHeight;
canvas.height = imgWidth;
ctx.rotate(Math.PI / 2);
ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
break;
case 3:
ctx.rotate(Math.PI);
ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
break;
case 8:
canvas.width = imgHeight;
canvas.height = imgWidth;
ctx.rotate(3 * Math.PI / 2);
ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
break;
}
} else {
ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
}
var base64 = canvas.toDataURL(typeArr[1], 1);
//插入到浏览区域
if (imgNum >= maxCount) {
$('#img_url_btn_box').css('display', 'none');
$.alert({ text: '最多只能上传' + maxCount + '张图片' });
return;
}
var $preview = $('<li class="weui-uploader__file weui-uploader__file_status" id="img_url_' + imgIdNum + '" style="background-image:url(' + base64 + ')"><span onclick="removeimg(\'img_url_' + imgIdNum + '\');" style="background-image:url(images/icon_close.png);background-size:100%;"></span><img class="mdm_img" style="background-image:url(' + base64 + ')" /><div class="weui-uploader__file-content" id="img_url_info_box_' + imgIdNum + '">0%</div></li>');
$uploaderFiles.append($preview);
imgNum++;
if (imgNum >= maxCount) {
$('#img_url_btn_box').css('display', 'none');
}
$('#img_url_info').text(imgNum + '/' + maxCount);
var formData = new FormData();
formData.append("images", base64);
$.ajax({
url: '/tools/submit_ajax.ashx?action=SaveToFile',
type: 'POST',
data: formData,
dataType: "json",
contentType: false,
processData: false,
xhr: function () {
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.addEventListener("progress", function (event) { onprogress(event, 'img_url_info_box_' + ajaxnum) }, false);
return xhr;
}
},
success: function (d) {
if (d.code == 0) {
$('#img_url_' + ajaxnum).removeClass('weui-uploader__file_status');
$('#img_url_info_box_' + ajaxnum).html('<input type="hidden" name="img_url" value="' + d.imgurl + '" />');
} else {
$('#img_url_info_box_' + ajaxnum).html('<i class="weui-icon-warn"></i>');
}
ajaxnum++;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$('#img_url_info_box_' + ajaxnum).html('<i class="weui-icon-warn"></i>');
$.alert({ title: '提示', text: '状态：' + textStatus + '；出错提示：' + errorThrown, onOK: function () { } });
ajaxnum++;
}
});
imgIdNum++;
}
}
} else {
$.alert({ title: '提示', text: '暂不支持该格式！', onOK: function () { } });
}
}
});
//查看图片
var index; //第几张图片
$uploaderFiles.on("click", "li", function (e) {
e = e || window.event;
e.target = e.target || e.srcElement;
if (e.target.nodeName == 'IMG') {
index = $(this).index();
$galleryImg.attr("style", this.getAttribute("style"));
$gallery.fadeIn(100);
}
});
$gallery.on("click", function () {
$gallery.fadeOut(100);
});
//删除图片
function removeimg(_id) {
$('#' + _id).remove();
imgNum--;
$('#img_url_info').text(imgNum + '/' + maxCount);
if (imgNum < maxCount) {
$('#img_url_btn_box').css('display', '');
}
}
//上传进度
function onprogress(evt, _id) {
var loaded = evt.loaded;//已经上传大小情况
var tot = evt.total;//附件总大小
var per = Math.floor(100 * loaded / tot);//已经上传的百分比
$("#" + _id).html(per + "%");
}Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
