Организуйте документ, найдите код экземпляра для H5, чтобы позвонить в камеру, чтобы сделать снимки и сжать изображение, и разобраться и упростить его.
фонНедавно я хочу сделать страницу H5.
Основные точки функции передней части:
Самый простой способ вызвать камеру - использовать свойство входного файла [камера]:
<input type = file capture = carera access = image/*> // camera <input type = file Accept = image/*> // Альбом
Этот метод совместимость все еще проблематична. Я искал много хороших решений в Интернете, и я мог только продолжать записывать. Сущность Сущность
Сжатие изображения Сжатие изображения используется для использования FileReader и <canvas> .
Объект FileReader позволяет веб -приложениям читать содержимое файла, хранящегося на компьютере, асинхронно, и использовать объект файла или Blob для указания файла или данных, которые вы хотите прочитать.
<Canvas> - это элемент HTML, который может использовать сценарии для рисования графики, которая может рисовать графику и простую анимацию.
Сжатие изображения должно сжать разрешение и качество изображения. изображения.
Var max_wh = 800; ; / Datairl, полученный через FilerEreader
Затем есть качество сжатия изображения. Динамически создайте тег <Canvas>, а затем сжатие изображения:
var Quality = 80; , 0, image.width, image.height);
Затем результат загрузки на сервер и отображения сервера, но все не так гладко. Сущность Сущность После сжатия мобильного телефона iOS изображение необъяснимо повернуто и продолжает решать проблему.
Решите вращение изображения iOSПервая цитата Exif.js и получите информацию о направлении фотографии через Exif.getData и Exif.gettg.
// файл получить exif.getData (file, function () {orientation = exif.gettg (file, 'orientation');});Значение каждого ориентационного значения соответствует мобильному телефону iPhone, чтобы сфотографироваться:
| Ориентация | описывать |
|---|---|
| 3 | Горизонтальная съемка экрана iPhone, в настоящее время кнопка «Домой» слева, изображение вращается на 180 градусов по сравнению с исходной позицией |
| 6 | iPhone стреляет вертикально, в настоящее время кнопка «Домой» ниже (направление мобильного телефона), и изображение может вращаться на 90 градусов по сравнению с исходной позицией. |
| 8 | iPhone снимает вертикальный экран, в настоящее время кнопка «Домой» выше, а изображение вращается на 90 градусов по часовой стрелке по сравнению с исходной позицией. |
Switch (Ориентация) {Случай 6: CASE 8: CVS.Width = Высота; В это время клавиши дома в левом случае 3: // 180 градусов в левый контекст. Транслат (ширина, высота); Нормально принять направление мобильного телефона) Случай 6: Контекст. 8: // Время по часовой стрелке.Затем загрузите изображение и обнаружите, что изображение под iOS нормальное.
Полный код приведен ниже:
$ ('input [type = file]'). /I.test (file.type) {exif.getData (file, function () {orientation = exif.gettag (file, 'Orientation');}); max_wh = 800; ; 80; .Height = ширина; 180 градусов влево вращать. Translate (ширина, высота); Телефон. Controclockpocke Context.rotate (-0,5 * Math.pi); Image/jpeg ', Вопрос/100); )}});Выше всего содержимое этой статьи.