24、将Div中的所有元素保存为图片 Html2Canvas

这里的主要是保存为base64格式的数据流
数据流样例:

data:image/png;base64,iVBORwOKGgoAAAANSUhEUgAAAXSAAAHCCAYAAACHcNQHAAAAAXNSROIArs4c6QAAIABJREFUeF7svQe83FWVP/7tnN7r7pfjzLz1gbikARHD6AAiYABUDCiu6scLuOuq/1WM+3NXRFQHmLOrgisogjAIQ5A8BCUPw7wb+b11P36vc7x/znVr7qruqu6qrq7+r3ud4870OPXrVu3Tp177/nekwyZTCYDHj40CEM7d8PT25rYDAA/GMq/Hdgdhbzc3WYtX591frkx0Zjdnu9bMwGAxifIZ3b3huLywSTjexqKVjHmGww2ZDb45hsL31s/PQ3v8GNN94o0m6uvP]KfPQDH1Ctk7B9UHqts7pTmIn8A5PBxBKjIh4308+663249Bi31rE5/sfeQTnX3ABNm7cmLvnhhtuw0a1a5ENhZhet6gnV3vdSANIAYjH4ogmk3A6nTABMAJ4dMgIrqYmnHfeeblvsmvXLu7fwt8qhOkGvcDGnM/HKaxrBEJV6MDp/i0DgxgdGsJrdu6sRneiPh6/7z70rVnDxsz4XCRbTDbyLGFzUCweTDaYbMIhtRkw21k42CFhIgY3C30opEmytE3PnsfvuwYzxbhz1PaCof21cdS703f6tIrB31WVXicAGfacPXHopBzaYXpd1V7XwjwgoisHBwdiw3iMdioD9NbnfutyNHjsBoNIqAxV133QWDwcDABg/b+flbLaEsXDnYIssUSrndhNMkGkwOmG4q6V1WVBrY+1+a31D54/fXX48CBA6IbN2zYgKuvvlrdx20HbiI+xRIL+MntZ+Z+S5hTsFrpzDzrZBKOWIr46n304vvT/3+3XXXYehoSFRu46BAZX1xhkMbAi4ug29bmFhoYjXUmDj2wefxaFDhzA705sbQWitrK44991hccsklqueKUkNm2RBw6LHdu9E/NFBX1g025vwH1FH3Znxmf3ZbT3lsNRN1gsqGkaujr1cDmoL5zNBqbw0//8rrcQxz23Ix6sQd+0636]mIMoEoSPve0x2CzNmAnsx52PXYmF&HhRmxbnFvSZ3oE3nnNp7logOIxYYj73350txygLmUsLlSgbavOKe/fuLeKGFNigSAqyYmzbtg0mEz1XZYnASnNzc1k817qgY0qoOkp3uupBFcDAbNxK88nxmd9Nz0+d8Znxme52chkg8kGkw3lvLUoPfePpV364PS9/n3u4056EwVAc6huNmpFKS4ONPz/8UUz5i5XfwrfZcfKXsLrrTNz+yCfgXzhc9LLveN3PON95mjITVrheNzY2JrJU80yQAhv8tba2MvT29mrirZb6DGyscKGUExY9FiymUBZzm/FZzBOmUDKFkimUy1s4wzfYulGrvTsS8+Fnf3kD9zjKi+F03CQfTW50+qQbEj/un03fxKZVb+F+pFP51w7/AX/7x9dzjT75zmdgMlpz/73S9hS03y+9]6Ka1+tFTO8Ppqen4Z+dxcbNmxGLxXD4sBjQkesUNTn0IAY2BFxdiea2wi1YwucwPtdGowR8ZnyWm99MINphsMN1QVqnOBHX1Mgcfe+E7+Mf+X3HINcjm1gYZczTYyh8trceXFL3A3/vC27UimIq0DAYjettPxjtf/3Pu93rhc7VO]Mo49eqrrxYxtqurCxodHRyY8Pv9GBkRZx6jGzZv3gyrNQ/Uyvs60ncxsCHgy0pDwKUESc9F1vG5Noo04zPjs9wcZ7LBZIPJhrIqxfZB4Me3n4F4IsTFaFCshhTxwsoc7i8Fqcf8y944cDNCMfyQc2FPfGAZKWtdaFQiAv41qKNGzbAaDJhdHQUwlNCwqMm6devgcrnK+ygKdzGwwcCGpIiwRVbMlpw2YDEgqn69ZbLBFHemuCvPF7an10eecuOtx3WDJ+cap4R115EOIh7PBxYrSOLpFmu7AnDa8qEmet6BqTmn5m7NDjs+/rbHs0eBh12USQM5y8batWvhcDgwHwjA6X]h//79RTxl1g0BS/RcsFaaul2pFErG59ooZ4zPjM9yc5z7BpMNJhvK+ivTNwAebBC3zKYObDYqDSe1SNSMtERQuDJnpVsHdN7DzS921fIt2DHu137ifv159+L5x14sK8voEy/fhr1HHssN9LKzvw6L2Zb77+UqG3IxGxQA/srevVydjeNO0IF7DxazUU3S9fzA7ISyNhsw4zPjs9wUZ7LBZIPJhrKqxvZBMY/YulGddePQ6AVYmng419mOk78iAhtewUQpbwOZpFJUf7oy6vCEodIUg8WUxsScE93esGSHsYQ388a9m/w234S4vMWhHEY4FgUHLYwb0jbidee8BmYTXngQB2nUnE88vy3NDjyV4zMRLAQkbbwbN/2NrzltI/DP+ZftgwmWTYqza3SfANbZNkiKydGTDaYbDDZLfIMuws0sqZErcZnxmf6wE8v3rOLjzx0g2SNTDkxt/uSnHZqaaD212oCLBs7vNx96ul14+2qw2qqt0H37ILblc/1/axF7+Lf7z6y9x9N/1MbDBNzp17duw2nuKzjz7HFXPO9KoOnVDS50NflyFdTa0jFdNMNxazIeAScy2ozcbA+Az4LLc4MdlgssFkQ3nr1vNghc3B1TUH9x25A7ufvkZZ6ApadDQ1kUwb4A9Lgw2yVrhdMXR5wpgKOLEQsYIsFEQDXQ64BHEZfNc2iwGxRHEND7pebbDRerwv7z/ndty95914MLJb9HaRuBGOxerodMEXNCNYIMUnMEfnah+9Bk6NFM/9K3VCNOai2gjj3PQYGq1rAT+rdGNgQcKVSNCknPHpuDGzMtdkY638Zn+XmN5NNJhtNNpR1LbYPinmaVOvGbGCQq+bd616PDu9m/OLONyMUnVb+g8pa2Cwpb0izK7rj4IQHZ1NGazrylcH5R15XHrTMhf3xIXSdigXuG2nVNA39mpJrFVk9Cumay25Ha3NP1RSaLdmIRqVYHBzMjUuqqN/GjRtht9urNna5jhjYYGBDUjbYxrA8NoZKVoBqLviFY2CywwlSDHayom51sDjIgupyAKIGNm3dfnBvS2876EVetu5okBzRKPYMIsGg6rEMTTCBQADbqv33iNar4x31cgzoYsHYX0+ff/Ce2erFtwpVTtdSAcDiNQCGB8bAyxSAQD69fD4/HA6dSe5avcd2Ng08C5apiupD6EnsoZG3NtNjP628ZnuUilyQaTDSYbyioI2wfFPFqKduOYiwarUF7Nb85aFZNqApIZgcL3aNBVUGafYjGaHEYkKEImnJR9N1xci0teouFBRPZDNpii6FoPINA.2ErxnoupNKVB7TzAz88Ww3OHXLW3Hpm76sPBFUtFgK2VAxrIqaMLAhYF+10STftZ6LLBtzbRQdxmfGZ7mVlskGkw9mG8p6CNsHxTyq9rqRyaQQjvpw6/2XYz56FCdsec903vzPcDk6uAfftPsikAuVEnV6w+hwi6tykwsTuT3R61si+ncmk4/upt/3bYoCvwlYOBwyU18lcSKX3QiLyYBoPI2oTEyG3LjSGQNGx/KZqAqfXXhfW3NU3S2hou74d1B6fzXXwzEjueKK20ft+6NuPwt31TTRck21ZaNMuiiSi/NwAYDG5ITywjYGfTeGikz+elyw2]iz454Ud6VtG2DrM1ufhRw4PPY33Pn4VzKC42lajQ+ccwe+98cTFQXL44qhvy1fldpkAFKLgOHwpBtru/KxFvtGwjhrAdXFoPoYRE1218x00yIVx14oDKB1Awo4nw44]Fsfs1q6qrg/aNOYren1E0o3kwNbdNd3rniq4mfU4z6o9NIMbAg4VI+mKzbm2ihnjM+Mz3KLKZNNJhtNMpRUDXoBokqegy8cuBkPPfffuQ+wpd9XFExNNSHSqzjiR6K6F52eCMwmAg7ZgGlye5LKEEUWB7IyUNYpIrFDBGOBp5eYIOeJwce5MBGKGrB0]RbkQdq6pQCG9/+5B4YDZN5bNjPCvxjYENAYfqEU2yMddGMWF8ZnywOyZbDDzYLKhpGroCzZW6hx84qUb8cy+n3LN39g7B6s562tBMRYz83bMLkif/st9rU5PGB2eCEp1hpK6VwpoUDsK9pZOZKssL2pa7B1uFblztTZHONMiXRiwVmCjq2UAn3vvH9QMX7ZNPcqz0gszsMHAhqSIMMDO9mC310PnZmJkSzJRgpS2QKcGFHGLrRv2s63zAt90wxNquQ1Gwa00Zy7tR8WAjEE714i7kZpLJa0CCv6VIT8s6PS8aN44sLA5rEgZDaVvij5EYldBEjoEZ1QeRoZNaGRFK6IqHFbMc3P/4QspEr5VE9zk61N2VgQ8ChejRdsTHXZmNgf6Z81ltAmltww2WCyoaRq6AvqvuIcvOWB92PC9wLH+GZHHKs7Frh/UwpZSiVLRMq+1rSx5aStddmMs3iLFetUoiObXUpZlWqrfIp40wmrOunwRKDg63cz92230ob8tBKctIXpoPGkSBabzF8MxEybnimttCG++7oonYagAbNSjPCt9Md3AxvChQ3jxySfh7chmQqgwzc3MIODzYc2mTdXqNtcPneZ7vF42Z1qk6J9F8sVkI8803hvipYf7BpMINuc2IyQaTDb1k4+9z/5brwgg2C12g60T/1WH1BfHkYh7k3kP4PGGbUDSNBB9dXnVtrfIOecCxsdefAyGFvQajFhwpiPPgQct8xATfvEXSTeyt6z4Hh8VT9iCXat3oX7sWq9evL3vcpw7UDWxAj)Y1haP9+dPdXp8g/xITIyOYHh/HcaeelinWGvPTNI2jv7mZjBsD4LBYvJht5fjDzYLIht/gy2WCyw/RDnlpSyZ6yf/WwvDJ+U+5BFKtBNRtEvPKfTGUQj6ZP8vcebUNLcxRmY/a/58NWRBP5wnR8rAZds1uNsC9aRuL3DMIx6doX/WI9Th0X7raegAY/1kjczLlglSK16h9SNTeov0+dKk /..t7N8rIV119844ezm8+zrMwQ2HtycEMv2ianiOLOKww016QUgVzZ4L3g6Rr3BIS9biC4bZ8g/QCOc+Ce67zMqmdhezsiUF1qvwpOLQTKE/sp3mZhP9vgA5GSqWFRbi9Kawee8BMgNS2qCGpNIwmoMlqKmbqOLIf8pY1s7a8ETd2FhOD3v3SN3GkZmDRJyferZ+yY+/ni1a3839E0qe+g5/e/ sR3+4m/83g8WE5INv6zP118HleQHINfsxPOeu4/Fd4v+tycuP2ZxiycaNctQt5eJL4SUKrKeyqE1eqD/npBbT/vu34IU/ORU8c8OR8UaXicJMKNbPNs0G+Dcz895kc7D7I87c+z7WLr1XOIYIGYxctvp2H7jpZ1fzz5mHpvy91R900ep/oRgNUnxPcSLY+KuNMmHehYj7juwl/7Fiw0d/fT9ZpKqMnnufYPRrxjPB09TuS+9W65BdkJrI2otEoGsFU8ymrqamhsvLMyeq33vf/0QbxP/zhDwwNDTEquqKOwmpqKunp6dx+++kdxIkO9Pe//z1ioZxoIoD5t3/7tzMeYqL7TpRpYdjp4sSNsPh/r8LNeHp7o+1ZkqOFnF065Hj20771ALjjuAUl01FLTk76kZ50i2orC7WvRPSS/LH23aZPidEw/EmwUWw24HIMOnTLPSTY7rb7ER+vTZk1Kwp5ycmvi3ORUcPonxgU61+hp5zmSmYpFbcZ9QpDVeqSwkeFhknRaNCoV4VgMiz2VnKIitIaT8c7y6DB+9/gpYzY1p2DKyA13VHwtSVbaB/rpO/u40vTL1DO53R/Uqbscz1HtvXkemLd3t2nHXPYmqD+PdFEpURUF8T5DCLd+y17qeVJrp58q/LTroY6ujs6Thlzdn4+js33PNHOCzrcJh5edh8hr4fGQwfp60g46Yi5eXnMIibwHSfbZ425Yv7CN67nz9tg586ddHV1nbKu8vPzWbx48WfuK15Hb+95myr3XyhNEOGrwD+rq02PKOKRhxrhRwt+cNp57rT8RWGr0qjINNAbNVA/HuEVaTL/oVDzBCgsL6TTtYzT2Ia+911cOnjsbypyXE/XocXvcSuzK9BFZkp7ldkTZ5duARu/jwH6QRB9RBiSlwaw8K1ZdEjoMNuKJdb6kLOySUoj1w9blaXm6PYI3Bdwo/Y8yT7+XAYEjBqTduQekCOKngvkUr+e6HldxT4220r40AA1A5CURps3wTL5sOhFvj+5P9kbNh9ytpIdiRzX9vd1BVBzVaoWA5eL8zNhHfeBGkyVE46qxwlSVqod5dnwyN/hZwiGNODswkJNN16ErheEeDlrYTu7cAo20eo80h1rKoONY2wS5qhgAA1sKe1mjswfP+09+htz+MYVC5CKtFeDupQCvqUENPTOni3rpewvjhZyRKZBhXN+hiZgxEOHEm8Syx2uOcOHbGIno3VODyYYozbsURHvjGKxDj7Y9D+FrDaE1w7tUz2dstky7vwqXVcVvqXcSHjKe+r5KS60wUFyp6hQrZ7t9He/RDwpsTZBdKSbdliNmpMZ1NZKst1BWmEW8WMMntqASq1g+kiShEtb2YzIZ+XzZs309sjg6KJhcS9Qz00w9eYSH55RX8M8+ggLuKSqUw4Zi7d6uoYH7aTvdN+azv@VOeXxMy9NP6Idx9h6BdN/C3F4NKoco550hoUzp+t1p76927s87x0fwR/RsOxAnmhrm2il29vWINKc/a3ddD6wg8soNiamoa5d0GsPvtjNZEeNPt4b6Ke4gMm2jt7ScQTVRZxPco0T2EnPMafS54exPceLloLzQx4PeTlgT+EGxpSMD2RIAoSSpcgTjjHiEqC6UFiaZ/oxqa+2B5bhZbd/Zjs01unj2dQ0NB8qNNtAgSgCJYJX+dkYGTmSLF2jgu2YfG+qECTyw1fho0XvoH+zjQMcJYnw6r3oA6asBqScVhd7Bq1SoaRttwGG04T39dVTrTy/bEZFBxbg5FOdm8+uqrHKo5zKBotjtqNpud8vJylq1YQUBhwPjEHFYr6hE1n2DiG3Rg+/YvxOz0yiuvUFtbe8p6njzt6ldeeSUT9XPodlN3Nzc2sX7/++LesoKAAr9f7v3Leiv7Z5XPxOEMIPNSbK3Z/6ptREa3ip9iXcT7uPNzf9M77oZ82zI8/BHV93NIOLiH13S6uiIL7ovIS+0ETs86738ccfp6+v71R/Izub22677XPv75nIxrGxnS6oe+yxxxgeHj7lvGlpaXzzm9+cyGVNav/0WDj6aefVgKLthvXHj/5hg0blABk3bp1ExrQZ21055138sgjj5z069P97HT7T3TfiwiShTnf8VzZ/SHuvAJme3h4+/HcuNy85KePe011Dob2QOXPmHN9p3759CDiQvdDhHLI4LNN+0N3m+C5uzbyKroFBSu0pl0bnnTLPTV3dNI43Yu2ECafCkmQm4wS4ksjAiY/kuw17+02X78Q57uZvb284vk/7312nned5F68hU6RqBYSORXRAQ9Pu7dx9112U130e31/N9apLLkUvUmnHxiF7tBw+RH529ilj7u7rY+7iJcwoKz0pm3LiTHr9fvbXN6LAxdcCj5DtuV7IAx2z9c38/7Ziv+PLNyiYF2Z1k21PZcVB1407chjraleDn0+tZBD/phUW80vpXtvX2Hiw823nvzjzPGIV7aDz/8NBdffyoLxmeN+XTbnmnEiwtk5Z+5sJaMrnjdRKFm7ds3x3Z7+X/PKv5ctX66sCfHBFFoiVz5+NgPRbTTOgGUQrrpCNODq+XAL186wojdCXh4UCDXqZrhIe9Vp51mesUEJNmOyVxFffG+olIsGKvnMt75FSUlCqE+YWBvpcedoc37IS3vBYTDgjol4Lv8y3g928le1Pz6+rXgWBr21bB9/jbZGWFAr35HSAAAFOU1EQvQGu6cmincFeaPojFFINWItjaA5+9AosqzCyepcYk6RmQhpkiNMNB+GHr9jt00+UkeJegDuxVs6XB+BlxvF9SbUN8NU+OpdAXH6dsKObkSvUGZ+YtRGtTFXPx21iNMyp10ytpo62njzpo7KS+EzBgc7oUr1sH8SRKzk3+KWkolpnKh1sTYexpgfnkZfeOZ5BemkZqUSbLexj13f+8233Xi/goTa114NeLP5k2biUSjFJMX8/yTT5x230+vq2NZ1ay8XIqysemxHFW/PHoH9Ep18eSEgXjmXCJy0o03R1v8ER+zjxt382DLxy862VlyxPHfGzXT//sd0+NY9tmpzmUYKLu4yqy8vLInXRytVNs18bb190jPG/HvhOfdV4Bw1qyfDk/uv/+z50rUV1NSUoi0+E4pVKre2h3EuwjM*9jpvimf9z0601x91r6PfviowiAnFSWIEdIMgbcFfngz/PRh+PY34KUP4IIFcLAe+kZgwlIY6IFySUUha5gwuZSlq5YQVtPLONjTsQz2NFTh73iIP2D46jMi1kxeTqBiIwslEyeeepFvnbbqfBRhzwIFDNFhfdsotcYyzscc97mLFpGf1Un90BHu3vSosk76hkcQ24n34uneGyd+U/785z/zta99ja1bt5KU1HTSN75/ox2Pe5zLLrucjvEBFk2ehsfvp3tgkN6hT4KDM9038fvC7CxcAwOM9Pex5pKE2NpE1/NEjv9F/Y3/7tr4tN90prEd+26d6Tk69h6aqH91uvNOdN9gONg9d99z2rUh1ktRcZECHzpm/4wv+lnzfKDjAPfffv/xc5ypGvNFr/fZZ5/Fbref8kOZG6xvjhhtuUL6fn+UDn21tHBvL6cb81FNPkZmZecp5BwYGuOW860XCb8+/8nwcbg4CBnf05WdSKj/c9HHjntRN9955m5kye675HqahwZGlMTk5k5KSKfdxhMIsGF31Um/84yP4/04KZ8yBZfHi82ShEmSsVutpwZmIyNozRbEC3tb/xGi.ZFQa5nbzaOez335/PF5Q6P8bA8ffvwyiIpi.8vWwbtwycoGVBQrwQNW/i4ucBTtNQCXGEVmxzJIAYF6WzAwIZ98xgcbXOY9LVt4GKgy15PRxc8KgYDo12S5y9exNoRfFPmDYodhQulxzmv49+0NAyezPNN303E806i08xcuIClt3Hn6jOE16BY4HNAatEuQgYHh30XLDBycnBhx90P7dwYjXchpKj6byhm2+HUyvHzzhuHKmTPgwhAGQIX2xo2b6CQV1RhEBQQY16QhFxOBAKE0+e/ff4Ybjx4zvP+M4mNMRExdjkIWOpuly0zFuRtYL2m/z+Ncyhhe/NjP8+P2IgZdF1UGLu5+BnQky anvOMuREDhA4clAf1nC+LHwewVZbnuHvDQUGGulpholPdz0kszky+Pr6onQ2Q61DQ0+fwc3BHmweqPAE5d/9R48yiIuLw8MZ1NhZuWEjw4cPHxg87lwwZFCQQni+iEwoR4UworPDF0aETJxhEREQOgap6Rmbf/DZi8vNo6Vy+1paDBOnTcMaR3mZmShlXTt3nkFEXIxBTFoGvJmZ1DICXxy8FPKE4c2LFwyb/h9iqDQtwpuPQJKwjjwobZgYGTGIYtnHBTmcg5Hh2rlzeMtn9DyIqwKG5V9c4QwLK8ghIIw的zEhLSkhNf9jqFGLiV8HoEcPp350NLAyNDILPpzAQcjMx9SA+t6PnQZDaLVu3Mty8d5/BwtiYYe6iRQx1dXUoRjQ1NTEkx8NB03oiaLPm20yCpQ1tpAG2/IOtDBPtEQ24Ddu2NXh7e20UG+bi1gzikpAj6ttblwhjK83IZjpw6RVYeBHU+PnDnMqCABzQpbvoS16xuZ1QuUFsGiG1vUHIXk31CrHuolY+IiZNEutmOKE2KzeuZwgPDsdlMNGyYmDOKgs8yRALb0DCoPiGmLEgpnmDXYogahMNKakTiGm3EAfGEVuq4Dchs3N+44coUtnAwBbKLRmDEuAtwAAAAB7RU5Erk3ggg==

