高德地圖衛星圖層繪制多邊形后截圖保存

先看看效果吧

首先利用高德給的api在地圖上畫出一個多邊形

生成截圖后的效果

(function(fn) {
  window.cut = fn
})(
/**
 * 通過plygon得到一個剪裁后的圖片
 * @param map            高德的map
 * @param myCanvas    由於高德地圖的衛星圖是div拼接的瓦片，剪裁要用canvas，所以用html2canvas.js把div轉成了canvas
 * @param editPolygon  高德繪制多邊形的canvas對象
 * @param cb               生成圖片后的回調函數
 */
function cut(map, myCanvas, editPolygon, cb) {
  //由於polygon給的數值是經緯度的，所以首先要轉成基於瀏覽器像素的，高德提供這個方法。
  var points = convertToPx(editPolygon.arr);

  //下面的兩個升序排序是為了得到不規則多邊形的矩形容器左上角的像素起點的xy軸，還有右下角的xy軸
  //X軸升序
  //這里要注意為什么要使用Array.from呢。是為了創建一份獨立的數據，不然yAsc排序后xAsc 也會改變
  var xAsc =Array.from(points.sort(function(a, b) {
    return a[0] > b[0]
  }));
  //y軸升序
  var yAsc = points.sort(function(a, b) {
    return a[1] > b[1]
  });
  //左上角像素坐標
  var min = [xAsc[0][0], yAsc[0][1]]    
  //右下角像素坐標
  var max = [xAsc[xAsc.length - 1][0], yAsc[yAsc.length - 1][1]]
  //從canvas中獲得圖像方法需要4個參數。起點的x y軸, width, height。 +20為了不讓生成的圖片都貼這邊
  var width = max[0] - min[0] + 20
  var height = max[1] - min[1] + 20
  //下面的-10 是起點的xy軸都往左上角縮小10像素。
  //imgData是得到多邊形范圍的數據
  var imgData = myCanvas.getContext('2d').getImageData(xAsc[0][0] - 10, yAsc[0][1] - 10, width, height)

  //創建一個新的canvas是為了把得到的imgData數據寫入，然后轉成最終效果的base64
  var canvas2 = document.createElement("canvas")
  var cxt2 = canvas2.getContext("2d")
  canvas2.width = width
  canvas2.height = height
  cxt2.putImageData(imgData, 0, 0, 0, 0, width, height)
  cb && cb({
    src: canvas2.toDataURL('image/png'),
    width: width,
    height: height
  })

  function convertToPx(arr) {
    //通過map轉換為像素
    return arr.map(function(item) {
      var pixel = map.lnglatTocontainer([item.lng, item.lat])
      return [pixel.getX(), pixel.getY()]
    })
  }
})

//html2canvas在這里有一個跨域的坑，本來這個功能跟我之前做的一個圖片平鋪多邊形的功能很接近，很快就能實現出來。但是因為這個跨域耽誤了好久
html2canvas(document.body.querySelector('.amap-maps'), {
    onrendered: function(canvas) {
      cut(map, canvas, p, function(base64) {
       //...
      })
    },
    useCORS: true    //重點！！我用這個就成功了,別的都失敗了如：allowTaint : true 。  還有給所有圖片加上crossOrigin = '*'之類的
  });