js截图并上传到后端

业务场景是这样的，前端获取某个部分截图，调用后端的图片上传服务，生成URL。这种业务场景大家应该都遇到过，网上的方案（不准确的）也是一大把。
由于这个业务场景不需要加载外部资源，所以没准备用htmlToCanvas。查阅各种blog，东拼西凑手写了一个（失败），后来找到了一个第三方库dom-to-image，研究了它的源码，成功写了一个简陋版的代码。

dom转化为图片的流程

后端接口可以接受入参是base64的图片。所以，前端目标就是将dom转化为png(base64格式)。根据网上的方案一般流程是这样：

image.png

按照这种流程网上给出的代码如下所示：

//此代码仅在chrome测试下通过
function html2Svg (domStr) {  
            //创建模版字符串
            var svgXML=
            ``
            //利用Blob创建svg
            var svg = new Blob([svgXML], {type: 'image/svg+xml'})
            //利用DOMURL.createObjectURL取出对象
            var url = window.URL.createObjectURL(svg);
            var img = new Image()
            img.src = url
            return img
        }

// 由于`foreignObject`只能引用XML文档，
// 所以我们需要对DOM进行格式化
function generateXML (domStr) {  
        var doc = document.implementation.createHTMLDocument('');
            doc.write(html);
            doc.documentElement.setAttribute('xmlns', doc.documentElement.namespaceURI);
            doc = parseStyle(doc)  //函数定义在哪里？这个函数要干什么？？给代码都给不全的吗？
            console.log(doc)
            html = (new XMLSerializer).serializeToString(doc).replace('','');
            return html
}

首先懵逼的是代码中generateXML函数的parseStyle在哪里?行吧，大佬也没有写。估计不重要，去掉。然后直接复制代码使用，发现图片出不来。OK，又查阅了更多blog并没有什么用。所以我找了成熟的第三方库dom-to-image研究这个库是怎么实现dom转化为png的。

真正的解决方案

1.dom生成svg没有啥麻烦的，代码一般可以这样写：

export const asArray = arrayLike => {
  let array = []
  let length = arrayLike.length
  for (let i = 0; i < length; i++) array.push(arrayLike[i])
  return array
}
export const getNodeCSSText = node => {
  let comStyle = window.getComputedStyle(node)

  if (comStyle.cssText) {
    node.style.cssText = comStyle.cssText
  } else {
    asArray(comStyle).forEach(function(name) {
      node.style.setProperty(
        name,
        comStyle.getPropertyValue(name),
        comStyle.getPropertyPriority(name)
      )
    })
  }

  return node
}

export const travelEveryNode = parentNode => {
  let children = asArray(parentNode.childNodes)

  if (children.length === 0) {
    if (parentNode instanceof Element) {
      getNodeCSSText(parentNode)
    }

    return parentNode
  }

  children.forEach(child => {
    travelEveryNode(child)
  })

  if (parentNode instanceof Element) {
    getNodeCSSText(parentNode)
  }

  return parentNode
}

export const toSvg = domId => {
  let dom = document.getElementById(domId)
  dom.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')

  travelEveryNode(dom)
  let wid = width(dom)
  let he = height(dom)

  let xml = new XMLSerializer().serializeToString(dom)

  let svgDom = ``

  return `data:image/svg+xml;charset=utf-8,${svgDom}`
}

从dom转化为svg的重点是，将元素的所有样式都放在style中(不然样式展示不出来)。所以，需要循环遍历每个子节点，对每一个子节点进行同样的处理。

2.svg转化为image对象
要image对象渲染完成，才能从canvas中获取dataurl.所以这一步要返回promise对象

export const svgToImage = svgString => {
  return new Promise(function(resolve, reject) {
    let image = new Image()
    image.onload = function() {
      resolve(image)
    }
    image.onerror = reject
    image.src = svgString
  })
}

3.image对象转化为canvas获取dataurl。这里需要注意的一个细节点，是canvas的长度和宽度要和被截图的元素保持一致。

export const width = node => {
  let leftBorder = px(node, 'border-left-width')
  let rightBorder = px(node, 'border-right-width')
  return node.scrollWidth + leftBorder + rightBorder
}

export const height = node => {
  let topBorder = px(node, 'border-top-width')
  let bottomBorder = px(node, 'border-bottom-width')
  return node.scrollHeight + topBorder + bottomBorder
}

export const demo = async domId => {
  let svg = toSvg(domId)

  let dom = document.getElementById(domId)
  let wid = width(dom)
  let he = height(dom)
  svgToImage(svg).then(img => {
    setTimeout(() => {
      getCanvasUrl(img, wid, he)
    }, 1000)
  })

  // return await upload(url, true)
}


export const getCanvasUrl = (img, wid, he) => {
  let canvas = document.createElement('canvas')

  canvas.width = wid
  canvas.height = he
  canvas.getContext('2d').drawImage(img, 0, 0)
  return canvas.toDataURL()
}

getCanvasUrl获取的是base64编码的图片，可以直接传递给后端。当然dom-to-image的处理比我写的代码精细很多很多。我只是读过它的源码之后，摘取的主流程自己写了一遍。至少，我这个代码是可用的。
这告诉我一个道理，blog（普通质量的blog）只能是一个入口，真正解决方案在源码。

参考文档：
dom-to-image源码地址： https://github.com/tsayen/dom-to-image
并没有解决我的问题的blog:https://www.jianshu.com/p/17d7e5ddf10a