要實現前端跨域下載 前提是你需要訪問的圖片伺服器 已經在HTTP響應標頭中添加了 Access-Control-Allow-Origin * ，否則怎麼下載都是一張空白圖！

html2canvas下載

http://html2canvas.hertzen.com/dist/html2canvas.js
或者直接使用npm命令匯入
npm install --save html2canvas

html2canvas使用

js方法可以直接複製

function downLoadImg() {
            var img = document.getElementById('img3D'); // 獲取要下載的圖片            
            var imgsrc = img.src;
            var name = imgsrc.substring(imgsrc.lastIndexOf('\/') + 1, imgsrc.length-4);                      
            html2canvas(img, {
                width: img.clientWidth,
                height: img.clientHeight,
                allowTaint: false,
                useCORS: true,//允許跨域
            }).then(canvas => {
                let src = canvas.toDataURL('image/png', 1)
                let image = new Image()
                image.src = src
                let url = image.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream')//輸出型別
                let a = document.createElement('a');//隨便建立一個元素
                a.download = `${name}.png`// 設定下載的檔名，預設是'下載'
                a.href = url
                document.body.appendChild(a)
                a.click()
                a.remove() // 下載之後把建立的元素刪除
            });
        }
 

標籤 （這裡的）crossorigin="anonymous"也需要新增來允許跨域

<img id="img3D" src="" crossorigin="anonymous"/>

html2canvas主要是用來做截圖的 不只是圖片下載 你可以將標籤換成其它的Div或者整個html 用來做截圖下載。