|
系统用户上传的图片如证件照经常角度不正，可能是倒着的，所以在审核查看图片的时候很不方便，一般图片查看放大的组件只有旋转和放大的功能，但是旋转查看完之后，下一次再打开放大，角度没有变化，还是倒的。所以这样就需要旋转完成之后进行保存，保存肯定是保存到后端数据库，只有数据库的数据源图片角度正确，下次打开页面图片的角度才是正确的。
方法一：就是前端进行图片旋转，将图片用canvas画布再重新画一张，旋转canvas画布，旋转完成后生成一张新的图片，将新图片传给后端，重新替换原来的图片。
//html...........................................................
div {
margin: 0 auto;
text-align: center;
}
.canvas-img {
width: 500px;
height: 300px;
}
![span""/span](span"aaa.png"/span)
![span""/span](span"#"/span)
左
右
//js................................................
var deg = 90,
imgUrl = $('#temp-img').attr('src'),
imgW = parseInt($('#temp-img').width()),
imgH = parseInt($('#temp-img').height());
getBase64(imgUrl, imgW, imgH, deg)
function getBase64(imgUrl, imgW, imgH, deg) {
//通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 ![]() 省去了 append()，也就避免了文档冗余和污染
var Img = new Image(),
dataURL = '',
deg = deg;
Img.src = imgUrl;
Img.onload = function() { //要先确保图片完整获取到，这是个异步事件
var canvas = document.createElement("canvas"), //创建canvas元素
ctx = canvas.getContext("2d"),
//确保canvas的尺寸和图片一样
width = imgW,
height = imgH,
w = deg % 180 == 0 ? width : height,
h = deg % 180 == 0 ? height : width,
obj = {
x: w / 2,
y: h / 2,
w: width,
h: height
};
canvas.width = w;
canvas.height = h;
ctx.translate(obj.x, obj.y);
ctx.rotate(deg * Math.PI / 180);
ctx.translate(-obj.x, -obj.y);
ctx.drawImage(Img, obj.x - obj.w / 2, obj.y - obj.h / 2, obj.w, obj.h); //将图片绘制到canvas中
dataURL = canvas.toDataURL(); //转换图片为dataURL（转换成base64）
$('.canvas-box').css({
'width': w,
'height': h
}).html('');
$('.canvas-box').append(canvas);
console.log(dataURL)
$("#modelImg").attr("src",dataURL)
};
return dataURL
}
$("#left").click(function(){
deg -= 90
getBase64(imgUrl, imgW, imgH, deg)
})
$("#right").click(function(){
deg += 90
getBase64(imgUrl, imgW, imgH, deg)
})
复制代码
效果图
方法二：
前端只需要获取到图片旋转的角度deg,将角度和图片唯一标识（id或url）传递给后端，后端完成数据源图片的旋转。此方法前端性能更经济，更简便。
|