Phía trước ( 2015 thượng nửa năm ) gặp được một cái khó giải quyết vấn đề —— di động thượng chụp ảnh cũng thượng truyền hình ảnh, bởi vì quay chụp góc độ vấn đề, hình ảnh biểu hiện vấn đề, thực tế tình huống như sau đồ sở kỳ.


Đương khách hàng quay chụp khi lựa chọn góc độ vấn đề, ảnh chụp biểu hiện góc độ cũng sẽ có vấn đề, xem đồ phần mềm sẽ tự động giúp chúng ta làm cho thẳng, nhưng là ở hạng mục trung chúng ta liền cần thiết muốn chính mình đi làm cho thẳng, phía trước tìm được một cái về phương diện này tin tức văn chương, là Đằng Tấn kỹ sư viết:Xem xét
Phương pháp có điểm phức tạp, đầu tiên muốn đem chụp ảnh thu hoạch hình ảnh văn kiện chuyển thành 64 vị mã hóa, sau đó lại đem 64 vị mã hóa thay đổi thành cơ số hai, làm như vậy nguyên nhân là vì đi thu hoạch hình ảnh EXIF tin tức, EXIF trung bao hàm ảnh chụp tương quan tin tức, trong đó liền có một cái Orientation thuộc tính, xem tên đoán nghĩa, phiên dịch thành tiếng Trung chính là thiết bị phương hướng bái.
Đầu tiên, đem chụp ảnh hình ảnh thu hoạch. Số hiệu như sau: 1, HTML input nhãn phương pháp sáng tác:

<input type= "file" accept= "image/*;capture=camera" id= "captureFile" capture= "camera" />

2, trói định input change sự kiện, cũng ở bản cài đặt sáng tạo lâm thời hình ảnh đối tượng

xxx.onchange = function(event){
var files = event.target.files || event.dataTransfer.files; // thu hoạch sở lựa chọn sử dụng văn kiện tập hợp
var URL = window.URL || window.webkitURL; //URL đối tượng
var blob = URL.createObjectURL(files[0]);// sáng tạo blob đối tượng HTML5 tân tăng loại hình
// nơi này là chỉ lựa chọn sử dụng một văn kiện, nhiều văn kiện yêu cầu biến lịch
var img = new Image();
img.src = blob;
img.file = files[0];
// lâm thời hình ảnh sáng tạo xong
...
}

3, lợi dụng canvas được đến 64 vị mã hóa ( tiếp theo mặt trên dấu ba chấm )

img.onload = {
var canvas = document.createElement( "canvas" );
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext( "2d" );
ctx.drawImage(img, 0, 0);
}

Biên xem văn chương biên học làm, ta thiên a, không phải báo sai chính là không vận hành, làm js người đều biết, js là không thể thao tác văn kiện, đem hình ảnh tin tức chuyển thành 64 vị đảo còn dễ làm, chuyển thành cơ số hai thật sự làm khó ta, kia thiên văn chương thượng cũng nói được thực chung chung, quá khó làm, cơ hồ sắp từ bỏ.
Kết quả là liền đến độ nương chỗ đó tìm tòi nhìn xem có hay không thu hoạch hình ảnh EXIF tra kiện, tìm được rồi một cái jQuery.Exif cắm kiện, ví dụ:Xem xét
Cái này ví dụ giữa bày ra ảnh chụp một loạt tin tức, chụp ảnh thiết bị, kích cỡ, bạch cân bằng vv, vì thế liền download xuống dưới, thí nghiệm một phen. ** ① bình thường dựng chụp Orientation giá trị vì 6**


** ② bình thường hoành chụp Orientation giá trị vì 1**


** ③ nghịch hướng dựng chụp Orientation giá trị vì 8**


** ④ nghịch hướng hoành chụp Orientation giá trị vì 3**


