Про то, что я использовал html2canvas и чуть не убежал с ведром

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

предисловие

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

html2Canvas

        html2CanvasЭто относительно зрелая библиотека с открытым исходным кодом, которая может напрямую преобразовывать DOM в Canvas, избавляя от необходимости рисовать понемногу, используя собственный Canvas.

использовать

Возьмите использование в vue в качестве примера

// 安装依赖
npm install --save html2canvas

//使用
<template>
  <div>
    <div ref="canvas">html2Canvas</div>
    <button @click="toImg">生成图片</button>
  </div>
</template>
<script>
import html2canvas from "html2canvas"
export default {
  methods: {
    toImg() {
      html2canvas(this.$refs.canvas, {}).then(canvas => {
      })
    }
  }
}
</script>

Общие элементы конфигурации

параметр тип По умолчанию описывать
allowTaint boolean false Разрешить ли междоменным изображениям загрязнять холст
useCORS boolean false Загружать ли изображения между доменами
backgroundColor string #fff фоновый цвет
width number ширина элемента Клетка
height number высота элемента Клетка
scale number window.devicePixelRatio коэффициент масштабирования
scrollX number Позиция прокрутки элемента по оси X положение прокрутки по оси x после генерации
scrollY number Позиция прокрутки элемента по оси Y положение прокрутки по оси Y после генерации

html2Canvas рисует междоменные изображения

Во-первых, доменное имя онлайн-изображения должно быть настроено для обеспечения междоменного доступа;

Затем тег img должен добавить crossorigin="anonymous" и добавить метку времени после src, чтобы предотвратить его кеширование;

      <img
        crossorigin="true"
        class="share"
        :src="src+'?'+new Date().getTime()"
      >

Последнее — добавить элементы конфигурации {allowTaint: true, useCORS: true} в html2Canvas. useCORS: true имеет тот же эффект, что и указанный выше crossorigin="anonymous" (можно выбрать один из двух, если интересно, можете посмотреть исходный код. Этот пункт конфигурации влияет на то, добавлять crossorigin="anonymous" или нет "к картинке)

      html2canvas(this.$refs.canvas, {allowTaint: true,useCORS: true,}).then(canvas => {
          let imgUrl = canvas.toDataURL()
      })

Недостатки: поддерживает не все свойства css, подробности см. в официальной документации.Документация

Устранение неполадок

Поскольку журнал ошибок не был захвачен, наша проектная группа также протестировала основные модели. Предварительный анализ может быть связан с проблемой системы мобильного телефона и различных ресурсов сбора данных. Проблема, наконец, повторилась в системе ios13.4——— — Функция обратного вызова html2canvas не выполняется.

Решать проблему

Вопрос 1: Обратный вызов html2canvas в системе ios13.4.x не выполняется в браузере WeChat

Изучив различную информацию, вissuesВидел решение: Нужно откатить версию html2canvas до 1.0.0-rc.4.

Самый простой способ — напрямую изменить package.json на «html2canvas»: «1.0.0-rc.4», а затем переустановить зависимости. После перепаковки я увидел, что проблема решена, и я думал, что все хорошо.После развертывания на тест возникла вторая проблема————Кроссдоменная картинка версии ios14.x пустая

Вопрос 2: Версия html2canvas 1.0.0-rc.4 делает невозможным отрисовку междоменных картинок в системе ios14.x

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

Загрузите измененный исходный код html2canvas.js напрямую.ссылка для скачиванияПоместите его в каталог классов инструментов проекта и импортируйте как постоянный каталог.

// 引入
import html2canvas from '@/utils/html2canvas.js';

Вопрос 3: Страница будет обновлена ​​при создании системы ios15.1.

Проект стабильно работает уже месяц с момента последней доработки и релиза.В итоге после запуска нового продукта Apple я получил отзывы от пользователей,что Apple 13 не умеет генерировать постеры.На тот момент новый телефон только вышел , и я не смог найти соответствующую информацию Нет тестовой машины. Он может только выдерживать жалобы клиентов каждый день. Через несколько дней коллега, наконец, использовал новый мобильный телефон и увидел рассвет.Первое, что нужно было использовать новый мобильный телефон для отладки.После расследования проблема была обнаружена: если есть метка, которая может содержать текст в контейнер для отрисовки html2canvas, шрифт не задан, система добавитfont-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;Это приведет к обновлению страницы.

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

Суммировать

На этот раз я выявил некоторые из наиболее предвзятых проблем, с которыми придется столкнуться при использовании html2canvas, и специально разобрал их, надеясь, что другим не придется идти в обход.

Связанное чтение

В последние несколько дней, под руководством больших парней, была реализована новая схема генерации плакатов. Я чувствую, что это решение является самым простым и наиболее многоразовым.«Плакат, созданный Node+Puppeteer»

Категории