Chúng tôi đang phát triển một ứng dụng PhoneGap trong số các tính năng cốt lõi đang được phát triển, nó cũng có phần hồ sơ người dùng. Trong màn hình/phần đó, chúng tôi cho phép người dùng cập nhật các chi tiết khác nhau bao gồm hình ảnh hồ sơ của họ. Hình ảnh hồ sơ có thể được chụp bằng máy ảnh (hoạt động hoàn hảo) hoặc được chọn từ thư viện ảnh của người dùng. Đây là nơi mà vấn đề của chúng tôi nằm.Vấn đề xoay hình ảnh PhoneGap sau khi chuyển đổi
Chúng tôi đang tải ảnh từ máy ảnh của người dùng hoặc thư viện ảnh bằng chức năng navigator.camera.getPicture.
Sau đó, chúng tôi tạo một Image() mới và đặt số imageURI trả lại bằng khoảng cách điện thoại làm hình ảnh src. Trong hàm onload của hình ảnh, chúng tôi vẽ hình ảnh vào ngữ cảnh canvas để thay đổi kích thước và cắt hình ảnh thành hình vuông.
Chúng tôi đã có một vấn đề với các hình ảnh, nơi khi vẽ các hình ảnh đã được ép nhưng chúng tôi đã cố định vấn đề đó với sự giúp đỡ của bài viết này (HTML5 Canvas drawImage ratio bug iOS)
Vấn đề: Tất cả mọi thứ hoạt động tốt khi chúng ta có được hình ảnh trực tiếp từ máy ảnh nhưng khi chúng tôi đặt destinationType thành navigator.camera.PictureSourceType.SAVEDPHOTOALBUM hoặc navigator.camera.PictureSourceType.PHOTOLIBRARY hình ảnh xuất hiện được xoay không chính xác.
correctOrientationlà đặt thành true.
Chúng tôi đang sử dụng Cordova 2,8
Chúng tôi chỉ có thể nhận được dữ liệu hình ảnh khi designationType là FILE_URI cho CAMERA và NATIVE_URI cho PHOTOLIBRARY. Sự khác biệt này có liên quan gì đến vấn đề của chúng ta không?
Mã này là:
navigator.camera.getPicture(function (imageURI) {
context = // 2d context from canvas object in the DOM
base_image = new Image();
base_image.onload = function() {
var x = 0;
var y = 0;
var w = 144;
var h = 144;
... // some size and offset calculations
var ratio = ... // calculate a ratio based off this question https://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios
context.drawImage(base_image, x, y, base_image.width, base_image.height, 0, 0, w, h/ratio);
url = context.canvas.toDataURL().toString();
DOMImage.src = url
}
base_image.src = imageURI;
}, function (error) {
enyo.log("Error " + error);
}, {
quality : 49,
targetWidth: 114,
targetHeight: 114,
sourceType: sourceType,
encodingType: Camera.EncodingType.JPEG,
destinationType: destinationType,
correctOrientation: true,
saveToPhotoAlbum: false
});
Bất cứ lời khuyên được nhiều đánh giá cao.
Bạn đã xác định điều này? Tôi đang đối mặt với cùng một vấn đề, cordova 2.9 –