業(yè)務(wù)場景是這樣的仿野，前端獲取某個部分截圖窃蹋，調(diào)用后端的圖片上傳服務(wù)卡啰，生成URL。這種業(yè)務(wù)場景大家應(yīng)該都遇到過警没，網(wǎng)上的方案（不準確的）也是一大把匈辱。
由于這個業(yè)務(wù)場景不需要加載外部資源，所以沒準備用htmlToCanvas杀迹。查閱各種blog亡脸，東拼西湊手寫了一個（失敗），后來找到了一個第三方庫dom-to-image浅碾，研究了它的源碼大州，成功寫了一個簡陋版的代碼。
dom轉(zhuǎn)化為圖片的流程
后端接口可以接受入?yún)⑹莃ase64的圖片垂谢。所以厦画，前端目標就是將dom轉(zhuǎn)化為png(base64格式)。根據(jù)網(wǎng)上的方案一般流程是這樣：
按照這種流程網(wǎng)上給出的代碼如下所示：
//此代碼僅在chrome測試下通過
function html2Svg (domStr) {
//創(chuàng)建模版字符串
var svgXML=
`<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<foreignObject width="100%" height="100%">${generateXML(html)}</foreignObject>
</svg>`
//利用Blob創(chuàng)建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) //函數(shù)定義在哪里根暑？這個函數(shù)要干什么？焚虱？給代碼都給不全的嗎购裙？
console.log(doc)
html = (new XMLSerializer).serializeToString(doc).replace('<!DOCTYPE html>','');
return html
}
首先懵逼的是代碼中generateXML函數(shù)的parseStyle在哪里?行吧，大佬也沒有寫鹃栽。估計不重要躏率，去掉。然后直接復(fù)制代碼使用民鼓，發(fā)現(xiàn)圖片出不來??薇芝。OK，又查閱了更多blog并沒有什么用丰嘉。所以我找了成熟的第三方庫dom-to-image研究這個庫是怎么實現(xiàn)dom轉(zhuǎn)化為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轉(zhuǎn)化為svg的重點是饮亏，將元素的所有樣式都放在style中(不然樣式展示不出來)耍贾。所以，需要循環(huán)遍歷每個子節(jié)點路幸，對每一個子節(jié)點進行同樣的處理荐开。
2.svg轉(zhuǎn)化為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對象轉(zhuǎn)化為canvas獲取dataurl简肴。這里需要注意的一個細節(jié)點晃听，是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編碼的圖片砰识，可以直接傳遞給后端能扒。當(dāng)然dom-to-image的處理比我寫的代碼精細很多很多。我只是讀過它的源碼之后辫狼，摘取的主流程自己寫了一遍初斑。至少，我這個代碼是可用的??予借。
這告訴我一個道理越平，blog（普通質(zhì)量的blog）只能是一個入口频蛔，真正解決方案在源碼灵迫。
參考文檔：
dom-to-image源碼地址： https://github.com/tsayen/dom-to-image
并沒有解決我的問題的blog:http://www.reibang.com/p/17d7e5ddf10a
