Путь к тому, чтобы ступить на яму html2canvas

Node.js Vue.js

предисловие

Я слышал это раньшеhtml2canvasЭто яма, но беспомощная перед гнетом спроса на продукт, функция html to image должна быть реализована, и с тех пор он встал на путь заполнения ямы.К счастью, конечный эффект вполне удовлетворительный, так что продукт цикл запуска не пропущен.

Введение в html2canvas

html2canvasДля получения подробной информации, пожалуйста, нажмитездесьВид, по сути, просто проставленныйcanvasБудуHTMLСгенерированоDOMУзлы прорисовываются на холсте, а затем их можно преобразовать в картинки в соответствии с собственными потребностями.Поэтому в официальном документе также сказано, что конечный сгенерированный эффект не на 100% одинаков.Каждый должен быть к этому морально готов.Нет несмотря ни на что, небольшой недостаток уверен.

совместимость

PS:Браузер WeChatЭто не проблема использовать

Используйте html2canvas

Использование также очень простое, официальный сайт очень понятенкликните сюда

Ступая на яму

Почему в сгенерированных изображениях отсутствуют аватары WeChat или другие изображения?

На самом деле он включаетперекрестный доменПроблема, даже у полотна холста есть требования к полю картинки, так как же нам ее решить?

  1. html2canvasизэлемент конфигурацииСредняя конфигурацияallowTaint:trueилиuseCORS:true(два нельзя использовать вместе)
  2. добавлен тег imgcrossOrigin='anonymous'
  3. Конфигурация сервера изображенийAccess-Control-Allow-Originили использовать прокси

Третий шаг самый важный, если его не задать, первые два шага будут недействительны.

Сервер нужно настроитьAccess-Control-Allow-OriginИнформация, такая как PHP, добавляющая информацию заголовка ответа, подстановочный знак * означает, что разрешено любое доменное имя:

header("Access-Control-Allow-Origin: *");

Или укажите доменное имя:

header("Access-Control-Allow-Origin: www.zhangxinxu.com");

Но если мы не хотим беспокоить обслуживающий персонал, как мы можем междоменное взаимодействие во внешнем интерфейсе? Затем вы можете использовать прокси-плагины, такие как:html2canvas-proxy-nodejsилиsuperagent, Я используюsuperagent, вставьте пример кода:

const request = require('superagent') // 导入
const proxHost = 'https://thirdwx.qlogo.cn' // 指定跨域图片的地址
app.use('/proxy', function (req, res, next) {
  let urlPath = req.url
  console.log('urlPath', urlPath)
  urlPath = decodeURI(urlPath)
  if (!urlPath) {
    console.log('urlPath is null')
    return next()
  }
  console.log('proxy-request: /proxy->' + `${proxHost}${urlPath}`)
  const reqStream = request.get(`${proxHost}${urlPath}`)
  reqStream.on('error', function (err) {
    console.log('error', err)
  })
  console.log('------reqStream----')
  return reqStream.pipe(res)
})

затем, наконец, src моего изображения на страницеhttps://thirdwx.qlogo.cn/xxxизменить на/proxy/xxxСхема эффекта выглядит следующим образом:

2. Что делать, если сгенерированное изображение размыто и имеет неровные дефекты?

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

Расположение исходного кода:https://github.com/eKoopmans/html2canvas/tree/develop/dist

        let imgHeight = window.document.querySelector('.content').offsetHeight // 获取DOM高度
        let imgWidth = window.document.querySelector('.content').offsetWidth // 获取DOM宽度
        let scale = window.devicePixelRatio // 获取设备像素比
        html2canvas(window.document.querySelector('.content'), {
            useCORS: true,
            scale: scale,
            width: imgWidth,
            height: imgHeight
        }).then((canvas) => {
          window.document.querySelector('.content').remove()
          let elemImg = `<img src='${canvas.toDataURL('image/png')}' id='canvas-img' style='height: ${imgHeight}px;border-radius: 10px;width:${imgWidth}px'/>`
          window.document.querySelector('.container').innerHTML = elemImg
        })

Окончательное сгенерированное изображение является четким и ближайшимDOMкартинка

3. Если сгенерированное изображение содержит QR-код, не распознает ли WeChat длительное нажатие на изображение?

Эта проблема в основном возникает со страницами, использующими одностраничную структуру, такую ​​как VUE. благодарныйsundaypigпредложенное решение. Это очень просто, просто не используйте коммутацию маршрутизации, используйтеwindow.location.hrefПерейти прямо, чтобы обновить страницу

    location.href="www.abc.com/share/xxx"

PS: Эта проблема может решить ситуацию, когда QR-код иногда не распознается на всех страницах.

4. Большой ли интервал между текстом в сгенерированном изображении?

На данный момент это не может быть решено идеально, вы можете попробовать использовать свойства css:letter-spacingЧтобы установить интервал слова

Категории