Используйте vue для создания HTML-страниц с изображениями.

внешний интерфейс Vue.js
Используйте vue для создания HTML-страниц с изображениями.

задний план

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

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

Первое впечатление, что это требование - функция сохранения картинок.В то время это было не так просто, разобравшись:

  1. Динамически генерировать QR-код с логотипом
  2. Преобразование html-части всего плаката в изображение
  3. Сохранить картинку в альбом телефона

Сгенерировать QR-код с логотипом

использоватьvue_qrcodesСгенерировать QR-код с логотипом

Установить

npm install vue_qrcodes -- save

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

<!--部分html代码-->
<qrcode :url="qrcodeUrl"
        :iconurl="iconurl"
        :wid="298"
        :hei="278"
        :imgwid="100"
        :imghei="100">
</qrcode>

// 部分js代码
import qrcode from 'vue_qrcodes'
//...省略其他代码
components: {
    qrcode
 }

Возникает проблема: QR-код появляется, но размер QR-кода и логотипа не тот, который вы хотите, и его нельзя адаптировать. Затем нам нужно сбросить стиль QR-кода и логотипа.

.logoimg {
      height: 100px !important;
      width: 100px !important;
      margin-top: -50px !important;
      margin-left: -50px !important;
    }
#qrcode {
      margin-top: 20px;
      img {
        height: 278px !important;
        width: 298px !important;
      }
    }

Преобразование html в изображение base64

Выбираю компоненты при конвертации html в canvashtml2canvas

yarn add html2canvas

import html2canvas from 'html2canvas'

Чтобы на странице не было заставки, я использовал два элемента div: один для хранения исходного dom, один для хранения сгенерированного изображения холста и v-if для управления отображаемым элементом.

функция вызова js:

htmlToCanvas() {
  html2canvas(this.$refs.bill, {})
  .then((canvas) => {
    let imageUrl = canvas.toDataURL('image/png'); // 将canvas转成base64图片格式
    this.canvasImageUrl = imageUrl;
    this.isDom = false;
  });
}
// 二维码地址
this.qrcodeUrl = data.data.inviteCodeAddress
// 调用html转化canvas函数
this.htmlToCanvas();

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

Страница конвертируется в картинку, но QR-код не отображается, а консоль сообщает об ошибке:

За исключением других частей QR-кода, которые были преобразованы в изображения, QR-код не отображается по двум возможным причинам:

  • QR-код не был загружен во время конвертации

  • Сообщается об ошибке во время преобразования QR-кода

Пробовал следующийОтметить сначала

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

// 二维码地址
this.qrcodeUrl = data.data.inviteCodeAddress 
this.$nextTick(() => {
    // 跳用html转化canvas函数
    this.htmlToCanvas(); 
 })

Выяснилось, что QR-код вышел, но размер QR-кода был неправильным, а консоль все равно сообщала об ошибке. Хотя проблема полностью не решена, QR-код появляется. Можно доказать, что причина, по которой QR-код не отображается, заключается в том, что QR-код не загружается во время конвертации.

Попробуйте снова использовать setTimeout

Используйте setTimeout, чтобы отложить выполнение обратного вызова до истечения указанного времени.

// 二维码地址
this.qrcodeUrl = data.data.inviteCodeAddress 
setTimeout(()=>{
    // 调用html转化canvas函数
    this.htmlToCanvas(); 
}, 200)

Проверьте эффект:

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

Страница нормальная, консоль не выдает ошибку, но логотип не отображается.

Адрес логотипа:

iconurl: 'https://static.daojia.com/assets/project/tosimple-pic/LOGO_1576564983633.png',

Проект запускается локально, возможны междоменные проблемы.

htmlToCanvas() {
      html2canvas(this.$refs.bill, {
        useCORS: true // 解决图片跨域问题
      }).then((canvas) => {
        // 将canvas转成base64图片格式
        let imageUrl = canvas.toDataURL('image/png'); 
        this.canvasImageUrl = imageUrl;
        this.isDom = false;
      }).catch((e) => console.log(e));
    }

На данный момент html успешно преобразован в изображение.

Сохраните картинку себе на телефон

Сначала попробовал скачать образ downloadImage в JS-SDK

После различных попыток это не удалось.

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

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

Примечание. Если у вас есть лучший способ сохранить фотографии в альбом мобильного телефона, оставьте сообщение.

Наконец

В этой статье представлен процесс реализации сохранения плакатов в альбомы мобильных телефонов. В некоторых ссылках еще есть возможности для оптимизации. Критика и исправления приветствуются для общего прогресса.

Подписывайтесь на нас

公众号前端论道

Категории