前端地圖截屏方案

截屏一直以來，就是客戶端的專利，對於瀏覽器端可謂無能爲力。

不過，自從canvas出來之後，就不同了。

HTML5中canvas的方法，toDataURL() 可將canvas的內容保存爲圖片。

簡單保存canvas圖片的代碼以下：

function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

對於普通canvas截圖沒有問題，甚至對於整個DOM樹也能夠先轉換成canvas，而後轉換成截圖。業界有成熟的相似的類庫 html2canvas 。

問題

工做中，須要對地圖截圖，遇到很多問題，折騰了好久，在此記錄。

原圖：

最後的截圖代碼：

JS Bin on jsbin.com

問題一 跨域

截圖失敗，瀏覽器提示：

`Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.`

爲何會出現跨域問題呢？仔細一想，地圖上有一些圖片，存儲在地圖服務商的服務器，當咱們toDataURL的時候取不到圖片數據，跨域也就可以想通了。

解決方式，暫時不獲取跨域圖片，直接try catch掉。暫時可以截圖，看到的效果:

問題二 圓角模糊

如上圖中，圓形中間多了一個叉，暫時不知道緣由，解決方式是在截圖前去除圓角。

問題三 圖片不顯示

實際上是問題一留下的問題，截圖左下角，有個高德的圖片沒有顯示，問題一解決方式是繞過，但問題仍是要解決。

在服務器端，是不存在跨域。因此，問題三的解決方式，咱們能夠在本地起一個代理服務器，代理經過獲取圖片，而後設置setHeader('Access-Control-Allow-Headers', '*’); 而後給本地瀏覽器使用。

代理服務器代碼：

JS Bin on jsbin.com

經過服務器跨域，而後容許全部訪問圖片，就能夠跨域了。

問題四 地理名稱不顯示

經過上圖能夠看到，地圖截圖全部的地理位置名稱都沒有。打開log後能夠看到，問題仍是出在跨域上。地圖全部的地理位置名稱也是經過圖片實現，圖片存在地圖服務商的服務器上，經過canvas渲染，和問題三的單純的圖片不太同樣。

要解決這個問題，必須地圖服務器設置Header爲」Access-Control-Allow-Headers: *」。經過公司關係，和高德產品經理、開發聯繫過，對方回答沒辦法設置這個，處於安全考慮。因而，這個問題無解。

最後效果：

原創文章，歡迎轉載。轉載請註明：轉載自Fs21 ' s Home，謝謝！
原文連接地址：前端地圖截屏方案