Leaflet實現框選截圖 網頁框選截圖

咱們要實現一些相似以網頁截圖的功能，好比下面

咱們須要藉助

• leaflet-draw
• html2canvas

項目預覽地址

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>
  

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

css

#map {
  height: 100vh;
  width: 100vw;
}

js

• 第一步：加載地圖

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);

• 第二步：加載工具欄

let points = [];//保存點位

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標籤
}

項目預覽地址
源碼地址