Заставьте iOS загрузить изображение из HTML5 Canvas (используя чистый JavaScript) - PullRequest
Новая
       23

Заставьте iOS загрузить изображение из HTML5 Canvas (используя чистый JavaScript)

0 голосов
/ 10 мая 2018

Этот вопрос задавался ранее, и общий ответ таков: это невозможно сделать на iOS. Однако этим вопросам уже несколько лет, и вполне возможно, что был разработан обходной путь или что теперь есть способ сделать это.

У меня есть работающий чистый графический редактор JavaScript, который не позволит завершить последний шаг редактирования, сохраняя отредактированное изображение, в iOS. Трудно поверить, что это невозможно . Итак, простой вопрос: есть ли способ загрузить изображение холста на мобильное устройство пользователя iOS?

РЕДАКТИРОВАТЬ: я пытался интегрировать первый ответ ниже в мой код, но у меня, очевидно, неверный синтаксис. Вот уже существующий код с новым кодом в блоке if (isIOS ()) .... Код переносит меня на новую страницу с URL «доменное имя / iString» и генерирует 404, поскольку iString, очевидно, не существует в качестве документа. 

// Save a JPG (with quality setting) or full quality PNG to user's drive. 

function fileSave()
{

  var canvas = document.getElementById('cSave');

  if (document.getElementById("png").checked == true)
  {
    var quality = null;     
    var format = "image/png"; 
    var name = "new_image.png"; 
  }

  if (document.getElementById("jpg").checked == true)
  {
    var format = "image/jpeg";  
    var quality = Number(document.getElementById("quality").value) / 100; 
    var name = "new_image.jpg"
  }

  canvas.toBlob(function(blob) // Send canvas to blob and download blob 
  {
    const anchor = document.createElement('a')
    const url = URL.createObjectURL(blob)
    anchor.href = url
    anchor.download = name, 
    document.body.appendChild(anchor)

    // begin new code block 
    if (isIOS()) 
    {
    var iString = btoa(blob); 
    // data:[<mediatype>][;base64],<data>
    iString = "data: " + format + ";base64," + iString; 
    document.getElementById("iOS").innerHTML = '<a href="iString">click me</a>';   
    }
    // end new code block 

    anchor.click()
    document.body.removeChild(anchor)
    URL.revokeObjectURL(url);   
    }, format, quality)
}

РЕДАКТИРОВАТЬ: я получил его для работы в Firefox (Windows 7). Как и ожидалось, это не работает в Chrome («Не разрешено перемещать верхний фрейм к URL-адресу данных»). 

if (!isIOS()) // note the ! for desktop testing 
{
var iString = canvas.toDataURL(); 
document.getElementById("iOS").innerHTML = '<a href="' + iString + '">click me</a>';   
}

Но когда я удаляю «!», Ожидая, что он будет работать в iOS, он не будет работать ни в одном браузере (включая Firefox). Приложение для iPhone «Inspect» возвращает ошибку «canvas.toBlob () - это не функция», чего можно ожидать в Safari («Inspect» может использовать Safari), но у меня все еще нет синтаксиса для других браузеров) в iOS

ПОСЛЕДНИЕ РЕДАКТИРОВАТЬ НА ВЕЧЕР:

Это открывает новое окно в iOS Firefox, но там нет изображения, просто небольшая (возможно, 6 пикселей х 6 пикселей) пустая коробка. 

var canvas = document.getElementById('cSave');
var convert = btoa(canvas); 
convert = 'data:image/jpeg;base64,' + convert;   
document.getElementById("iOS").innerHTML = '<a href="' + convert + '" target="_blank">click me</a>';

Кроме того, строка base64 отображается недостаточно долго. 

data:image/jpeg%3Bbase64,W29iamVjdCBIVE1MQ2FudmFzRWxlbWVudF0=

Вкл. https://codebeautify.org/base64-to-image-converter это выглядит как поле с маленьким значком разбитого изображения

Спасибо

PS: По-прежнему возникают проблемы, но "Оттуда они могут использовать один из двух системных диалогов для сохранения изображения." Я не вижу доступных системных диалогов на моем iPhone с помощью iOS 10.2.1 ,

1 Ответ

0 голосов
/ 10 мая 2018

Несмотря на то, что невозможно сохранить изображение непосредственно на рулон камеры из веб-приложения, большинство пользователей знакомы с сохранением изображений самостоятельно.

Когда пользователь желает сохранить свое изображение, вы можете создать data uri и открыть его в новой вкладке. Оттуда они могут использовать один из двух системных диалогов для сохранения изображения.

...