在使用html2canvas截取頁面的時候發現圖片死活保存不到本地,chrome一直報「網絡錯誤」,百度、谷歌無果。javascript
後來想一想,html2canvas生成的也是canvas對象,因此按這個關鍵字找到了解決方法。html
解決連接:https://stackoverflow.com/questions/37135417/download-canvas-as-png-in-fabric-js-giving-network-errorjava
主要出現這個問題是canvas保存圖片到本地時各個瀏覽器像素的限制不一樣,因此將圖片數據轉換成Blob數據流下載下來就好了。chrome
主要代碼以下:canvas
//....前面省略 dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); }, downloadCanvas(){ var link = document.createElement("a"); var imgData =canvas.toDataURL({format: 'png', multiplier: 4}); var strDataURI = imgData.substr(22, imgData.length); var blob = this.dataURLtoBlob(imgData); var objurl = URL.createObjectURL(blob); link.download = this.cName+".png"; link.href = objurl; link.click(); } //省略後面...