Создание изображений на основе холста

внешний интерфейс сервер JavaScript Canvas

Поскольку стоимость привлечения клиентов в APP становится все выше и выше, многие продукты начали истощать трафик с wap-страницы, и наиболее распространенным способом является обмен, особенно в WeChat. Поэтому родились некоторые новые игровые процессы, такие как создание изображения плаката, которое пользователи могут сохранить или поделиться на других платформах.

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

холст к изображению

В настоящее время мобильные браузеры поддерживают холст очень хорошо, а холст может пройтиtoDataURLдля преобразования в изображение base64.

Некоторые библиотеки js на рынке, такие как:html2canvas,dom-to-image, его суть также черезtoDataURLпреобразовать в изображение. Но я лично не рекомендую использовать такого рода js библиотеку, потому что вам может понадобиться залатать много дыр, а результат может не оправдать ваших ожиданий, поэтому давайте нарисуем его честно и практично.

Изображение внешней ссылки

Самое главное и самое сложное это обработка изображений внешних цепочек.При рисовании на канве проблем не будет, а вот вызовtoDataURLПри использовании этого метода браузер сообщит об ошибке.

перекрестный домен

Изображения вне домена, которые вы запрашиваете, могут раскрыть вашу конфиденциальность, поэтому браузеры ограничивают такие запросы, чтобы защитить вашу конфиденциальность.

мы можем установитьcrossOriginдляanonymousЧтобы разрешить междоменное использование, браузер прикрепит заголовок запроса для этого изображения.Originинформацию, сообщите серверу статических ресурсов, пожалуйста, включите его в заголовок ответаAccess-Control-Allow-Methods,Access-Control-Allow-Origin, чтобы браузер разрешил это.

Но иногда установка crossOrigin все равно будет сообщать об ошибке, На самом деле дело не в том, что настройка не действует, а в том, что cdn кэширует результат ответа сервера, в котором часто нет двух вышеперечисленных полей. В настоящее время вы можете рассмотреть возможность добавления метки времени к ссылке на изображение.Для cdn это ресурс, который не был запрошен, поэтому он будет получать данные с исходного сервера.

Пример кода выглядит следующим образом:

var img = new Image()
img.crossOrigin = 'anonymous'
img.onload = function () {
  // 在图片加载完成后绘图，避免空白和断断续续加载
  ctx.drawImage(img, 0, 0)
}
img.src = 'https://xxxx' + '?' + (+new Date())

сохранить изображение

Тег a имеет атрибут загрузки, который может загружать указанный ресурс, но этот метод применим только к стороне ПК, а мобильный терминал в основном не поддерживается (Safari откроет веб-страницу base64, и там даже не будет ответ в WeChat, не говоря уже о многочисленных Android-устройствах).

Поскольку мы не можем активно сохранять изображения в браузере, нам нужно найти другой способ. После исследования мы обнаружили, что большинство мобильных браузеров теперь поддерживают длительное нажатие на изображения, чтобы вызвать раскрывающееся меню для сохранения, поэтому мы можем предлагать пользователям работать через копирайтинг, но его недостаток заключается в том, что нет API для вызова, то есть пользователю может быть предложено только спонтанно выполнить операцию сохранения при длительном нажатии, и мы не знаем, сохранил ли пользователь изображение.

Вывод в конце статьи

对于目前的产品需求，长按图片保存基本能够满足要求。 Therefore, the current practice is: draw a poster image through canvas, convert it to base64 image, create an img tag and render it to the view, and the text prompts the user to long press to save (only long press on the image is действительный).

Образец кода:

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')

canvas.width = 300
canvas.height = 300

// 画圆
ctx.fillStyle = 'yellow'
ctx.fillRect(0, 0, 50, 100)

ctx.strokeStyle = 'blue'
ctx.strokeRect(0, 120, 50, 100)

var img = new Image()
img.onload = () => {
  // 画图片
  ctx.drawImage(img, 60, 0)
  // toImage
  var dataImg = new Image()
  dataImg.src = canvas.toDataURL('image/png')
  document.body.appendChild(dataImg) // 长按图片保存
}
img.crossOrigin = 'anonymous'
img.src = 'https://nos.netease.com/easyread/fle/a0df1d4009c7a2ec5fee/1524215500140/avatar.png?' + (+new Date())
Категории