使用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
相关推荐
盛夏绽放3 小时前
jQuery 知识点复习总览
前端·javascript·jquery
胡gh5 小时前
依旧性能优化,如何在浅比较上做文章,memo 满天飞,谁在裸奔?
前端·react.js·面试
大怪v5 小时前
超赞👍!优秀前端佬的电子布洛芬技术网站!
前端·javascript·vue.js
胡gh5 小时前
你一般用哪些状态管理库?别担心,Zustand和Redux就能说个10分钟
前端·面试·node.js
项目題供诗6 小时前
React学习(十二)
javascript·学习·react.js
无羡仙6 小时前
Webpack 背后做了什么?
javascript·webpack
roamingcode7 小时前
Claude Code NPM 包发布命令
前端·npm·node.js·claude·自定义指令·claude code
码哥DFS7 小时前
NPM模块化总结
前端·javascript
灵感__idea7 小时前
JavaScript高级程序设计(第5版):代码整洁之道
前端·javascript·程序员
唐璜Taro8 小时前
electron进程间通信-IPC通信注册机制
前端·javascript·electron