工作中遇到的问题解决方法

一、微信中输入框市区焦点时，键盘不会回弹

document.body.addEventListener('focusout', function () {
  let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
  window.scrollTo(0, Math.max(scrollHeight - 1, 0))
})

二、将一个div元素生成一个图片

<div id="back-code"></div> // 需要转化为图片的元素
<span @click="toImage"></span>

1.安装html2canvas包，import html2canvas from 'html2canvas'
2.编写转化的代码
toImage () {
  var canvas2 = document.createElement('canvas')
  let _canvas = document.getElementById('back-code')
  var w = parseInt(window.getComputedStyle(_canvas).width)
  var h = parseInt(window.getComputedStyle(_canvas).height)
  // 将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
  canvas2.width = w * 2
  canvas2.height = h * 2
  canvas2.style.width = w + 'px'
  canvas2.style.height = h + 'px'
  // 可以按照自己的需求，对context的参数修改,translate指的是偏移量
  var context = canvas2.getContext('2d')
  context.scale(2, 2)
  context.translate(0, 0)
  html2canvas(document.getElementById('back-code'), {
    type: 'view',
    canvas: canvas2,
    useCORS: true,
    allowTaint: false
  }).then(canvas => {
    // canvas转换成url, imgUrl是转化后的base64图片
    const imgUrl = canvas.toDataURL()
  })
}

三、保存图片到本地，有兼容性问题，暂时不用

// data是图片链接，filename是图片名字
saveFile (data, filename) {
  const saveLink = document.createElement('a')
  saveLink.href = data
  saveLink.download = filename
  const eventoBj = document.createEvent('MouseEvents')
  eventoBj.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
  saveLink.dispatchEvent(eventoBj)
}