Краткое изложение проблем рисования холста апплета WeChat

внешний интерфейс WeChat Апплет WeChat Canvas

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

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

Сначала создайте холст, а на холст нарисуйте картинку из интернета.

const ctx = wx.createCanvasContext('shareCanvas');
ctx.drawImage("https://img3.doubanio.com/view/photo/l/public/p2327709524.jpg", 0, 0, 300, 400);
ctx.draw();

Веб-изображение

На данный момент есть проблема: на симуляторе не сообщается об ошибке, а в тесте реальной машины ничего не рисуется. После некоторого поиска в Интернете я обнаружил, что canvas.drawImage апплета WeChat не поддерживает сетевые изображения, а только локальные изображения. Поэтому любое сетевое изображение нужно кэшировать локально, а затем отрисовывать, вызывая сохраненные локальные ресурсы через drawImage.Кэш можно реализовать через wx.getImageInfo и wx.downloadFile.На этот раз выбираются wx.getImageInfo и wx.downloadFile. Я не пробовал. Не уверен, что это возможно.

wx.getImageInfo({
  src: 'https://img3.doubanio.com/view/photo/l/public/p2327709524.jpg',
  success: function (res) {
    console.log(res.width)
    console.log(res.path)
  }
})

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

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

ctx.draw(true,setTimeout(function(){
    wx.canvasToTempFilePath({
        canvasId: 'shareCanvas',
        success: function(res){
            that.data.tmpPath = res.tempFilePath
        },
    })
},1000));

Проблема с авторизацией для сохранения изображения

После рисования сохраните нарисованную новую картинку локально с задержкой в ​​1 секунду, а затем сохраните ее в альбом мобильного телефона через wx.saveImageToPhotosAlbum(). На этом этапе возникает проблема с авторизацией, и необходимо учитывать совместимость после отказа в авторизации, то есть, что делать, если пользователь отклонит авторизацию? Обычная практика заключается в том, чтобы сначала получить настройки разрешений пользователя с помощью wx.getSetting().Если пользователь отказывается от разрешения на доступ к альбому, он может перейти на страницу настроек авторизации, чтобы попросить пользователя изменить информацию авторизации.

API настройки авторизации апплета устарело.Теперь можно только установить свойство open-type кнопки в openSetting в виде компонента и автоматически перейти на страницу настроек.Вообще говоря, это не так удобно как прежде. Если на странице уже есть кнопки, вы можете сначала установить свойство open-type в null, а затем установить его через setData при встрече с логикой, которую нужно перепрыгнуть.Это очень сложно и подвержено ошибкам, но может сохранить страницы или прыжки; другой Метод обработки такой, когда нет авторизации, сначала перейти на страницу описания, указав информацию, которую необходимо авторизовать, добавить на эту страницу кнопку открытого типа, нажать ее и перейти на страницу настроек, это раз мы используем первый метод:

result.gif

разрыв строки редактирования текста

Следующим шагом является проблема редактирования текста.Текст рисования Wechat не поддерживает автоматический перенос строк, поэтому мы можем только вручную рассчитать количество текстов, которые можно разместить в каждой строке для ручного переноса строк.Например текст плюс интервал составляет 10 пикселей, а целая строка может использовать 100 пикселей, то есть каждая строка может содержать только 10 символов, а 11-й символ рисуется на новой строке.

Разделить текст на массивы по 10 слов:

function canvasWorkBreak(maxWidth, fontSize, text) {
  const maxLength = maxWidth / fontSize
  const textLength = text.length
  let textRowArr = []
  let tmp = 0
  while (1) {
    textRowArr.push(text.substr(tmp, maxLength))
    tmp += maxLength
    if (tmp >= textLength) {
      return textRowArr
    }
  }
}

Нарисуйте массив построчно на холсте:

var height = 200
for (let item of ['我的舍利佛','搜房法拉']) {
    if (item !== 'a') {
        ctx.setFontSize(16);
        ctx.setFillStyle("#484a3d");
        ctx.fillText(item, 20, height);
        height += 50;
    }
}

Мультирисунок

После отрисовки каждого элемента весь процесс изготовления плаката пройден, но это не значит, что его можно использовать в реальном бизнесе. Первое, с чем мы сталкиваемся, это проблема качества генерации плакатов.Предполагая, что пиксель нашего мобильного телефона составляет 320 * 400, если мы хотим отобразить картинку на мобильном телефоне для предварительного просмотра, есть только два варианта:

  1. Нарисуйте плакат с разрешением меньше, чем разрешение телефона, чтобы телефон отображался полностью. Однако из-за небольшого разрешения таких плакатов это сильно повлияет на впечатления при загрузке в альбом мобильного телефона для совместного использования и просмотра на мобильном телефоне с большим экраном. Решение для этого подхода может состоять в том, чтобы нарисовать 2 изображения, скрыть большое изображение при предварительном просмотре на мобильном телефоне и отображать только маленькое изображение; сохранить большое изображение при загрузке.
  2. Нарисуйте большую картинку и войдите в режим предварительного просмотра мобильного телефона напрямую через previewImage, а картинку в режиме предварительного просмотра можно сохранить прямо на локальный. Недостатком этого решения является то, что пользовательский интерфейс не может быть разработан в режиме предварительного просмотра, а текст не может быть настроен при загрузке, так как запись для загрузки и сохранения очень скрыта, пользователи могут не найти ее.

Что делать, если изображение слишком длинное?

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

кнопка сверху

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

Суммировать

Рисование изображений должно быть очень простой и очень зрелой технологией. Другие фреймворки будут иметь соответствующие компоненты для обработки этих вещей, но рисование на холсте апплета WeChat можно охарактеризовать как «очень сложное в использовании». Я надеюсь, что команда WeChat сможет оптимизировать его как как можно скорее. .

вы можете нажать«Прочитай исходный текст»Получите исходный код.

Категории