纯base64是从逗号之后算起的,越长说明图片越大
保存的图片样例:
这是整个div保存下来的图片
这是整个div保存下来的图片

html2canvas官网:http://html2canvas.hertzen.com/
首先要先安装依赖

npm install html2canvas --save

页面中需要引入:

import html2canvas from "html2canvas"

关键代码:

点击按钮之后触发的函数
farmImage是div盒子的属性

      <div ref="farmImage" id="farmImage">
      		这里是需要保存的东西
      </div>
// 添加农场场景更新数据库中
   updateSceneInfo() {
     let isOver = this.isOverflow()
     if(isOver){
       if (this.farmProperties.objectsNumber === 0) {
         this.$modal.msgError("当前界面没有元素,不可保存");
       } else {
         const canvasID = this.$refs.farmImage; // 获取要生成图片的页面元素
         const rect = this.$refs.farmImage.getBoundingClientRect();
         // 生成图片并上传到数据库保存
         html2canvas(canvasID, {
           scale: 0.5, // 数值越大生成的图片越清晰
           useCORS: true,
           allowTaint: true,
           y: 0, // 滚动条高度修复
           x: 0,
           allowTaint: true, //开启跨域
           useCORS: true,
           scrollX: 0,
           scrollY: rect.top, // 关键代码
           height: rect.height, // 加高度,避免截取不全
         }).then((canvas) => {
           let dataURL = canvas.toDataURL("image/jpeg"); // 拿到数据流
           this.base64 = dataURL.substring(dataURL.indexOf(",") + 1); // 只取逗号之后的数据
           })
       }
   }

猜你喜欢

转载自blog.csdn.net/qq_44035882/article/details/126737667