CSS、SVG、Canvas绘制和导出特殊字体

时间：2023-03-29 13:15:38 HTML

娆㈣繋鏉ュ埌鎴戠殑鍏紬鍙凤細鍓嶇渚︽帰鏈€杩戝湪涓€涓」鐩腑闇€瑕佺粯鍒跺拰瀵煎嚭鐗规畩瀛椾綋銆傝繖閲岀畝鍗曡В閲婁竴涓嬶細鎵€璋撶粯鍥撅紝灏辨槸鍦ㄨ瑙変笂鐪嬪埌灏卞彲浠ヤ簡锛堥瑙堢姸鎬侊級锛岃€屽鍑哄氨鏄妸鐪嬪埌鐨勪笢瑗胯浆鎹㈡垚鍥剧墖锛堟垨鑰匔anvas锛夎繘琛屽悗缁鐞嗐€傝繖閲屾€荤粨浜嗕笁绉嶆柟娉曪紝鍒嗗埆鏄疌SS銆丼VG鍜孋anvas銆傝鎴戜滑鏉ョ湅鐪嬪畠浠悇鑷殑鍖哄埆鍜屼紭缂虹偣銆?.CSS缁樺浘鍜屽鍑洪鍏堟潵鐪婥SS锛岃繖鏄渶绠€鍗曠殑缁樺浘鏂瑰紡銆傚亣璁綡TML鏄繖鏍风殑鍓嶇渚︽帰

娣诲姞涓€浜泂tyle.text{display:flex;瀹藉害锛?00px锛涢珮搴︼細200px锛涜瘉鏄庡唴瀹癸細灞呬腑锛涘榻愰」鐩細灞呬腑锛涜儗鏅鑹诧細rebeccapurple锛涢鑹诧細#fff锛涘瓧浣撳ぇ灏忥細36px锛沠ont-family:MFMengYuan-Regular;}杩欓噷缁欎簡涓€涓壒娈婄殑瀛椾綋MFMengYuan-Regular(姊﹀厓-Regular)锛屽綋鐒剁幇鍦ㄨ偗瀹氭病鏈夋晥鏋滐紝鍥犱负绯荤粺娌℃湁杩欐牱鐨勫瓧浣撱€備负浜嗕娇杩欑鐗规畩瀛椾綋鐢熸晥锛岄渶瑕侀€氳繃@font-face{font-family:"MFMengYuan-Regular";鎵嬪姩瀹氫箟@font-facesrc:url("https://webfontsource.yuewen.com/api/v1/yfont/font.eot?base64=0&font=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2");/*IE9*/src:local('鈽?),url("https://webfontsource.yuewen.com/api/v1/yfont/font.woff2?base64=0&font=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2")format("woff2"),url("https://webfontsource.yuewen.com/api/v1/yfont/font.woff?base64=0&font=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2")褰㈠紡at("woff"),url("https://webfontsource.yuewen.com/api/v1/yfont/font.ttf?base64=0&font=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2");}杩欓噷鏄綉涓婄敓鎴愮殑涓€涓瓧浣擄紝瀵逛簬CSS鏉ヨ涔熸槸灏忚彍涓€纰燂紝鏁堟灉濡備笅鏄笉鏄緢瀹规槗锛烠SS鐢诲浘寰堝鏄擄紝浣嗘槸鐜板湪鍙槸瑙嗚涓婄殑锛岄偅涔堝浣曟妸杩欎釜鏍峰紡杞垚鍥剧墖瀵煎嚭鍛紵鍦ㄨ繖閲岋紝鎮ㄩ渶瑕佷娇鐢⊿VG涓殑foreignObject鍏冪礌銆傞€氳繃杩欎釜鍏冪礌锛屽彲浠ュ皢HTML宓屽叆鍒癝VG涓紝姣斿

鍓嶇渚︽帰

閮ㄥ垎鎴浘宸ュ叿搴擄紝濡俬tml2canvas锛屼緷璧杅oreignObject鍜孲VG鐨勭壒寰佹湰璐ㄤ笂灏辨槸涓€寮犲浘鐗囷紝鐒跺悗鍙互鍦–anvas涓婄粯鍒跺浘鐗囷紝鍐嶅鍥剧墖杩涜杩涗竴姝ョ殑鍚堟垚澶勭悊銆傛暣浣撴€濊矾濡備笅锛氫笉杩囬渶瑕佹敞鎰忕殑鏄紝SVG鏄竴寮犵嫭绔嬬殑鍥剧墖锛屽繀椤诲寘鍚粯鍒跺唴瀹圭殑鎵€鏈変俊鎭€傛瘮濡傞渶瑕佹墜鍔ㄥ皢鏍峰紡style宓屽叆鍒癲iv涓紝鍍忚繖鏍凤紙浠ｇ爜缁撴瀯鍙兘涓嶅お濂界湅锛?divclass="text">鍓嶇渚︽帰

鎺ヤ笅鏉ラ€氳繃JS鐢╢oreignObject鍏冪礌鍖呰９璧锋潵锛屾敞鎰忕壒娈婂瓧绗︾殑杞箟consthtmlSvg=`data:image/svg+xml,<韬綋xmlns="http://www.w3.org/1999/xhtml"style="height:100%;margin:0">${dom.outerHTML}`.鏇挎崲(/"/g,"'").鏇挎崲(/%/g,"%25").鏇挎崲(/#/g,"%23").鏇挎崲(/{/g,"%7B").replace(/}/g,"%7D").replace(//g,"%3E");img.src=htmlSvg鍦ㄦ寰楀埌鐨勪竴涓猄VGway瀛楃涓叉槸瀹屾暣鐨勫浘鐗囩瓑绛夈€傘€傘€傚浘鐗囧嚭鏉ヤ簡锛屼絾鏄瓧浣撳ソ鍍忓皯浜嗭紵馃涓轰粈涔堜細杩欐牱锛熷師鍥犳槸涓婇潰鐨勫瓧浣撶敤鐨勬槸鍦ㄧ嚎瀛椾綋锛屽湪绾垮瓧浣撲箣鍚庡氨姝ｅ父浜嗚浆鎹㈡垚瀛楃character锛屼笉浼氳姹傦紝鑷劧涓嶄細鍖呭惈瀛椾綋鐨勭湡瀹炰俊鎭紝鎵€浠ヨ瑙ｅ喅杩欎釜闂锛屽繀椤绘彁鍓嶅皢瀛椾綋杞崲鎴愭湰鍦扮殑base64鏍煎紡锛屽涓?divclass="鏂囨湰"><鏍峰紡>@font-face{font-family:"MFMengYuan-Regular";src:local('鈽?),url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAwcAA0AAAAAAEPgAAAAAAAAAAAAAAAA...==)鏍煎紡('woff');}.text{鏄剧ず锛氬脊鎬э紱瀹藉害锛?00px锛涢珮搴︼細200px锛涜瘉鏄庡唴瀹癸細灞呬腑锛涘榻愰」鐩細灞呬腑锛涜儗鏅壊锛氫附璐濆崱绱壊锛?MFMengYuan-Regular;}鍓嶇渚︽帰

