আমি জেপিইজি EXIF চিত্রের ডেটাতে ক্যামেরার দ্বারা সেট করা ফটোগুলি তাদের মূল ঘূর্ণনের উপর ভিত্তি করে ঘোরানো চাই। কৌশলটি হ'ল জাভাস্ক্রিপ্ট এবং ব্যবহার করে ব্রাউজারে এই সমস্ত হওয়া উচিত <canvas>।
ঘূর্ণন সম্পর্কিত তথ্য পড়ার জন্য কীভাবে জাভাস্ক্রিপ্ট JPEG, স্থানীয় ফাইল এপিআই আইজেক্ট, স্থানীয় <img>বা দূরবর্তী <img>, এক্সআইএফ ডেটা অ্যাক্সেস করতে পারে ?
সার্ভার-পাশের উত্তরগুলি ঠিক নেই; আমি ক্লায়েন্ট-সাইড সলিউশন খুঁজছি ।
উত্তর:
আপনি যদি কেবল ওরিয়েন্টেশন ট্যাগ এবং অন্য কিছু চান না এবং অন্য একটি বিশাল জাভাস্ক্রিপ্ট লাইব্রেরি অন্তর্ভুক্ত করতে চান না তবে আমি একটি ছোট্ট কোড লিখেছি যা ওরিয়েন্টেশন ট্যাগটি যত তাড়াতাড়ি এক্সট্রাক্ট করে তোলে (এটি ডেটাভিউ ব্যবহার করে readAsArrayBufferযা আই 10 + এ উপলব্ধ, তবে আপনি লিখতে পারেন পুরানো ব্রাউজারগুলির জন্য আপনার নিজস্ব ডেটা রিডার):
function getOrientation(file, callback) {
var reader = new FileReader();
reader.onload = function(e) {
var view = new DataView(e.target.result);
if (view.getUint16(0, false) != 0xFFD8)
{
return callback(-2);
}
var length = view.byteLength, offset = 2;
while (offset < length)
{
if (view.getUint16(offset+2, false) <= 8) return callback(-1);
var marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1)
{
if (view.getUint32(offset += 2, false) != 0x45786966)
{
return callback(-1);
}
var little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
var tags = view.getUint16(offset, little);
offset += 2;
for (var i = 0; i < tags; i++)
{
if (view.getUint16(offset + (i * 12), little) == 0x0112)
{
return callback(view.getUint16(offset + (i * 12) + 8, little));
}
}
}
else if ((marker & 0xFF00) != 0xFF00)
{
break;
}
else
{
offset += view.getUint16(offset, false);
}
}
return callback(-1);
};
reader.readAsArrayBuffer(file);
}
// usage:
var input = document.getElementById('input');
input.onchange = function(e) {
getOrientation(input.files[0], function(orientation) {
alert('orientation: ' + orientation);
});
}<input id='input' type='file' />মান:
-2: not jpeg
-1: not defined
যারা টাইপস্ক্রিপ্ট ব্যবহার করছেন তাদের জন্য আপনি নিম্নলিখিত কোডটি ব্যবহার করতে পারেন:
export const getOrientation = (file: File, callback: Function) => {
var reader = new FileReader();
reader.onload = (event: ProgressEvent) => {
if (! event.target) {
return;
}
const file = event.target as FileReader;
const view = new DataView(file.result as ArrayBuffer);
if (view.getUint16(0, false) != 0xFFD8) {
return callback(-2);
}
const length = view.byteLength
let offset = 2;
while (offset < length)
{
if (view.getUint16(offset+2, false) <= 8) return callback(-1);
let marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1) {
if (view.getUint32(offset += 2, false) != 0x45786966) {
return callback(-1);
}
let little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
let tags = view.getUint16(offset, little);
offset += 2;
for (let i = 0; i < tags; i++) {
if (view.getUint16(offset + (i * 12), little) == 0x0112) {
return callback(view.getUint16(offset + (i * 12) + 8, little));
}
}
} else if ((marker & 0xFF00) != 0xFF00) {
break;
}
else {
offset += view.getUint16(offset, false);
}
}
return callback(-1);
};
reader.readAsArrayBuffer(file);
}আপনি এইচটিএমএল 5 ফাইল এপিআইয়ের সাথে এক্সেফ-জেএস লাইব্রেরিটি ব্যবহার করতে পারেন : http://jsfiddle.net/xQnMd/1/ ।
$("input").change(function() {
var file = this.files[0]; // file
fr = new FileReader; // to read file contents
fr.onloadend = function() {
// get EXIF data
var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
// alert a value
alert(exif.Make);
};
fr.readAsBinaryString(file); // read the file
});ফায়ারফক্স 26 সমর্থন করে image-orientation: from-image: চিত্রগুলি পোর্ট্রেট বা ল্যান্ডস্কেপ প্রদর্শিত হয়, এক্সআইএফ ডেটার উপর নির্ভর করে। ( Sethfowler.org/blog/2013/09/13/new-in-firefox-26-css-image-orientation ।)
ক্রোমে এটি প্রয়োগ করার জন্য একটি বাগও রয়েছে ।
সাবধান থাকুন যে এই সম্পত্তিটি কেবল ফায়ারফক্স দ্বারা সমর্থিত এবং সম্ভবত হ্রাস পাওয়ার সম্ভাবনা রয়েছে ।
https://github.com/blueimp/JavaScript-Load- চিত্র একটি আধুনিক জাভাস্ক্রিপ্ট লাইব্রেরি যা কেবল এক্সিফ ওরিয়েন্টেশন পতাকাটিই বের করতে পারে না - এটি ক্লায়েন্টের পাশে JPEG চিত্রগুলিকে সঠিকভাবে আয়না / ঘোরানোও করতে পারে।
আমি এই লাইব্রেরির সাথে একই সমস্যার সমাধান করেছি: জেএস ক্লায়েন্ট-সাইড এক্সিফ ওরিয়েন্টেশন: ঘোরান এবং মিরর জেপিইজি চিত্রগুলি
আপনি যদি ক্রস ব্রাউজারটি চান তবে আপনার সেরা বেটটি এটি সার্ভারে করা। আপনার কাছে এমন একটি API থাকতে পারে যা কোনও ফাইলের ইউআরএল নেয় এবং আপনাকে এক্সআইএফ ডেটা ফেরত দেয়; পিএইচপি এর জন্য একটি মডিউল রয়েছে ।
এটি অ্যাজাক্স ব্যবহার করে করা যেতে পারে তাই এটি ব্যবহারকারীর পক্ষে নির্বিঘ্ন হতে পারে। যদি আপনি ক্রস ব্রাউজারের সামঞ্জস্যতা সম্পর্কে চিন্তা না করেন এবং HTML5 ফাইলের কার্যকারিতার উপর নির্ভর করতে পারেন তবে JsJPEGmeta লাইব্রেরিটি দেখুন যা আপনাকে সেই জাভাস্ক্রিপ্টে সেই ডেটা পেতে দেয়।
আমি লিখেছি এমন একটি মডিউল দেখুন (আপনি এটি ব্রাউজারে ব্যবহার করতে পারেন) যা এক্সিফ ওরিয়েন্টেশনকে সিএসএস রূপান্তর করতে রূপান্তর করে: https://github.com/Sobesednik/exif2css
সমস্ত ওরিয়েন্টেশন সহ জেপিইজি ফিক্সারগুলি তৈরি করার জন্য এই নোড প্রোগ্রামটিও রয়েছে: https://github.com/Sobesednik/generate-exif-fixtures
আমি ডান রোটিওন সহ কিছু ইমগ ট্যাগে HTML হিসাবে স্বাভাবিক হিসাবে অ্যান্ড্রয়েড ক্যামেরায় ফটো দেখানোর জন্য প্রসারণ কোড আপলোড করি , বিশেষত ইমগ ট্যাগের জন্য যার প্রস্থ উচ্চতার চেয়ে প্রশস্ত। আমি জানি এই কোডটি কুৎসিত তবে আপনার অন্য কোনও প্যাকেজ ইনস্টল করার দরকার নেই। (আমি এক্সিফ রোটেশন মান পেতে উপরের কোডটি ব্যবহার করেছি, আপনাকে ধন্যবাদ))
function getOrientation(file, callback) {
var reader = new FileReader();
reader.onload = function(e) {
var view = new DataView(e.target.result);
if (view.getUint16(0, false) != 0xFFD8) return callback(-2);
var length = view.byteLength, offset = 2;
while (offset < length) {
var marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1) {
if (view.getUint32(offset += 2, false) != 0x45786966) return callback(-1);
var little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
var tags = view.getUint16(offset, little);
offset += 2;
for (var i = 0; i < tags; i++)
if (view.getUint16(offset + (i * 12), little) == 0x0112)
return callback(view.getUint16(offset + (i * 12) + 8, little));
}
else if ((marker & 0xFF00) != 0xFF00) break;
else offset += view.getUint16(offset, false);
}
return callback(-1);
};
reader.readAsArrayBuffer(file);
}
var isChanged = false;
function rotate(elem, orientation) {
if (isIPhone()) return;
var degree = 0;
switch (orientation) {
case 1:
degree = 0;
break;
case 2:
degree = 0;
break;
case 3:
degree = 180;
break;
case 4:
degree = 180;
break;
case 5:
degree = 90;
break;
case 6:
degree = 90;
break;
case 7:
degree = 270;
break;
case 8:
degree = 270;
break;
}
$(elem).css('transform', 'rotate('+ degree +'deg)')
if(degree == 90 || degree == 270) {
if (!isChanged) {
changeWidthAndHeight(elem)
isChanged = true
}
} else if ($(elem).css('height') > $(elem).css('width')) {
if (!isChanged) {
changeWidthAndHeightWithOutMargin(elem)
isChanged = true
} else if(degree == 180 || degree == 0) {
changeWidthAndHeightWithOutMargin(elem)
if (!isChanged)
isChanged = true
else
isChanged = false
}
}
}
function changeWidthAndHeight(elem){
var e = $(elem)
var width = e.css('width')
var height = e.css('height')
e.css('width', height)
e.css('height', width)
e.css('margin-top', ((getPxInt(height) - getPxInt(width))/2).toString() + 'px')
e.css('margin-left', ((getPxInt(width) - getPxInt(height))/2).toString() + 'px')
}
function changeWidthAndHeightWithOutMargin(elem){
var e = $(elem)
var width = e.css('width')
var height = e.css('height')
e.css('width', height)
e.css('height', width)
e.css('margin-top', '0')
e.css('margin-left', '0')
}
function getPxInt(pxValue) {
return parseInt(pxValue.trim("px"))
}
function isIPhone(){
return (
(navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPod") != -1)
);
}এবং তারপরে যেমন ব্যবহার করুন
$("#banner-img").change(function () {
var reader = new FileReader();
getOrientation(this.files[0], function(orientation) {
rotate($('#banner-img-preview'), orientation, 1)
});
reader.onload = function (e) {
$('#banner-img-preview').attr('src', e.target.result)
$('#banner-img-preview').css('display', 'inherit')
};
// read the image file as a data URL.
reader.readAsDataURL(this.files[0]);
});প্রথম থেকেই আলীর উত্তরে আরও কার্যকারিতা সংশোধন / যুক্ত করার পরে, আমি টাইপস্ক্রিপ্টে একটি ব্যবহার পদ্ধতি তৈরি করেছি যা এই সমস্যাটির জন্য আমার প্রয়োজন অনুসারে উপযুক্ত। এই সংস্করণটি এমন ডিগ্রিতে ঘূর্ণন দেয় যা আপনার প্রকল্পের জন্যও দরকার হতে পারে।
ImageUtils.ts
/**
* Based on StackOverflow answer: https://stackoverflow.com/a/32490603
*
* @param imageFile The image file to inspect
* @param onRotationFound callback when the rotation is discovered. Will return 0 if if it fails, otherwise 0, 90, 180, or 270
*/
export function getOrientation(imageFile: File, onRotationFound: (rotationInDegrees: number) => void) {
const reader = new FileReader();
reader.onload = (event: ProgressEvent) => {
if (!event.target) {
return;
}
const innerFile = event.target as FileReader;
const view = new DataView(innerFile.result as ArrayBuffer);
if (view.getUint16(0, false) !== 0xffd8) {
return onRotationFound(convertRotationToDegrees(-2));
}
const length = view.byteLength;
let offset = 2;
while (offset < length) {
if (view.getUint16(offset + 2, false) <= 8) {
return onRotationFound(convertRotationToDegrees(-1));
}
const marker = view.getUint16(offset, false);
offset += 2;
if (marker === 0xffe1) {
if (view.getUint32((offset += 2), false) !== 0x45786966) {
return onRotationFound(convertRotationToDegrees(-1));
}
const little = view.getUint16((offset += 6), false) === 0x4949;
offset += view.getUint32(offset + 4, little);
const tags = view.getUint16(offset, little);
offset += 2;
for (let i = 0; i < tags; i++) {
if (view.getUint16(offset + i * 12, little) === 0x0112) {
return onRotationFound(convertRotationToDegrees(view.getUint16(offset + i * 12 + 8, little)));
}
}
// tslint:disable-next-line:no-bitwise
} else if ((marker & 0xff00) !== 0xff00) {
break;
} else {
offset += view.getUint16(offset, false);
}
}
return onRotationFound(convertRotationToDegrees(-1));
};
reader.readAsArrayBuffer(imageFile);
}
/**
* Based off snippet here: https://github.com/mosch/react-avatar-editor/issues/123#issuecomment-354896008
* @param rotation converts the int into a degrees rotation.
*/
function convertRotationToDegrees(rotation: number): number {
let rotationInDegrees = 0;
switch (rotation) {
case 8:
rotationInDegrees = 270;
break;
case 6:
rotationInDegrees = 90;
break;
case 3:
rotationInDegrees = 180;
break;
default:
rotationInDegrees = 0;
}
return rotationInDegrees;
}ব্যবহার:
import { getOrientation } from './ImageUtils';
...
onDrop = (pics: any) => {
getOrientation(pics[0], rotationInDegrees => {
this.setState({ image: pics[0], rotate: rotationInDegrees });
});
};