Có jQuery.Exif trợ giúp, cái loại này vòng quanh còn muốn làm cơ số hai phương pháp ta liền không suy xét. php bên kia cũng có tiếp thu 64 vị mã hóa cũng sinh thành hình ảnh số hiệu, cũng vì ta công năng thực hiện phô hảo lộ. Như vậy kế tiếp muốn viết lại mặt trên đệ tam điểm, bởi vì muốn trước tiên đem hình ảnh quay cuồng hảo, mới có thể sinh thành 64 vị mã hóa. Tân 3, lợi dụng jQuery.Exif đem quay chụp tình huống phân loại cũng sáng tạo một cái vật chứa canvas ( tiếp theo mặt trên dấu ba chấm )

var w = img.width, // hình ảnh độ rộng
h = img.height, // hình ảnh độ cao
canvas = document.createElement('canvas'),
ctx,
exifs = $(img).exifLoad(function () {// vừa rồi sinh thành lâm thời hình ảnh
var or = exifs.exif( "Orientation" )[0]; // thu hoạch trước mặt quay chụp góc độ
// cái này giá trị là cái số tổ, cũng liền ý nghĩa nó sẽ có nghiêng quay chụp tham số, ở chỗ này ta này đây trên cùng thí dụ mẫu đồ bốn cái phương hướng làm tham khảo, có hứng thú ống có thể thâm nhập nghiên cứu hạ
if(or==1||or==3) { // hoành chụp
.. Hoành chụp..
}
else if(or==6||or==8) { // dựng chụp
.. Dựng chụp..
}
}

4.1, lợi dụng canvas đem hình ảnh quay cuồng ( tiếp theo mặt trên dấu ba chấm.. Hoành chụp.. )

canvas.width = w;
canvas.height = h;
ctx = canvas.getContext('2d');
if (or == 3) {
ctx.translate(canvas.width, canvas.height);
ctx.scale(-1, -1);
ctx.drawImage(img, canvas.width - w, canvas.height - h);
// nghịch hướng hoành chụp lợi dụng canvas đem hình ảnh quay cuồng đứng chổng ngược
} else {
ctx.drawImage(img, 0, 0);
// bình thường hoành chụp trực tiếp gia nhập đến canvas trung
}

4.2, lợi dụng canvas đem hình ảnh quay cuồng ( tiếp theo mặt trên dấu ba chấm.. Dựng chụp.. )

canvas.width = h;
canvas.height = w;
ctx = canvas.getContext('2d');
if (or == 6) {
ctx.rotate(90 * Math.PI / 180);
ctx.translate(0, -h);
// bình thường dựng chụp, đem hình ảnh thuận kim đồng hồ quay cuồng 90 độ
} else {
ctx.rotate(-90 * Math.PI / 180);
ctx.translate(-w, 0);
// nghịch hướng dựng chụp, đem hình ảnh nghịch kim đồng hồ quay cuồng 90 độ
}
ctx.drawImage(that, 0, 0, that.width, that.height, 0, 0, w, h);

5, thu hoạch 64 vị mã hóa, cũng sửa chữa input change sự kiện sở lựa chọn sử dụng đối tượng, đại công cáo thành!

var base64 = canvas.toDataURL('image/jpeg', quality);
img.file.base64Resize = base64; // đem tân 64 vị mã hóa, phú cấp lâm thời hình ảnh đối tượng
// bởi vì img.file = files[0]; ngươi sở lựa chọn văn kiện cũng đã bị sửa chữa
// lại sử dụng XMLHttpRequest đi thượng truyền cho ngươi tân hình ảnh

6, android hệ thống ( ta chính là 4.4.4 ) thu hoạch hình ảnh 64 vị mã hóa thất bại giải quyết như sau: Sử dụng JPEGEncoder cắm kiện thu hoạch

var encoder = new JPEGEncoder();
if (or == 1||or == 3) {
base64 = encoder.encode(ctx.getImageData(0, 0, w, h), quality * 100);
} else {
base64 = encoder.encode(ctx.getImageData(0, 0, h, w), quality * 100);
}

Càng nhiều kỹ càng tỉ mỉ nội dung thỉnh xem xét:Điểm đánh nơi này Lợi dụng cắm kiện: jQuery.Exif