杩欎釜寰堟甯革紙SVG瀛楃鍙兘浼氭洿闀匡級~涔熷彲浠ュ湪Canvas涓婄敾杩欎釜鍥綾onstcontext=canvas.getContext('2d');context.drawImage(htmlSvg,0,0,瀹藉害,楂樺害);鏁堟灉濡備笅鍙﹀锛屽浘鐗囧彲浠ラ€氳繃Canvas杞垚blob鍦板潃銆備笌瀹屾暣鐨凷VG鍦板潃鐩告瘮锛屽湴鍧€鏇寸畝娲侊紝鑰屼笖鏈夋椂鍥剧墖澶ぇ锛岀粰鍥剧墖src璧嬪€兼椂浼氬鑷存祻瑙堝櫒鍗￠】锛屽皾璇曚娇鐢╞lob鏂规硶canvas.toBlob(function(blob){img.src=URL.createObjectURL(blob)})鏁堟灉濡備笅瀹屾暣鐨勮浆鎹㈣繃绋嬪彲浠ユ煡鐪嬩互涓嬮摼鎺ワ細CSS瀛椾綋(codepen.io)CSS瀛椾綋(runjs.work)2.SVG缁樺埗涓庡鍑鸿鎴戜滑鐪嬩竴涓婼VG鏂规硶銆傚拰CSS鐩告瘮锛屽彲鑳戒細绋嶅井楹荤儲涓€鐐癸紝涓昏鏄湪鏂囧瓧鎺掔増鏂归潰銆傝繕闇€瑕佹敞鎰忓瓧浣揵ase64澶勭悊

