电子商务网站建设与管理实训心得,在线视频下载网站如何做,做一个网站以及app多少钱,怎样进行网站推广html2canvas截图生成图片并保存到本地的解决方案 一、构建HTML容器二、html2canvas截图封装函数避坑指南1.尺寸过大而无法成功生成图片 html2canvas是一款JavaScript插件#xff0c;能够将网页上的HTML元素转化为Canvas对象#xff0c;从而可以将网页截图输出为图片或者PDF文… html2canvas截图生成图片并保存到本地的解决方案 一、构建HTML容器二、html2canvas截图封装函数避坑指南1.尺寸过大而无法成功生成图片 html2canvas是一款JavaScript插件能够将网页上的HTML元素转化为Canvas对象从而可以将网页截图输出为图片或者PDF文件。 它的原理是通过遍历DOM树将每一个HTML元素转化为Canvas对象并叠加到一起形成一张完整的图片或者PDF文件。在转化过程中html2canvas还需要解决一些问题例如处理CSS属性、特殊元素、浏览器兼容性问题等。 html2canvas的原理并不复杂但是它在实现网页截图这一功能上起到了重要作用为网页开发、界面设计等领域提供了便利。
一、构建HTML容器
div idprint-boxdiv classprint-bgimg srcimages/main.jpg alt width800/divdiv classprint-contentp stylemargin-top: 60px;span classcom_name漏刻有时/span/pp stylefont-size: 24px;开展 img srcimages/adi.png alt height30 抖音直播销售服务本公司保证所售产品均为品牌正品。/pp stylefont-size: 24px;label stylefont-weight: bold;授权期限/label2023年8月8日至2024年8月7日/pp styletext-align: right;padding-right: 50px;margin-top: 180px;font-size: 20px;宁波漏刻文化科技有限公司/pp styletext-align: right;padding-right: 50px;font-size: 20px;2023年8月8日/p/div
/div
div idnon-print非打印区域/div
button idbtn onclickprintDiv()打印/button
button idshotbtn截图/button二、html2canvas截图封装函数 /* 点击截图按钮事件 */$(#shotbtn).click(function () {PrtScn(#print-box).then((result) {download(result);});});/* 截图核心方法封装获取base64 */function PrtScn(domName) {//console.log(domName);if (null domName || domName) {throw (dom name should not be null);}if (# ! domName.charAt(0) . ! domName.charAt(0)) {throw (dom element only supports id or class);}let domIsNull null;switch (domName.charAt(0)) {case #:domIsNull document.getElementById(domName.substr(1));break;case .:domIsNull document.getElementsByClassName(domName.substr(1))[0];break;default:break;}if (null domIsNull) {throw (dom element should not be null);}// svg转canvaslet nodesToRecover [];let nodesToRemove [];let svgElem;switch (domName.charAt(0)) {case #:svgElem document.getElementById(domName.substr(1)).getElementsByTagName(svg);break;case .:svgElem document.getElementsByClassName(domName.substr(1))[0].getElementsByTagName(svg);break;default:break;}let prepare [];for (let i 0; i svgElem.length; i) {prepare.push(0);}for (let i 0; i svgElem.length; i) {let parentNode svgElem[i].parentNode;let canvas document.createElement(canvas);canvas.style.position svgElem[i].style.position;canvas.width parseInt(svgElem[i].style.width);canvas.height parseInt(svgElem[i].style.height);canvas.style.left 0;canvas.style.top 0; // 生成与svg对应尺寸的canvaslet ctx canvas.getContext(2d);let svg_xml (new XMLSerializer()).serializeToString(svgElem[i]);let img new Image();img.src data:image/svgxml;base64, window.btoa(svg_xml);img.onload function () {ctx.drawImage(img, 0, 0);prepare[i] 1;//download(canvas.toDataURL(image/png)); // 调试用}parentNode.appendChild(canvas); // 使用canvas代替svg进行截图nodesToRemove.push({ // 完成截图后删除canvasparent: parentNode,child: canvas});nodesToRecover.push({ // 完成截图后恢复svgparent: parentNode,child: svgElem[i]});parentNode.removeChild(svgElem[i]); // 暂时移除svg}return new Promise((resolve) {let waitInterval setInterval(() {let isComplete true; // 创建定时器等待上面img.onload的异步操作for (let i 0; i prepare.length; i) {if (prepare[i] 0) {isComplete false;break;}}if (isComplete) {clearInterval(waitInterval);// div转canvas截图let domElem;switch (domName.charAt(0)) {case #:domElem document.getElementById(domName.substr(1));break;case .:domElem document.getElementsByClassName(domName.substr(1))[0];break;default:break;}html2canvas(domElem, {useCORS: true,logging: true}).then((cnv) {let imgUrl cnv.toDataURL(image/png); // 将canvas转换成img的src流base64for (let i 0; i nodesToRecover.length; i) {nodesToRecover[i].parent.appendChild(nodesToRecover[i].child);}for (let i 0; i nodesToRemove.length; i) {nodesToRemove[i].parent.removeChild(nodesToRemove[i].child);}resolve(imgUrl);});}}, 20);});}/* 下载图片的方法 */function download(url) {let a document.createElement(a);a.style.display none;document.body.appendChild(a);let triggerDownload $(a).attr(href, url).attr(download, order generateRandomNumber() .png);triggerDownload[0].click();document.body.removeChild(a);}//生成随机数function generateRandomNumber() {return (new Date()).getTime();/*const randomNumber Math.floor(Math.random() * 900000) 100000;return randomNumber.toString();*/}避坑指南
1.尺寸过大而无法成功生成图片
当使用html2canvas进行截图时如果尺寸过大而无法成功生成图片可以尝试以下解决方案 减小截图区域尺寸可以通过指定截图区域的宽度和高度来限制截图的范围。确定需要截图的具体区域并设置合适的尺寸以确保能够成功生成图片。 减少截图对象的复杂性如果截图对象包含大量复杂的元素如大量文字、图像、动画等可以尝试简化截图对象减少其中的元素数量或优化其结构以减少截图的复杂度。 延迟截图操作有时页面中的某些元素可能需要一些时间才能完全加载和渲染完成。在截图之前可以添加相应的延迟以确保元素已经完全显示在页面上。可以使用setTimeout或者使用html2canvas提供的onclone回调函数来延迟截图操作。 分割截图如果截图的尺寸仍然过大可以尝试将截图区域分割为多个较小的部分进行截图然后将这些部分拼接在一起以生成完整的图片。 使用其他截图工具如果html2canvas无法满足你的需求可以考虑使用其他可用的截图工具比如Puppeteer、PhantomJS或者Selenium等。 漏刻有时
