gis多个图层地图用htmlcanvas截图获取不到

找到两个前端就能解决的方法，最后因为各种原因采用了方法二。

        方法一：

                找到地图上的全部点，然后在canvas上面重绘一次。

html2canvas(this.$refs.target, {

...

useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题

}).then((canvas) =>{

let cans = canvas.getContext("2d")

//批量地图重新打点 加载图片

document.querySelectorAll("#mapView_layers image").forEach((item) =>{

var obj = item

var x = item.getAttribute("x")

var y = item.getAttribute("y")

var itemWidth = item.getAttribute("width")

var itemHeight = item.getAttribute("height")

console.log("item", item, x, y)

if (width == 8) {

cans.drawImage(obj, x, y, itemWidth, itemHeight)

} else {

cans.drawImage(

obj,

x ,

y - 1 - itemHeight / 2 ,

itemWidth,

itemHeight

)

}

})

...

//下面是截图代码

})

登录后复制

因为本身目标dom的position定位问题，最后打的点可能会出现偏移。

所以还要给html2canvas加几个属性： x , y , scrollX , scrollY。保险起见，再加上两个参数 width 和 height 。

本人是后面chrome测着没问题，但是给小伙伴测试的时候，他用的360浏览器还有个xx浏览器有点问题。干脆参数全加上。

screenShot() {

let canvasBox = this.$refs.target

//获取目标div位置

var tPosition = canvasBox.getBoundingClientRect()

console.log("size", tPosition)

// 获取父级的宽高

const width = parseInt(window.getComputedStyle(canvasBox).width)

const height = parseInt(window.getComputedStyle(canvasBox).height)

html2canvas(this.$refs.target, {

width: width,

height: height,

x: 0,

y: 0,

scrollY: -tPosition.y,

scrollX: -tPosition.x,

useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题

}).then((canvas) =>{

...

})

}

登录后复制

要是项目的地图是不可移动的，基本到这里就可以了。

但是地图只要一挪动。。一个新的bug出现了。。。。。整个地图画线打点层的偏移量和截图之前不一样。。。。 截图后，画线层偏的比原地图还要远，打点却还在原位没动过。。

这个问题需要修正svg的偏移，然后这个标注点绘制的时候也要加上一个偏移量。

地图偏移的bug后面再讲。

         方法二：（最后采用）

                把svg中所有的<image>图片的href路径转换为base64编码格式。简单方便，不用考虑位置什么的问题，就是有些浏览器里面图片加载慢。。。setTimeout有时候要设置大一点。。

screenShot() {

let canvasBox = this.$refs.target

//获取目标div位置

var tPosition = canvasBox.getBoundingClientRect()

console.log("size", tPosition)

// 获取父级的宽高

const width = parseInt(window.getComputedStyle(canvasBox).width)

const height = parseInt(window.getComputedStyle(canvasBox).height)

//---------------------

//解决svg 内部image加载不了的问题,把image改为base64,配合setTimeout html2canvas使用

document.querySelectorAll("#mapView_layers image").forEach((item) =>{

console.log("item", item)

var img = item.getAttribute("xlink:href")

console.log("href", img)

var image = new Image()

image.crossOrigin = ""

image.src = img

image.onload = () =>{

var base64 = getBase64Image(image)

item.setAttribute("xlink:href", base64)//更改href属性

}

})

//图片地址转为base64编码

function getBase64Image(img) {

var canvas = document.createElement("canvas")

canvas.width = img.width

canvas.height = img.height

var ctx = canvas.getContext("2d")

ctx.drawImage(img, 0, 0, img.width, img.height)

var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase()

var dataURL = canvas.toDataURL("image/" + ext)

return dataURL

}

setTimeout(() =>{

html2canvas(this.$refs.target, {

width: width,

height: height,

x: 0,

y: 0,

scrollY: -tPosition.y,

scrollX: -tPosition.x,

useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题

}).then((canvas) =>{

...

})

}, 200)

}

登录后复制

webView.getSettings().setJavaScriptEnabled(true)

webView.getSettings().setBuiltInZoomControls(true)

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN)

webView.getSettings().setDefaultTextEncodingName("UTF-8")

---