鍓嶇渚︽帰杩欓噷闇€瑕佹敞鎰廠VG涓殑鏂囨湰灞呬腑鏂瑰紡锛屼娇鐢╠ominant-baseline锛堝熀绾垮榻愶級鍜宼ext-anchor(anchoralignment)锛岀粨鍚堜笅闈袱涓紝鐒跺悗閰嶅悎x=50%鍜寉=50%锛岃揪鍒版按骞冲瀭鐩村眳涓殑鏁堟灉锛屽洜涓轰笅闈㈠凡缁忔槸SVG浜嗭紝瀵煎嚭鏇存柟渚垮浘鐗囨垨鑰呯粯鍒跺湪Canvas鐢诲竷涓婏紝鍙渶瑕佸皢鏁翠釜dom缁撴瀯杞箟鍗冲彲锛屾棤闇€棰濆鍖呰９consthtmlSvg=`data:image/svg+xml,${dom.outerHTML}`.replace(/"/g,"'").replace(/%/g,"%25")t;).replace(/#/g,"%23").replace(/{/g,"%7B").replace(//g,"%7D").replace(//g,"%3E");img.src=htmlSvg鏁堟灉濡備笅銆傚湪Canvas涓婄粯鍥句篃鏄竴鏍风殑鏂规硶constcontext=canvas.getContext('2d');context.drawImage(htmlSvg,0,0,width,height);鏁堟灉濡備笅銆傚畬鏁寸殑杞崲杩囩▼鍙互鏌ョ湅浠ヤ笅閾炬帴锛歋VG瀛椾綋(codepen.io)SVG瀛椾綋(runjs.work)3.Canvas缁樺浘鍜屽鍑烘渶鍚庢槸Canvas鏂规硶杩欓噷瑕佺敾鐨勪笢瑗垮緢绠€鍗曪紝灏辨槸涓€涓煩褰㈠拰涓€琛屾枃瀛楋紝涓昏姝ラ濡備笅constcontext=canvas.getContext('2d');context.fillStyle='rebeccapurple'//濉厖棰滆壊涓婁笅鏂囥€俧illRect(0,0,width,height)//缁樺埗鐭╁舰context.fillStyle='#fff'//濉厖棰滆壊context.font=`36pxMFMengYuan-Regular`;//璁剧疆瀛椾綋灞炴€ontext.textAlign='center';//璁剧疆鏂囨湰瀵归綈context.textBaseline='middle'//璁剧疆鍩虹嚎瀵归綈context.fillText('FrontDetective',width/2,height/2);//缁樺埗鏂囧瓧鐨勬晥鏋滃涓嬩笉鍑烘墍鏂欙紝瀛椾綋娌℃湁缁樺埗鍑烘潵锛屽洜涓虹郴缁熸病鏈夎繖鏍风殑瀛椾綋锛岄偅涔堝浣曚富鍔ㄦ坊鍔犲瓧浣撳憿锛熻繖閲屾湁涓€涓瓥鐣ャ€侰anvas璇诲彇椤甸潰涓婂憟鐜扮殑瀛椾綋銆備篃灏辨槸璇达紝濡傛灉鍦ㄩ〉闈笂棰勫厛娓叉煋濂藉瓧浣擄紝閭ｄ箞鍦ㄧ粯鍒剁殑鏃跺€欏氨鍙互鐩存帴缁樺埗鍑烘潵銆傚鏋滃瓧浣撴槸鍔ㄦ€佺殑锛屽彲浠ュ姩鎬佸垱寤篶onstfontStyle=`@font-face{font-family:"MFMengYuan-Regular";src:local('鈽?),url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAwcAA0AAAAAEPgAAAAAAAAAAAA...==)鏍煎紡('woff');}`conststyle=document.createElement('style')style.textContent=fontStyleddocument.head.appendChild(style)鐜板湪閲嶆柊缁樺埗锛屽涓嬪浘锛屼竴寮€濮嬫槸娌℃湁瀛椾綋鐨勶紝鍒锋柊鐒跺悗缁樺埗鏂扮殑瀛椾綋銆傚師鍥犳槸涔嬪墠鐨勪唬鐮佸彧鏄〃绀洪〉闈㈡湁杩欎釜瀛椾綋锛屼絾鏄繕娌℃湁娓叉煋鍑烘潵銆傞€氳繃Canvas缁樺埗鍚庯紝瀹為檯涓婃槸娓叉煋浜嗗瓧浣擄紝鎵€浠ュ瓧浣撹绛夊埌绗簩娆℃墠浼氱敓鏁堛€備竴鏃︾煡閬撲簡鍘熷洜锛岃В鍐虫柟娉曞氨寰堢畝鍗曚簡銆傚鏋滀笉鏄疄鏃剁粯鍒剁殑锛屾瘮濡傞瑙堢姸鎬佹槸閫氳繃CSS缁樺埗鐨勶紝閭ｄ箞Canvas缁樺埗鐨勬椂鍊欙紙姣斿鐐瑰嚮鎸夐挳鐢熸垚棰勮鍥撅級锛屽瓧浣撳綋鐒跺凡缁忔覆鏌撳ソ浜嗭紝鑷劧涔熷氨鏈変簡涓嶄細鏈夎繖鏍风殑闂銆傚鏋滀竴瀹氳瀹炴椂缁樺埗锛屽彲浠ラ噰鐢ㄩ€愬抚瀵规瘮鐨勬柟娉曘€備竴鏃﹀浘鍍忓彂鐢熷彉鍖栵紝鍒欒〃绀哄瓧浣撴覆鏌撴垚鍔熴€傚疄鐜板涓嬨€傝繖涓柟娉曞弬鑰冧簡寮犳柊鏃€佸笀鐨勮繖绡囨枃妗ｏ細canvasAPI涓枃缃?涓枃鏂囨。-CanvasRenderingContext2D.font//鍏堢敾涓€涓殢鏈哄瓧浣揷ontext.font=`36pxUNKNOW`;context.fillText('鍓嶇渚︽帰',瀹藉害/2,楂樺害/2);constdataDefault=context.getImageData(0,0,width/4,height/2).data;constdetect=function(){//鐒跺悗缁樺埗瀹為檯瀛椾綋context.font=`36pxMFMengYuan-Regular`;context.fillText('鍓嶄睛鎺?,width/2,height/2);//濡傛灉鍓嶅悗鏁版嵁涓€鑷达紝璇存槑瀛椾綋娌℃湁鍔犺浇鎴愬姛锛岀户缁娴媣ardataNow=context.getImageData(0,0,width/4,height/2).data;if([].slice.call(dataNow).join('')==[].slice.call(dataDefault).join('')){console.log('nochange,re-render')requestAnimationFrame锛堟帰娴嬶級;}};浠ヤ究瀹炴椂缁樺埗鐗规畩瀛椾綋Canvas鏈韩灏辨槸涓€寮犲浘鐗囷紝鍙互鐩存帴杞垚鍥剧墖鎴栬€呭鍑猴紝杩欓噷灏变笉浠嬬粛浜嗐€傚畬鏁寸殑瀹炵幇杩囩▼鍙互鏌ョ湅浠ヤ笅閾炬帴锛欳anvasfont(codepen.io)Canvasfont(runjs.work)4.鎬荤粨鍚勮嚜鐨勪紭缂虹偣涓€鏂归潰杩滆繙棰嗗厛浜庡叾浠栦袱绉嶆柟娉?SVG缁樺浘鐩稿绠€鍗曘€傚湪鐭㈤噺鍥惧舰澶勭悊涓婏紝姣斿绗旂敾鐗规晥锛屾瘮CSS鏇存湁浼樺娍銆傝繖涓ょ鏂瑰紡瀵煎嚭鐨勯毦鐐瑰湪浜庡鈥嬧€嬩竴浜涘閮ㄩ摼鎺ヨ祫婧愮殑棰濆澶勭悊銆傜敾甯冪粯鍥炬湁鐐瑰鏉傘€傚湪鐗规畩瀛椾綋涓紝闇€瑕侀€愬抚妫€娴嬫槸鍚︽覆鏌撱€傚ソ澶勬槸鐢荤殑灏辨槸鍥撅紝涓嶉渶瑕侀澶栧鍑恒€傜粯鍒跺拰瀵煎嚭CSS猸愶笍猸愶笍猸愶笍锛堢畝鍗曪級猸愶笍猸愶笍锛堜竴鑸級SVG猸愶笍猸愶笍锛堜竴鑸級猸愶笍猸愶笍锛堜竴鑸級Canvas猸愶笍锛堝鏉傦級猸愶笍猸愶笍猸愶笍猸愶笍锛堣秴绠€鍗曪級CSS鍜孲VG鐨勯€夋嫨鍙互鏍规嵁瀹為檯鐨勬枃瀛楁帓鐗堣姹傦紝姣斿鏂囧瓧闇€瑕佹崲琛岋紝瀛椾綋澶у皬涓嶄竴鑷淬€傚湪杩欑鎯呭喌涓嬶紝CSS鏇存湁浼樺娍銆傛棤闇€鍑嗙‘璁＄畻鏂囨湰鍧愭爣銆傚彟澶栵紝鍦ㄥ疄闄呭伐浣滀腑锛屽彲浠ユ牴鎹渶瑕佺粍鍚堜娇鐢ㄥ绉嶆柟寮忥紝鍗抽瑙堢姸鎬佸拰瀵煎嚭鐘舵€佺殑瀹炵幇鏂瑰紡涓嶅悓锛屾瘮濡傚浘鐗囨贩鍚堬紝鍦ㄩ瑙堢姸鎬佷笅鍙互閫氳繃CSS鏉ュ疄鐜般€傛垜瀵煎嚭鐨勬椂鍊欏彧鐢–anvas鐢诲悎鎴愩€傚笇鏈涜繖浜涙柟娉曡兘甯︽潵涓€浜涘惎鍙戙€傛渶鍚庯紝濡傛灉瑙夊緱瀵逛綘鏈夊ソ澶勫拰甯姪锛屾杩庣偣璧炪€佹敹钘忋€佽浆鍙戔潳鉂も潳娆㈣繋鍏虫敞鎴戠殑鍏紬鍙凤細鍓嶇澶т睛鎺?/p>