关于截图的问题？

Question

这个代码，能不能哪位老师能做个demo看看：https://blog.csdn.net/chysxsl...
一直想找这个功能。

Answer 1

我只写了矩形的demo

预览地址

leaflet-draw API

HTML

<!-- Load Leaflet from CDN-->
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.css' rel='stylesheet' />
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js'></script>
<!-- Load Esri Leaflet from CDN -->
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.2/esri-leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div id="map"></div>

css

body {
  margin: 0;
  padding: 0;
}

#map {
  height: 400px;
  width: 800px;
}

js

let points = []
var map = L.map('map').setView([60, 30], 8);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var featureGroup = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
draw: {
    polygon: false,
    polyline: false,
    circle: false,
    marker: false
  },
  edit: {
    featureGroup: featureGroup,
       edit: false,
    remove:false
  }
}).addTo(map);
map.on('draw:created', function(e) {
  featureGroup.addLayer(e.layer);
  let latlngs = e.layer._latlngs
  points = latlngs
  var r = confirm("是否截图当前框选");
  if (r == true) {
    createMapImage()
  } else {
    console.log("您按了取消！");
  }
  featureGroup.removeLayer(e.layer);
});

function createMapImage() {
  let bounds = this.map.getBounds(),
    zero = [bounds._northEast.lat, bounds._southWest.lng],
    // 计算当前 视窗内的 原点经纬度 ==> 对应的屏幕坐标 （地图位移及缩放时计算 startPoint的偏移量）必须！！！
    zeroPoint = map.latLngToLayerPoint(zero)
  let startPoint = map.latLngToLayerPoint(points[1]), // latlng 转 屏幕坐标 计算 起点及宽高
    endPoint = map.latLngToLayerPoint(points[points.length - 1]),
    width = Math.abs(startPoint.x - endPoint.x),
    height = Math.abs(startPoint.y - endPoint.y);
  html2canvas(document.getElementById('map'), {
    useCORS: true,
    onrendered: function(canvas) {
      // canvas is the final rendered <canvas> element
      downloadIamge(canvas, (startPoint.x - zeroPoint.x), (startPoint.y - zeroPoint.y), width, height)
    }
  })
}

function downloadIamge(canvas, capture_x, capture_y, capture_width, capture_height) {
  // 创建一个用于截取的canvas
  var clipCanvas = document.createElement('canvas')
  clipCanvas.width = capture_width
  clipCanvas.height = capture_height
  // 截取图片
  clipCanvas.getContext('2d').drawImage(canvas, capture_x, capture_y, capture_width, capture_height, 0, 0, capture_width, capture_height)
  var clipImgBase64 = clipCanvas.toDataURL() // 生成图片url
  // 下载图片
  let link = document.createElement("a");
  link.href = clipImgBase64; //下载链接
  link.setAttribute("download", new Date().toLocaleString() + "_截图.png");
  link.style.display = "none"; //a标签隐藏
  document.body.appendChild(link);
  link.click(); // 点击下载
  document.body.removeChild(link); // 移除a标签
}