diff --git a/前端/前端通过页面(dom)生成图片并下载保存.md b/前端/前端通过页面(dom)生成图片并下载保存.md index 1799360..c05ad0f 100644 --- a/前端/前端通过页面(dom)生成图片并下载保存.md +++ b/前端/前端通过页面(dom)生成图片并下载保存.md @@ -13,41 +13,41 @@ ## 使用 页面现在默认已经写好了,通过页面进行生成了 ``` - $(".download").click(() => { - new html2canvas(document.getElementById('app'), { - allowTaint: true, - taintTest: true, - useCORS: true, - background: null, - windowWidth:document.body.scrollWidth, - windowHeight:document.body.scrollHeight, - x:(document.body.scrollWidth - width)/2, - y:0 - }).then(canvas => { - // canvas为转换后的Canvas对象 - // imgBlob = canvas.toDataURL('image/jpeg', 1.0); - // imgBlob = imgBlob.toString().substring(imgBlob.indexOf(",") + 1); - // window.saveAs(imgBlob, 'my-node.png'); - let imgUrl = Canvas2Image.convertToPNG(canvas,$("#app").width(),$("#app").height()) - console.log($(imgUrl).attr('src')) - imgUrl = $(imgUrl).attr('src') - // 如果浏览器支持msSaveOrOpenBlob方法(也就是使用IE浏览器的时候),那么调用该方法去下载图片 - if (window.navigator.msSaveOrOpenBlob) { - var bstr = atob(imgUrl.split(',')[1]) - var n = bstr.length - var u8arr = new Uint8Array(n) - while (n--) { - u8arr[n] = bstr.charCodeAt(n) - } - var blob = new Blob([u8arr]) - window.navigator.msSaveOrOpenBlob(blob, new Date().getTime() + '.' + 'png') - } else { - // 这里就按照chrome等新版浏览器来处理 - const a = document.createElement('a') - a.href = imgUrl - a.setAttribute('download', new Date().getTime() + '.png') - a.click() - } - }); - }) +$(".download").click(() => { + new html2canvas(document.getElementById('app'), { + allowTaint: true, + taintTest: true, + useCORS: true, + background: null, + windowWidth:document.body.scrollWidth, + windowHeight:document.body.scrollHeight, + x:(document.body.scrollWidth - width)/2, + y:0 + }).then(canvas => { + // canvas为转换后的Canvas对象 + // imgBlob = canvas.toDataURL('image/jpeg', 1.0); + // imgBlob = imgBlob.toString().substring(imgBlob.indexOf(",") + 1); + // window.saveAs(imgBlob, 'my-node.png'); + let imgUrl = Canvas2Image.convertToPNG(canvas,$("#app").width(),$("#app").height()) + console.log($(imgUrl).attr('src')) + imgUrl = $(imgUrl).attr('src') + // 如果浏览器支持msSaveOrOpenBlob方法(也就是使用IE浏览器的时候),那么调用该方法去下载图片 + if (window.navigator.msSaveOrOpenBlob) { + var bstr = atob(imgUrl.split(',')[1]) + var n = bstr.length + var u8arr = new Uint8Array(n) + while (n--) { + u8arr[n] = bstr.charCodeAt(n) + } + var blob = new Blob([u8arr]) + window.navigator.msSaveOrOpenBlob(blob, new Date().getTime() + '.' + 'png') + } else { + // 这里就按照chrome等新版浏览器来处理 + const a = document.createElement('a') + a.href = imgUrl + a.setAttribute('download', new Date().getTime() + '.png') + a.click() + } + }); +}) ``` \ No newline at end of file