问题：使用layui上传图片的，出现图片旋转90度
【js/jquery|解决layui上传图片预览旋转90度的问题】
文章图片
解决办法：通过EXIF.getData获取图片信息，判断图片是否旋转
html:
Title - 锐客网
![js/jquery|解决layui上传图片预览旋转90度的问题]()
js:
layui.use('upload', function() {
var $ = layui.jquery
, upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#test1'
, url: '/upload/'
, before: function (obj) {
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
console.log(file)
EXIF.getData(file, function() {
//获取图片Orientation
orient = EXIF.getTag(this, 'Orientation');
if(orient==6){//逆时针旋转了90度
rotateBase64Img(result,90,callback);
}else if(orient==1){
$('#demo1').attr('src', result);
//图片链接（base64）
}
});
});
}
, done: function (res) {
//如果上传失败
if (res.code > 0) {
return layer.msg('上传失败');
}
//上传成功
}
, error: function () {
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('上传失败 重试');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
//旋转base64图片
function rotateBase64Img(src, edg, callback) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var imgW;
//图片宽度
var imgH;
//图片高度
var size;
//canvas初始大小
if (edg % 90 != 0) {
console.error("旋转角度必须是90的倍数!");
throw '旋转角度必须是90的倍数!';
}
(edg < 0) && (edg = (edg % 360) + 360)
const quadrant = (edg / 90) % 4;
//旋转象限
const cutCoor = {sx: 0, sy: 0, ex: 0, ey: 0};
//裁剪坐标
var image = new Image();
image.crossOrigin = "anonymous"
image.src = https://www.it610.com/article/src;
image.onload = function () {
imgW = image.width;
imgH = image.height;
size = imgW> imgH ? imgW : imgH;
canvas.width = size * 2;
canvas.height = size * 2;
switch (quadrant) {
case 0:
cutCoor.sx = size;
cutCoor.sy = size;
cutCoor.ex = size + imgW;
cutCoor.ey = size + imgH;
break;
case 1:
cutCoor.sx = size - imgH;
cutCoor.sy = size;
cutCoor.ex = size;
cutCoor.ey = size + imgW;
break;
case 2:
cutCoor.sx = size - imgW;
cutCoor.sy = size - imgH;
cutCoor.ex = size;
cutCoor.ey = size;
break;
case 3:
cutCoor.sx = size;
cutCoor.sy = size - imgW;
cutCoor.ex = size + imgH;
cutCoor.ey = size + imgW;
break;
}
ctx.translate(size, size);
ctx.rotate(edg * Math.PI / 180);
ctx.drawImage(image, 0, 0);
var imgData = https://www.it610.com/article/ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
if (quadrant % 2 == 0) {
canvas.width = imgW;
canvas.height = imgH;
} else {
canvas.width = imgH;
canvas.height = imgW;
}
ctx.putImageData(imgData, 0, 0);
callback(canvas.toDataURL())
};
}function callback(base64data) {
document.getElementById("demo1").src = https://www.it610.com/article/base64data;
}
});
推荐阅读
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- JS/JavaScript|JS/JavaScript CRC8多项式 16进制
- JS|VUE学习笔记[30-46]
- 腾讯TEG实习|腾讯实习——Vue解决跨域请求
- 地图|高德地图清除指定覆盖物 自定义覆盖物样式（完整dome）
- Pyecharts|Pyecharts 猎聘招聘数据可视化
- flex|C语言-使用goto语句从循环中跳出
- HTML+Js实战项目|在网页中实现icon小图标的几种方法
- js中国标准时间转化为年月日，时间戳