Сводка создания моментальных снимков общего доступа к мобильной странице

задняя часть внешний интерфейс WeChat CSS
Сводка создания моментальных снимков общего доступа к мобильной странице

Добро пожаловать в команду веб-разработчиков Futu, php, front-end нуждается в вас.несоответствие

В прошлом я часто получал от друзей обмен фотографиями с информацией о странице (обмен фотографиями) в WeChat.По сравнению с обычным структурированным обменом (обмен ссылками) этот метод обмена легче выразить содержание страницы. Продукт компании «Детская обувь» также хочет генерировать общую картинку (с пользовательским QR-кодом) на странице события, чтобы помочь пользователям делиться и распространять.

Когда мы впервые начали использовать эту функцию, мы создали эксклюзивное совместно используемое изображение из серверной части на основе информации пользователя, загрузили изображение в библиотеку изображений и получили ссылку на изображение; используется на страницеimgНа этикетке отображается это изображение, сопровождаемое какой-либо направляющей копией, напоминающей пользователю о «длительном нажатии, чтобы сохранить и поделиться». Однако, учитывая нагрузку на сервер, хранилище и другие проблемы, мы будем выполнять операцию создания общего образа только один раз для пользователя (когда пользователь снова получает общий образ, возвращается изображение, сгенерированное в первый раз), то есть , вся активность. В течение этого периода содержимое общих изображений, созданных одним пользователем, не будет изменено. Таким образом, некоторые динамически изменяющиеся данные не могут быть отображены на общем изображении, а содержимое, которое может быть отображено на общем изображении, сильно ограничено.

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

простая идея

БудуhtmlПеревести вimage,(илиdomПеременаcanvasповернуть сноваimage), который будет производитьimageСсылка (в основном Base64) размещена на страницеimgВ атрибуте src элемента отображается соответствующая подсказка (например, длительное нажатие для сохранения изображения), чтобы помочь пользователю поделиться/сохранить изображение.

все упоминалиhtmlПеременаcanvasилиimageЕсть две основные библиотеки:

демонстрационный тест

простой пример

В html-коде он в основном включает html-код общего снимка, реконструированного в соответствии с исходной рукописью общего снимка, заданного дизайном детской обуви, и html-код сгенерированного изображения для размещения.imgконтейнер.


<div class="actShareBox">
  我是html！！
  <!-- 要用于生成快照的html代码 -->
  <div class="j_snapshot snapshot">
  </div>
</div>
<div class="j_snapshot_img_box actShareImgBox">
    我是dom-to-image生成的图片
    <!-- 用于展示dom-to-image生成的图片 -->
    <img src="" class="j_snapshot_img">
</div>
<div class="j_snapshot_img_box actShareImgBox">
    我是html2canvas生成的图片
    <!-- 用于展示html2canvas生成的图片 -->
    <img src="" class="j_snapshot_img2">
</div>

В коде js API двух библиотек в основном вызываются для создания картинок или холстов.

// $snapshot为分享快照内容的dom元素，
// $snapshotImg为要放domtoimage生成的图片的img元素
// $snapshotImg2为要放html2canvas生成的图片的img元素
var $snapshot = document.querySelector('.j_snapshot');
var $snapshotImg = document.querySelector('.j_snapshot_img');
var $snapshotImg2 = document.querySelector('.j_snapshot_img2');

// domtoimage生成jpg的方法（这个库还有其他的方法）
domtoimage.toJpeg($snapshot,{
    quality: 1
}).then(function (dataUrl) {
    // 直接生成了base64的url
    $snapshotImg.src = dataUrl;
}).catch(function (error) {
    console.error('oops, something went wrong!', error);
});

// html2canvas 生成canvas
html2canvas($snapshot,{
    // useCORS: true, // 允许图片跨域
    backgroundColor: null,
    logging: false,
}).then(function(canvas) {
    // 'image/jpeg', 1.0
    // 再利用canvas的toDataURL 方法，将canvas转为图片
    var dataURL = canvas.toDataURL();
    $snapshotImg2.src = dataURL;
}, function(err) {
    console.error('oops, something went wrong!', err);
});

На фото выше...

  • Изображения, созданные в Android WeChat (Xiaomi note3)

    在android微信中生成的图片

  • Картинки, сгенерированные в ios WeChat (iphone6p)

    在ios微信中生成的图片

Из приведенных выше шести рисунков видно, что

  • Судя по степени восстановления сгенерированного содержимого изображения, будь то в ios или android,html2canvasможет полностью генерировать контент на странице html с общим изображением иdom-to-imageСреди сгенерированных картинок сгенерированная ios - это неполная картинка (картинки на всех html страницах не могут нормально отображаться), а также есть некоторые картинки, которые невозможно отобразить на android, и есть проблема неупорядоченных стилей. (Этот раунд,html2canvasпобедить)

  • С точки зрения наглядности присмотритесь к картинке в середине сравнения (dom-to-imageСгенерированные изображения) и справа от диаграммы (html2canvasсгенерированная картинка), видно, что четкость текста и картинки img на правой картинке намного выше, чем у левой картинки (четкость, сгенерированная фоновой картинкой в ​​html, обе не очень) (этот раунд , ещеhtml2canvasпобедить)

так~, по-прежнему использоватьhtml2canvasБар.

возникшие проблемы

