业务场景是这样的，前端获取某个部分截图，调用后端的图片上传服务，生成URL。这种业务场景大家应该都遇到过，网上的方案（不准确的）也是一大把。
由于这个业务场景不需要加载外部资源，所以没准备用htmlToCanvas。查阅各种blog，东拼西凑手写了一个（失败），后来找到了一个第三方库dom-to-image，研究了它的源码，成功写了一个简陋版的代码。
dom转化为图片的流程
后端接口可以接受入参是base64的图片。所以，前端目标就是将dom转化为png(base64格式)。根据网上的方案一般流程是这样：
按照这种流程网上给出的代码如下所示：
//此代码仅在chrome测试下通过
function html2Svg (domStr) {
//创建模版字符串
var svgXML=
`<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<foreignObject width="100%" height="100%">${generateXML(html)}</foreignObject>
</svg>`
//利用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('<!DOCTYPE html>','');
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 = `<svg xmlns="http://www.w3.org/2000/svg" width='${wid}' height='${he}'>
<foreignObject x="0" y="0" width="100%" height="100%">
${xml}
</foreignObject>
</svg>`
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
