使用CanvasRenderingContext2D.drawImage()拼接截图

概述:Canvas 2D API 的 CanvasRenderingContext2D.drawImage() 方法提供了多种在画布(Canvas)上绘制图像的方式。

前景提示:接到一个需求在argis地图上截图并下载到本地;本身是一个很普通的需求,但是arcgis支持的截图只能截取到地图,地图上的图例或者其他的东西都不能截取;so,就换成html2canvs 截图工具但是,html2canvs只能截取非地图的部分!于是就想到了这个办法:拿到两张图拼接到一起!!

主要用到:

argis:takeScreenshot()

html2canvs

CanvasRenderingContext2D.drawImage()

下面是主要代码:

javascript 复制代码
import html2canvas from 'html2canvas'


async function combineMapAndLegend (mapView: __esri.View) {
  const mapData = await captureMap(mapView)
  const legendCanvas = await captureLegend()

  const finalCanvas = document.createElement('canvas')
  const finalCtx = finalCanvas.getContext('2d')
  const mapImage = new Image()
  mapImage.src = mapData.dataUrl
  await new Promise((resolve) => {
    mapImage.onload = resolve
  })
  finalCanvas.width = mapImage.width
  finalCanvas.height = mapImage.height
  // 绘制地图截图
  finalCtx.drawImage(mapImage, 0, 0)
  // 计算图例在右下角的位置 并留点边距10
  const legendX = mapImage.width - (legendCanvas.width / 2 + 10)
  const legendY = mapImage.height - (legendCanvas.height / 2 + 10)
  const dWidth = legendCanvas.width / 2
  const dHeight = legendCanvas.height / 2
  // 绘制图例
  finalCtx.drawImage(legendCanvas, legendX, legendY, dWidth, dHeight)
  finalCanvas.toBlob((blob) => {
    if (blob) {
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = '地图截图.png'
      a.click()
      URL.revokeObjectURL(url)
    }
  })
  return finalCanvas
}

async function captureMap (mapView: __esri.View) {
  try {
    const res = await mapView.takeScreenshot()
    return res
  }
  catch (error) {
    console.error('截图失败:', error)
  }
}

async function captureLegend () {
  let legendRef = document.querySelector('.legend-wrap')
  if (!legendRef) {
    legendRef = document.querySelector('.esri-legend')
  }
  try {
    const canvas = await html2canvas(legendRef, {
      backgroundColor: null,
      scale: 2,
    })
    return canvas
  }
  catch (error) {
    console.error('截图失败:', error)
  }
}

export default  combineMapAndLegend
相关推荐
JavaDog程序狗1 分钟前
【软件环境】Windows安装NVM
前端·node.js
黑土豆4 分钟前
为什么我要搞一个Markdown导入组件?说出来你可能不信...
前端·javascript·markdown
前端小巷子7 分钟前
Vue 2 响应式系统
前端·vue.js·面试
典学长编程22 分钟前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第一天(HTML5)
javascript·css·html·html5
前端小咸鱼一条23 分钟前
React的基本语法和原理
前端·javascript·react.js
qq_2787877724 分钟前
Golang 调试技巧:在 Goland 中查看 Beego 控制器接收的前端字段参数
前端·golang·beego
YGY Webgis糕手之路24 分钟前
Cesium 快速入门(六)实体类型介绍
前端·经验分享·笔记·vue·web
come1123426 分钟前
前端ESLint扩展的用法详解
前端
YGY Webgis糕手之路28 分钟前
Cesium 快速入门(一)快速搭建项目
前端·经验分享·笔记·vue·web
im_AMBER29 分钟前
Web 开发 08
前端·javascript