но использоватьhtml2canvasПри создании общих изображений все еще возникают некоторые проблемы, поэтому вот некоторые из них.
Когда мы впервые начали делиться снимками с рефакторингом html/css, мы использовали обычный текст,imgИзображение метки, фоновое изображение css, масштабирование изображения/текста.
Образ, сгенерированный впервые, очень неожиданный, и эффект сгенерированного изображения сильно отличается от исходного изображения. Только одно за другим расследование, найти проблему, решить проблему.

1. Междоменные изображения не могут отображаться

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

решить:
Шаг 1: Поместитеhtml2canvasв настройках параметров вuseCORSсвойство изменено наtrue,Сделатьhtml2canvasПринять для обработки ресурсов из разных источников.
Шаг 2. Разрешите междоменное использование ресурса изображения (добавьте в заголовок ответаAccess-Control-Allow-Origin: *)
Это будет отображать междоменные изображения~

Сторонняя междоменная обработка изображений:
Разрешить междоменные изображения для ваших собственных изображений относительно легко, но если вы используете стороннее изображение, которому не разрешено междоменное изображение (например, аватары WeChat), нам нужно выполнить дополнительную обработку в это время, чтобы изменить изображение, чтобы разрешить междоменные изображения.

Посмотрите, что делают другие: вПрокси для реализации сторонних образов на сервере(превратите доменное имя стороннего изображения в свое собственное доменное имя), а затем разрешите междоменное использование ресурсов вашего собственного доменного имени.

Изменить серверnginxКонфигурация, что ли, не очень (трус =.=).

Поэтому мы перешли на другой путь в нашей деятельности.

Бэкэнд возвращает не аватар WeChat напрямую, а ссылку, которая может соответствовать соответствующему аватару WeChat (ресурс этой ссылки допускает междоменный доступ).Когда бэкенд получает запрос на эту ссылку, он извлекает информацию об аватаре WeChat и возвращает его в интерфейс.Информация об изображении для аватара. [Под бэкендом здесь подразумевается бэкенд-код в действии, который совпадает с приведенным выше.nginxКонфигурация не является практикой]

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

2. Сгенерированные общие изображения нечеткие

Неоднозначность здесь относится к двум аспектам:

  1. Поделитесь всей картинойОтсутствие ясности
  2. Изображение с исходной страницы обменаНедостаточная четкость итогового общего изображения

Общая общая картина недостаточно ясна для решения проблемы:
Проблема недостаточной четкости здесь вызвана тем, что реальных физических пикселей картинки недостаточно, здесь мой метод обработки модифицирован.html2canvasизscaleсвойство, которое увеличивает масштабирование при рисовании для повышения четкости

html2canvas($snapshot, {
    useCORS: true,
    scale: window.devicePixelRatio*2 // 默认值是window.devicePixelRatio
    backgroundColor: null,
    logging: false
});

Решите проблему, из-за которой изображение на исходной странице обмена недостаточно четкое на сгенерированном изображении.

Мы разделяем страницу, чтобы быть полезными двумя способами показать фотографии:

  1. использоватьimgЭлементы этикетки импортируют изображения
  2. Вставьте изображение, используя фоновое изображение в элементе

Однако из-за эффекта фактического сгенерированного изображения было обнаружено, что часть страницы, которая использует фоновое изображение, будет особенно нечеткой в ​​общем снимке, и в нижней части фонового изображения будут небольшие шипы, которые не на исходной странице (как показано на фоновом изображении ниже).На картинке есть аналогичная тонкая белая линия под логотипом Futu в сгенерированном изображении, но не на исходной странице).

при использованииimgЭто не тот случай, когда элемент тега вводит изображение.

  • масштабированное фоновое изображение

    缩放过的背景图片

  • изображение элемента img

    img元素的图片

Как видно из рисунка, скриншоты страниц двух рисунков (верхняя часть рисунка) демонстрируют одинаковую четкость, но черезhtml2canvsПосле генерации картинки видно, что резкость фоновой картинки значительно хуже, а вокруг нее какие-то шлаковые пятна.

Итак: если вы используете изображения для обмена снимками, попробуйте использовать ихimgМетки, а не фоновые изображения, чтобы обеспечить четкость общих изображений.

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

Подумав об этом, если вы используете карту спрайтов, вы также можете изменить ее, чтобы использоватьimgЭтикетки показывают:

<span class="emoji emoji01"><img src="/emoji.png" alt=""></span>

<style>
.emoji{
    width: 10px;
    height: 10px;
    /*固定大小，超过的隐藏*/
    overflow: hidden;
    display: block;
    position: relative;
}
.emoji.emoji01 img{
    position: absolute;
    /*使用top,left 偏移img图片使之展示对应的位置*/
    top: 0;
    left: -20px;
}
</style>

3.imgпара картинокtransformСовместимость атрибутов не очень хорошая

html2canvasВ официальной документации у некоторых совместимость не очень.css-свойство, поэтому проверьте это сами, если вы не можете поддерживать атрибуты, просто измените способ их написания~.

встречающийся в событии,imgв элементеtransformреализация не очень.

В примере я хочу отобразить изображение в центре, поэтому дайтеimgэлемент добавил следующееcss:

img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}

Но на самом деле получилось так....

img使用transform问题

Суммировать

использоватьhtml2canvas, Можно преобразовать элементы страницы в изображения для создания моментальных снимков для общего доступа, но при рефакторинге страницы с общим изображением максимально используйте общие методы и свойства css и используйте меньше фоновых изображений, чтобы создать четкое изображение. Хорошая картинка~.

оригинал:На фото IM/статья/Пока горячо…

Автор: Синтия

Категории