vue+高德地图截图导出图片 | 您所在的位置:网站首页 › 高德如何导出地图图片 › vue+高德地图截图导出图片 |
记得设置!!! WebGLParams: { preserveDrawingBuffer: true }, 点击 // 导出图片 // base64转流 dataURLtoBlob(dataurl) { console.log(444) var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1] var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new Blob([u8arr], { type: mime }) }, downloadFile(url, name = 'What\'s the fuvk') { console.log(555) var a = document.createElement('a') a.setAttribute('href', url) a.setAttribute('download', name) a.setAttribute('target', '_blank') const clickEvent = document.createEvent('MouseEvents') clickEvent.initEvent('click', true, true) a.dispatchEvent(clickEvent) }, downloadFileByBase64(base64, name) { console.log(333) var myBlob = this.dataURLtoBlob(base64) var myUrl = URL.createObjectURL(myBlob) this.downloadFile(myUrl, name) // console.log(base64) }, getIdCarema(id) { console.log(111) var element = document.getElementById(id) html2canvas(element, { backgroundColor: 'transparent', logging: false }).then(canvas => { const context = canvas.getContext('2d') // 关闭抗锯齿形 context.mozImageSmoothingEnabled = false context.webkitImageSmoothingEnabled = false context.msImageSmoothingEnabled = false context.imageSmoothingEnabled = false // canvas转化为图片 this.canvas2Image(canvas, canvas.width, canvas.height, id, '图片') }) }, canvas2Image(canvas, width, height, id, val) { console.log(222, canvas, width, height, id, val) // 2312 1360 "container" "图片" const retCanvas = document.createElement('canvas') const retCtx = retCanvas.getContext('2d') console.log('retCanvas', retCanvas) retCanvas.width = width retCanvas.height = height retCtx.drawImage(canvas, 0, 0, width, height, 0, 0, width, height) const img = document.createElement('img') img.src = retCanvas.toDataURL('image/png') // 可以根据需要更改格式 // window.sessionStorage.setItem(id, retCanvas.toDataURL('image/png')) // ? this.downloadFileByBase64(retCanvas.toDataURL('image/png'), val) } |
CopyRight 2018-2019 实验室设备网 版权所有 |