高德地圖衛星圖層繪製多邊形後截圖保存

先看看效果吧

首先利用高德給的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 = '*'之類的
  });