[英]How to adjust the orientation of a image in order to show proper preview of the image?
我開發了一個 Laravel Web 應用程序,它具有接受用戶上傳的圖像然后顯示它的功能。 我在測試時遇到了一個問題,因為使用手機上傳的照片逆時針旋轉了 90 度,我使用圖像干預來解決這個問題。 但是當我使用 javascript 向用戶顯示上傳圖像的預覽時,圖像旋轉了 90 度,但是當我保存圖像時它變得正確。 我的 javascript 代碼是
function imagePreview(input,elm) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(elm).css("background-image","url('"+e.target.result+"')");
}
reader.readAsDataURL(input.files[0]);
}
}
$("#settings_img").on("change",function(){
imagePreview(this,"#settings_img_elm");
});
任何人都可以通過編輯上面的代碼來幫助我正確定位預覽圖像,以便在需要時更改圖像的方向。
用 CSS 旋轉圖像怎么樣?
reader.onload = function (e) {
$(elm).css({
"background-image":"url('"+e.target.result+"')",
"transform": "rotate(90deg)"
});
}
編輯:嗯,在簡要了解 EXIF 數據的世界后,我想我可能會為您提供解決方案。 正如@Nick 建議的那樣,我借用了 Ali 的getOrientation()函數,然后我只是用 CSS 更正了方向,如下所示:
function correctOrientation(element, orientation){
switch (orientation) {
case 2: $(element).css("transform", "scaleX(-1)");
break;
case 3: $(element).css("transform", "rotate(180deg)");
break;
case 4: $(element).css("transform", "rotate(180deg) scaleX(-1)");
break;
case 5: $(element).css("transform", "rotate(-90deg) scaleX(-1)");
break;
case 6: $(element).css("transform", "rotate(90deg)");
break;
case 7: $(element).css("transform", "rotate(90deg) scaleX(-1)");
break;
case 8: $(element).css("transform", "rotate(-90deg)");
break;
default: break;
}
}
如果您需要示例文件來測試它,請在此處獲取它們。
編輯:將上傳的圖像放在<img>
而不是 div 的背景圖像中: https : //jsfiddle.net/ynzvtLe2/2/
這應該有效。 在這里,我獲得了圖像文件的原始方向,然后使用適當的旋轉校正構建了一個畫布。 然后我們將正確旋轉的圖像設置為預覽。
function imagePreview(input,elm) {
// image file
var file = input.files[0];
if (!file.type.match('image/jpeg.*')) {
// image is not a jpeg, do something?
}
var reader = new FileReader();
reader.onload = function(e) {
var exif = piexif.load(e.target.result);
var image = new Image();
image.onload = function () {
//get original orientation of the uploaded image
var orientation = exif["0th"][piexif.ImageIFD.Orientation];
// Build a temperory canvas to manipulate image to required orientation
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext("2d");
var x = 0;
var y = 0;
ctx.save();
if (orientation == 2) {
x = -canvas.width;
ctx.scale(-1, 1);
} else if (orientation == 3) {
x = -canvas.width;
y = -canvas.height;
ctx.scale(-1, -1);
} else if (orientation == 4) {
y = -canvas.height;
ctx.scale(1, -1);
} else if (orientation == 5) {
canvas.width = image.height;
canvas.height = image.width;
ctx.translate(canvas.width, canvas.height / canvas.width);
ctx.rotate(Math.PI / 2);
y = -canvas.width;
ctx.scale(1, -1);
} else if (orientation == 6) {
canvas.width = image.height;
canvas.height = image.width;
ctx.translate(canvas.width, canvas.height / canvas.width);
ctx.rotate(Math.PI / 2);
} else if (orientation == 7) {
canvas.width = image.height;
canvas.height = image.width;
ctx.translate(canvas.width, canvas.height / canvas.width);
ctx.rotate(Math.PI / 2);
x = -canvas.height;
ctx.scale(-1, 1);
} else if (orientation == 8) {
canvas.width = image.height;
canvas.height = image.width;
ctx.translate(canvas.width, canvas.height / canvas.width);
ctx.rotate(Math.PI / 2);
x = -canvas.height;
y = -canvas.width;
ctx.scale(-1, -1);
}
ctx.drawImage(image, x, y);
ctx.restore();
var dataURL = canvas.toDataURL("image/jpeg", 1.0);
// set the preview image to your element
$(elm).css("background-image","url('"+dataURL+"')");
};
image.src = e.target.result;
};
reader.readAsDataURL(file);
}
$("#settings_img").on("change",function(){
imagePreview(this,"#settings_img_elm");
});
確保首先包含這個庫: https : //github.com/hMatoba/piexifjs
我從文檔中得到了幫助: https : //readthedocs.org/projects/piexif/downloads/pdf/latest/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.