凡科做网站是否安全,郑州建设网店网站,大连h5网站开发,wordpress获取自定义类型文章使用html2canvas进行div截图时#xff0c;存在svg和img的解决办法 写在前面#xff1a;vue使用html2canvas截图时#xff0c;存在svg或者img或者特殊字体时截图时空白#xff0c;或者不全解决办法如下第一步#xff0c;svg或者img先转base64#xff08;如果是特殊字体存在svg和img的解决办法 写在前面vue使用html2canvas截图时存在svg或者img或者特殊字体时截图时空白或者不全解决办法如下第一步svg或者img先转base64如果是特殊字体就把这个字体图形截图转base64第二步将转换后的base64设置为新元素的content属性第三步实现div的截图下载 写在前面
1.网上html2canvas资料少即使你复制拿来用了也发现各种问题是不是 2.它的官网也没有好的demo不好解决我们的问题。 3.我自己研究了两天自创魂技搞定了它。
以下不废话
vue使用html2canvas截图时存在svg或者img或者特殊字体时截图时空白或者不全
如果你的原元素是img当然再导入canvas通过img转canvas去替换原来的子节点再使用html2canvas导出图片。对于组件层级不多的页面是可用的。 const changeToCanvas async (element) {const imgElems element.querySelectorAll(img)let svgelems [...imgElems]svgelems.forEach((node) {let parentNode node.parentNodelet canvas document.createElement(canvas)canvas.style.zIndex 999//处理img转换canvasif (node.tagName IMG) {canvas.width node.widthcanvas.height node.heightcanvas.getContext(2d).drawImage(node, 0, 0)parentNode.removeChild(node)let index parentNode.firstChildif (index ! null) {parentNode.insertBefore(canvas, index)} else {parentNode.appendChild(canvas)}}})}但是如果你组件层级多时你会发现这种办法不是很好用容易出现各种意想不到的问题。
如果你的原元素是svg那么思路是遍历div内的svg,把svg转图片遍历图片转canvas再用html2canvas截图如果你这么做了成功了图片没有缺失。那么恭喜你因为大多数都会存在各种问题。
个人认为除非你的项目很特殊根本不需要用canvas去把svg转一下因为转了以后会出现元素位置问题、删除和新增div节点的延时问题等等。下面自创思路就能完美解决问题。
解决办法如下
第一步svg或者img先转base64如果是特殊字体就把这个字体图形截图转base64
注意最好是把转之前的图片尺寸先做好可以用美图秀秀等把图片尺寸修改一下适配你原来的页面再转base64这样就省去了调节css的麻烦。 这里我推荐两个网站可以将你的svg或img转base64
https://www.chahuo.com/svg2css.html#google_vignettehttps://www.bejson.com/image/imgzoom/#google_vignette第二步将转换后的base64设置为新元素的content属性
如下用新的div的css的content属性代替原来的svg或者img。这样就不需要canvas只用html2canvas就能实现截图下载。
::v-deep(.vxe-icon-square-minus) {pointer-events: none;::before {content: url(data:image/svgxml;base64,PHN2ZyB0PSIxNzE3NDMyMzMzNDEzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ4OTAyIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiPjxwYXRoIGQ9Ik0xMDI0IDB2MTAyNEgwVjBoMTAyNHogbS03OC43NjkyMzEgNzguNzY5MjMxSDc4Ljc2OTIzMXY4NjYuNDYxNTM4aDg2Ni40NjE1MzhWNzguNzY5MjMxeiIgZmlsbD0iIzhhOGE4YSIgcC1pZD0iNDg5MDMiPjwvcGF0aD48cGF0aCBkPSJNNzg3LjY5MjMwOCA0NzIuNjE1Mzg1djc4Ljc2OTIzSDIzNi4zMDc2OTJWNDcyLjYxNTM4NXoiIGZpbGw9IiM4YThhOGEiIHAtaWQ9IjQ4OTA0Ij48L3BhdGgPC9zdmc);background-repeat: no-repeat;background-position: center;width: 1em;height: 1em;display: inline-block;}
}::v-deep(.vxe-icon-square-plus) {pointer-events: none;::before {content: url(data:image/svgxml;base64,PHN2ZyB0PSIxNzE3NDMyMTAyODAwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0MzgwIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiPjxwYXRoIGQ9Ik0xMDI0IDB2MTAyNEgwVjBoMTAyNHogbS03OC43NjkyMzEgNzguNzY5MjMxSDc4Ljc2OTIzMXY4NjYuNDYxNTM4aDg2Ni40NjE1MzhWNzguNzY5MjMxeiIgZmlsbD0iIzhhOGE4YSIgcC1pZD0iNDQzODEiPjwvcGF0aD48cGF0aCBkPSJNNzg3LjY5MjMwOCA0NzIuNjE1Mzg1djc4Ljc2OTIzSDIzNi4zMDc2OTJWNDcyLjYxNTM4NXoiIGZpbGw9IiM4YThhOGEiIHAtaWQ9IjQ0MzgyIj48L3BhdGgPHBhdGggZD0iTTQ3Mi42MTUzODUgMjM2LjMwNzY5Mmg3OC43NjkyM3Y1NTEuMzg0NjE2SDQ3Mi42MTUzODV6IiBmaWxsPSIjOGE4YThhIiBwLWlkPSI0NDM4MyIPC9wYXRoPjwvc3ZnPg);background-repeat: no-repeat;background-position: center;width: 1em;height: 1em;display: inline-block;}
}
::v-deep(.icon_cri_1) {::before {content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAA1dJREFUOE9tlE1oXFUUx3/n3TdvPjL5nCQFE7uQSt1owU/iplUxiIpgQVBKoVS7ERQFoZuiaBe1guhCRHHhQty4qOnWhRVawYoKbjTBJB0nEtk8tF8zsx7994jb8gMIfYLu8zr2/9z/3nvsXdpuqyu6w86GOoM98XROAOhu97ILSAMhENU342lENkCWBaz36gVtIe2nCdJS/Eghl/2hGPIxYIFWBxTArd51Bl5q7CTnxUg1NOGKKpEqO0HApmp7wQi4XmfVhaEZ7MvItUzCF2T4patoC4afOfF97YWXJ1Dv0yxUZFWYgU8LxWyhu8dWrkp4Fw60xEcbqraBV6jr52c/30cyWGxpIGIIYxLcIwjy1jTRzRbBk1fFrBd45ma8PN1uP5HK5SgdkPrm82qoVi8HRQxG4bVIthgjxMT2FPMubYBVsIGQSyxKqJXZqn54s5iZ4/S3Zf3L8eJDbfl0bsHsXgKoVDMQT50mABaNqThYWEtJrIt5mue3ytGPzheHBgaYidV1Aa9O3UzCXb65OH7s21Q6Dz5wDM6FBHi2dyGfzeaNIICGRtz45Y65UtvXBivHSwn60u6NzXVZu4LE88NEycNEANxjU5ON6P84pNlMpSAMNLrBaXlBvlHnszfvGu6DW13Q2S8XbGwjJidGSGwTNKBUiqgvNTGSp3/QsbzSxPhQrSTMlS3X51f46vVDY4UCte6pvfFp2cYuyRECSVG1eC9JwgCvPOIqDrnUxBWYubKjh9n6vrNe/fc0QP1jiJe/WjeNq3Is8fGUdeCQPAWcsWCVqqrjA4WSdy2SBIpxvHXfJOrfy7ppYv3HuiFlW5Bnrkwa3dcIk8/NkYI6hEXLkyS3UpAFNEG1WeP36fGlUJMzHVxUi/21OL507Mtrby2oHxMm3p1WojJ57LAslueYmbEauz6SIMaSELqIjMbksuvy5FMPMPXttDaLCVMXjxwownIX9OLZP5LNxARJM9Gs5MEY8UGCoIqmChUllNBGWF1DMv20smv/B71y/trV2mbpQWNzAWpEJYWk6w0qgYo68YEV8VlBbErHb/jzy88fngsz2L7Vu6xkvQ79ZiO39zOk9J42tJCNrtzm/tBez1sv8G1/3kbk2tbxX8hiskPouecRAAAAABJRU5ErkJggg);background-repeat: no-repeat;background-position: center;width: 1em;height: 1em;margin-right: 5px;margin-top: 3px;display: inline-block;}
}
::v-deep(.icon_cri) {::before {content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAzhJREFUOEFlN1rHGUUxp9z3pn9SHbdmE26TY0Qml6oV0mk0HpTEUQRrZZCaymI4K03/ifAQq90CL4hVVvctEbqai9EIxSKxFqLcY0O/kwye7OvO85R96JW7cUcWAYmDnzmc85zlDJ/DzOi/SojIhs/KotHid67vvHvrzsbrOVUBAxxCeR0ejD5SpPb80swzJcaX8XXI3AURCu/7p5evp1/EtIG9a0CgMDQkmEWaWQ5O9TV40hDszeWqkcAhBI0qubytY28Od1MxaUQc6DgUbgEKgY1MxFFbgzyipxSnUP23IuL7asPgD64vhXqE01ujon54E0kQWLGv2mGHACFjWTKAFQZZ1H98zLx6eiIrv8j9b7ohbU3S47NkYyIWrfydE/phVTlnBsQggZADpgJbqGVnX3my/VkJGmmNLnbazWptRr6euY9RDgVwIhVLpkwXBPtVMATvRyM6dWWp/gDova83/DaIXliYKhqGUMC8MBVRmZmxN3K9cYQPr0p7R52dmto5f3axFUH3zI4t0qXvtov1MBG9LGfl1SMoI8QQiAFSgISxhxQmYi/N7r16eqH18aiiCOK3l9fyrH6YvMbGGEGAJPSxjzr6BAoCS33AwBxEAp56ePPCm093Phoq4i2geffW1qU/q61nB4xqUHBtjOzGTaUftx1BDWnYx6mF2l61zpWYUGJIaxvPVodXJubHsi2QzA7eY4urJRfL/Vr6RigqCBwYxmK5UAoFoBsvXgAsdIeA1KmGvquZOzlS/vKYp9dNE79PNa5eZaP3GqcZplNNTEojsEIi7vmDo2ZnHAfEPOn5hxn8e64fhd1kfnl679dLuvNTPzRDA1CIw9gWIckohTwFVUqkSO5luDC4sz9Zijf0FrAzxy566u3BhwDVbGqFxVOlizg4UDODhQTYwckx6dwMXjh3BlFMTdXqTcpjf2wWVwjmY1AJxBZFECT2ZjAOxFKXsFegunz4ofStJ6bRu2/8O0CrB7jxGKG/Dj4fL02DWQtx9OaaTwZoByQWDOLJBDD2i9XXUO52yBdrcRKIHWxIHR5OTQLcbMwj9p8ZWV2HHjpWwWKd/A63m4Ba1UDJpAAAAAElFTkSuQmCC);background-repeat: no-repeat;background-position: center;width: 1em;height: 1em;margin-right: 5px;display: inline-block;margin-top: 3px;}
}
第三步实现div的截图下载
一html2canvas npm
npm install html2canvas1.4.1 二引入
import html2canvas from html2canvas三实现 // 生成图片const creatImg async () {try {const setup {useCORS: true, // 使用跨域backgroundColor: null,allowTaint: true,logging: true, // 打印日志来检查是否有加载问题background: #ffffff, // 一定要添加背景颜色否则出来的图片背景全部都是透明的async: true, // 是否异步解析和呈现元素scale: 2, // 处理模糊问题// dpi: 1000 // 处理模糊问题scrollY: 0, // html2canvas默认绘制视图内的页面需要把scrollYscrollX设置为0scrollX: 0,//过滤不需要截图的元素ignoreElements: (element) {return element.className vxe-tree--btn-wrapper}}//找到要截图的div节点//可以用document.getElementByIdaaa等获取要截图的节点根据实际情况而定const $image divImage.value.childNodes[0].childNodes[1]//html2canvas 把div转图片await html2canvas($image, setup).then((canvasimg) {//图片类型const link canvasimg.toDataURL(image/png)//图片名称const fileName CRI_History_Image_ getDate()//导出exportPicture(link, fileName)})} catch (e) {console.log(e)}}// 导出图片const exportPicture (link, name) {try {const file document.createElement(a)file.style.display nonefile.download decodeURI(name)let blob dataURLtoBlob(link)let url URL.createObjectURL(blob)file.href urldocument.body.appendChild(file)file.click()document.body.removeChild(file)} catch (e) {console.log(e)}}//图片转Blob类型避免浏览器报错const dataURLtoBlob (dataurl) {var arr dataurl.split(,)var mime arr[0].match(/:(.*?);/)[1]var bstr atob(arr[1])var n bstr.lengthvar u8arr new Uint8Array(n)while (n--) {u8arr[n] bstr.charCodeAt(n)}return new Blob([u8arr], { type: mime })}
