一個能把code轉換成svg的BBCode

留言板
回复
头像
ejsoon
圈圈精英
圈圈精英
帖子： 4152
注册时间： 2022年 11月 18日 17:36
为圈友点赞： 164 次
被圈友点赞： 194 次
联系：
联系 ejsoon

一個能把code轉換成svg的BBCode

帖子 由 ejsoon »

經過測試可行。

bbcode:

代码： 全选

[svg/]
html:

代码： 全选

<img style="max-width: 100%; box-sizing: border-box;" width="36" height="36" 
     src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiMwMDAiLz48L3N2Zz4=" 
     onload="
        (function(img){
                // 1. Find the first previous 'div.codebox'
                var codebox = img.previousElementSibling;
                while(codebox && !codebox.classList.contains('codebox')){
                    codebox = codebox.previousElementSibling;
                }
                if(!codebox) return;

                // 2. Get <code> innerHTML
                var codeElem = codebox.querySelector('code');
                if(!codeElem) return;
                var codeHTML = codeElem.innerHTML;

                // 3. Check if it starts with &lt;svg
                if(!codeHTML.trim().startsWith('&' + 'lt;svg')){
                    img.remove();
                    return;
                }

                // 4. Replace &lt; and &gt; with < and >
                var reLt = new RegExp('&' + 'lt;', 'g');
                var reGt = new RegExp('&' + 'gt;', 'g');
                var svgText = codeHTML.replace(reLt,'<').replace(reGt,'>');

                // 5. Parse SVG
                var parser = new DOMParser();
                var doc = parser.parseFromString(svgText,'image/svg+xml');
                var svg = doc.documentElement;
                if(svg.hasAttribute('width') && svg.hasAttribute('height')){
                    img.width = svg.getAttribute('width');
                    img.height = svg.getAttribute('height');
                }

                // 6. Convert SVG to base64 and assign to img.src
                var serializer = new XMLSerializer();
                var svgStr = serializer.serializeToString(svg);
                var b64 = btoa(unescape(encodeURIComponent(svgStr)));
                img.src = 'data:image/svg+xml;base64,' + b64;

                codebox.remove();

        })(this);
     ">
tips:

代码： 全选

Convert svg code to image.
這回是用img的onload事件來觸發，同時因為代碼是直接放進img的src中，所以我感覺不會有安全風險。

是否考慮添加？@圈宝
https://ejsoon.vip/
弈趣極光：享受思維樂趣
页首
头像
ejsoon
圈圈精英
圈圈精英
帖子： 4152
注册时间： 2022年 11月 18日 17:36
为圈友点赞： 164 次
被圈友点赞： 194 次
联系：
联系 ejsoon

Re: 一個能把code轉換成svg的BBCode

帖子 由 ejsoon »

可用以下代碼測試：

代码： 全选

<svg id="etani" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="480" height="480"> <defs mode="1" rotatestep="1" displaywait="1" stepvalue="30" snapto="1"> <g id="tile0" frontfill="#f54f56" backfill="#f54f56"><path d="M 9,15.588 L -27,15.588 L -63,15.588 L -45,-15.589 L -9,-15.589 L 27,-15.589 L 63,-15.589 L 45,15.588 Z"/></g><g id="tile1" frontfill="#de90eb" backfill="#de90eb"><path d="M 0,0 L 18,-31.177 L 36,0 L 54,31.177 L 18,31.177 L -18,31.177 L -54,31.177 L -36,0 Z"/></g><g id="tile2" frontfill="#7786ce" backfill="#7786ce"><path d="M 0,-15.588 L 18,-46.765 L 36,-15.588 L 18,15.589 L 0,46.766 L -18,15.589 L -36,-15.588 L -18,-46.765 Z"/></g><g id="tile3" frontfill="#bb5600" backfill="#bb5600"><path d="M 0,0 L -18,-31.177 L 18,-31.177 L 36,0 L 18,31.177 L -18,31.177 L -54,31.177 L -36,0 Z"/></g><g id="tile4" frontfill="#ece43a" backfill="#ece43a"><path d="M 18,31.177 L -18,31.177 L -36,0 L -18,-31.177 L 18,-31.177 L 36,0 Z"/></g><g id="tile5" frontfill="#f758b8" backfill="#f758b8"><path d="M 18,0 L 0,31.177 L -36,31.177 L -54,0 L -18,0 L 0,-31.177 L 36,-31.177 L 54,0 Z"/></g><g id="tile6" frontfill="#77d1e4" backfill="#77d1e4"><path d="M 18,0 L 36,-31.177 L 54,0 L 36,31.177 L 0,31.177 L -36,31.177 L -54,0 L -18,0 Z"/></g><g id="tile7" frontfill="#9caec6" backfill="#9caec6"><path d="M 0,0 L -31.177,18 L -62.354,0 L -31.177,-18 L 0,-36 L 31.177,-18 L 62.354,0 L 31.177,18 Z"/></g><g id="tile8" frontfill="#b0c350" backfill="#b0c350"><path d="M 9,0 L 45,0 L 27,31.177 L -9,31.177 L -45,31.177 L -27,0 L -45,-31.177 L -9,-31.177 Z"/></g><g id="tile9" frontfill="#1c47d1" backfill="#1c47d1"><path d="M 18,0 L 36,31.177 L 0,31.177 L -36,31.177 L -18,0 L -36,-31.177 L 0,-31.177 L 36,-31.177 Z"/></g><g id="tile10" frontfill="#f3a354" backfill="#f3a354"><path d="M 9,0 L 27,31.177 L -9,31.177 L -45,31.177 L -27,0 L -9,-31.177 L 27,-31.177 L 45,0 Z"/></g><g id="tile11" frontfill="#94e49a" backfill="#94e49a"><path d="M 18,0 L 54,0 L 36,31.177 L 0,31.177 L -36,31.177 L -54,0 L -18,0 L 0,-31.177 Z"/></g></defs> <g stroke-linejoin="round" class="etdrop" stroke="#777" stroke-width="2" transform="translate(-623.942,27.07) scale(1.361)" id="etanidrop"> <g class="etboard"/><use href="#tile3" fill="#bb5600" stroke="#777" transform="translate(605.413,128.804) scale(1,1) rotate(-120)" class="tiledropped"/><use href="#tile7" fill="#9caec6" stroke="#777" transform="translate(569.413,191.158) scale(1,1) rotate(30)" class="tiledropped"/><use href="#tile5" fill="#f758b8" stroke="#777" transform="translate(542.413,206.747) scale(1,1) rotate(-120)" class="tiledropped"><animateTransform attributeName="transform" attributeType="XML" dur="3s" type="translate" values="542.413,206.746;542.413,206.746;704.414,269.1;704.414,269.1;542.413,206.746" repeatCount="indefinite"/><animateTransform attributeName="transform" attributeType="XML" dur="3s" type="scale" values="1,1;1,1;-1,1;-1,1;1,1" additive="sum" repeatCount="indefinite"/><animateTransform attributeName="transform" attributeType="XML" dur="3s" type="rotate" values="-120;-120;60;60;-120" additive="sum" repeatCount="indefinite"/></use><use href="#tile4" fill="#ece43a" stroke="#777" transform="translate(605.414,253.512) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile2" fill="#7786ce" stroke="#777" transform="translate(672.913,230.129) scale(1,1) rotate(-60)" class="tiledropped"/><use href="#tile1" fill="#de90eb" stroke="#777" transform="translate(677.413,128.804) scale(1,1) rotate(180)" class="tiledropped"/><use href="#tile6" fill="#77d1e4" stroke="#777" transform="translate(686.413,206.747) scale(1,1) rotate(-120)" class="tiledropped"/><use href="#tile8" fill="#b0c350" stroke="#777" transform="translate(708.913,136.598) scale(1,1) rotate(-60)" class="tiledropped"/><use href="#tile9" fill="#1c47d1" stroke="#777" transform="translate(551.413,128.804) scale(-1,1) rotate(0)" class="tiledropped"/><use href="#tile0" fill="#f54f56" stroke="#777" transform="translate(578.413,82.039) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile10" fill="#f3a354" stroke="#777" transform="translate(650.413,66.45) scale(-1,1) rotate(0)" class="tiledropped"/><use href="#tile11" fill="#94e49a" stroke="#777" transform="translate(632.413,175.569) scale(-1,1) rotate(-60)" class="tilesnapped tiledropped"/> </g> </svg>
[ svg]

原[ code]會被替換。
https://ejsoon.vip/
弈趣極光：享受思維樂趣
页首
头像
圈宝
圈圈守护者
圈圈守护者
帖子： 126
注册时间： 2020年 12月 4日 20:46
我的状态： 🎯
为圈友点赞： 111 次
被圈友点赞： 19 次

Re: 一個能把code轉換成svg的BBCode

帖子 由 圈宝 »

已添加。

代码： 全选

<svg id="etani" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="480" height="480"> <defs mode="1" rotatestep="1" displaywait="1" stepvalue="30" snapto="1"> <g id="tile0" frontfill="#f54f56" backfill="#f54f56"><path d="M 9,15.588 L -27,15.588 L -63,15.588 L -45,-15.589 L -9,-15.589 L 27,-15.589 L 63,-15.589 L 45,15.588 Z"/></g><g id="tile1" frontfill="#de90eb" backfill="#de90eb"><path d="M 0,0 L 18,-31.177 L 36,0 L 54,31.177 L 18,31.177 L -18,31.177 L -54,31.177 L -36,0 Z"/></g><g id="tile2" frontfill="#7786ce" backfill="#7786ce"><path d="M 0,-15.588 L 18,-46.765 L 36,-15.588 L 18,15.589 L 0,46.766 L -18,15.589 L -36,-15.588 L -18,-46.765 Z"/></g><g id="tile3" frontfill="#bb5600" backfill="#bb5600"><path d="M 0,0 L -18,-31.177 L 18,-31.177 L 36,0 L 18,31.177 L -18,31.177 L -54,31.177 L -36,0 Z"/></g><g id="tile4" frontfill="#ece43a" backfill="#ece43a"><path d="M 18,31.177 L -18,31.177 L -36,0 L -18,-31.177 L 18,-31.177 L 36,0 Z"/></g><g id="tile5" frontfill="#f758b8" backfill="#f758b8"><path d="M 18,0 L 0,31.177 L -36,31.177 L -54,0 L -18,0 L 0,-31.177 L 36,-31.177 L 54,0 Z"/></g><g id="tile6" frontfill="#77d1e4" backfill="#77d1e4"><path d="M 18,0 L 36,-31.177 L 54,0 L 36,31.177 L 0,31.177 L -36,31.177 L -54,0 L -18,0 Z"/></g><g id="tile7" frontfill="#9caec6" backfill="#9caec6"><path d="M 0,0 L -31.177,18 L -62.354,0 L -31.177,-18 L 0,-36 L 31.177,-18 L 62.354,0 L 31.177,18 Z"/></g><g id="tile8" frontfill="#b0c350" backfill="#b0c350"><path d="M 9,0 L 45,0 L 27,31.177 L -9,31.177 L -45,31.177 L -27,0 L -45,-31.177 L -9,-31.177 Z"/></g><g id="tile9" frontfill="#1c47d1" backfill="#1c47d1"><path d="M 18,0 L 36,31.177 L 0,31.177 L -36,31.177 L -18,0 L -36,-31.177 L 0,-31.177 L 36,-31.177 Z"/></g><g id="tile10" frontfill="#f3a354" backfill="#f3a354"><path d="M 9,0 L 27,31.177 L -9,31.177 L -45,31.177 L -27,0 L -9,-31.177 L 27,-31.177 L 45,0 Z"/></g><g id="tile11" frontfill="#94e49a" backfill="#94e49a"><path d="M 18,0 L 54,0 L 36,31.177 L 0,31.177 L -36,31.177 L -54,0 L -18,0 L 0,-31.177 Z"/></g></defs> <g stroke-linejoin="round" class="etdrop" stroke="#777" stroke-width="2" transform="translate(-623.942,27.07) scale(1.361)" id="etanidrop"> <g class="etboard"/><use href="#tile3" fill="#bb5600" stroke="#777" transform="translate(605.413,128.804) scale(1,1) rotate(-120)" class="tiledropped"/><use href="#tile7" fill="#9caec6" stroke="#777" transform="translate(569.413,191.158) scale(1,1) rotate(30)" class="tiledropped"/><use href="#tile5" fill="#f758b8" stroke="#777" transform="translate(542.413,206.747) scale(1,1) rotate(-120)" class="tiledropped"><animateTransform attributeName="transform" attributeType="XML" dur="3s" type="translate" values="542.413,206.746;542.413,206.746;704.414,269.1;704.414,269.1;542.413,206.746" repeatCount="indefinite"/><animateTransform attributeName="transform" attributeType="XML" dur="3s" type="scale" values="1,1;1,1;-1,1;-1,1;1,1" additive="sum" repeatCount="indefinite"/><animateTransform attributeName="transform" attributeType="XML" dur="3s" type="rotate" values="-120;-120;60;60;-120" additive="sum" repeatCount="indefinite"/></use><use href="#tile4" fill="#ece43a" stroke="#777" transform="translate(605.414,253.512) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile2" fill="#7786ce" stroke="#777" transform="translate(672.913,230.129) scale(1,1) rotate(-60)" class="tiledropped"/><use href="#tile1" fill="#de90eb" stroke="#777" transform="translate(677.413,128.804) scale(1,1) rotate(180)" class="tiledropped"/><use href="#tile6" fill="#77d1e4" stroke="#777" transform="translate(686.413,206.747) scale(1,1) rotate(-120)" class="tiledropped"/><use href="#tile8" fill="#b0c350" stroke="#777" transform="translate(708.913,136.598) scale(1,1) rotate(-60)" class="tiledropped"/><use href="#tile9" fill="#1c47d1" stroke="#777" transform="translate(551.413,128.804) scale(-1,1) rotate(0)" class="tiledropped"/><use href="#tile0" fill="#f54f56" stroke="#777" transform="translate(578.413,82.039) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile10" fill="#f3a354" stroke="#777" transform="translate(650.413,66.45) scale(-1,1) rotate(0)" class="tiledropped"/><use href="#tile11" fill="#94e49a" stroke="#777" transform="translate(632.413,175.569) scale(-1,1) rotate(-60)" class="tilesnapped tiledropped"/> </g> </svg>
以下圈友为 圈宝 的帖子点了赞:
ejsoon
当时明月在，曾照彩云归
页首
头像
ejsoon
圈圈精英
圈圈精英
帖子： 4152
注册时间： 2022年 11月 18日 17:36
为圈友点赞： 164 次
被圈友点赞： 194 次
联系：
联系 ejsoon

Re: 一個能把code轉換成svg的BBCode

帖子 由 ejsoon »

圈宝 写了： 2025年 11月 30日 17:01 已添加。
非常感謝！
https://ejsoon.vip/
弈趣極光：享受思維樂趣
页首
头像
ejsoon
圈圈精英
圈圈精英
帖子： 4152
注册时间： 2022年 11月 18日 17:36
为圈友点赞： 164 次
被圈友点赞： 194 次
联系：
联系 ejsoon

更新: 一個能把code轉換成svg的BBCode

帖子 由 ejsoon »

更新，加了「顯示或隱藏svg code」的選項。

bbcode:

代码： 全选

[svg={UINT?}]
html:

代码： 全选

<img style="max-width: 100%; box-sizing: border-box; width: auto; height: auto;" width="36" height="36" 
     src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiMwMDAiLz48L3N2Zz4=" 
     onload="
        (function(img){
                // 1. Find the first previous 'div.codebox'
                var codebox = img.previousElementSibling;
                while(codebox && !codebox.classList.contains('codebox')){
                    codebox = codebox.previousElementSibling;
                }
                if(!codebox) return;

                // 2. Get <code> innerHTML
                var codeElem = codebox.querySelector('code');
                if(!codeElem) return;
                var codeHTML = codeElem.innerHTML;

                // 3. Check if it starts with &lt;svg
                if(!codeHTML.trim().startsWith('&' + 'lt;svg')){
                    img.remove();
                    return;
                }

                // 4. Replace &lt; and &gt; with < and >
                var reLt = new RegExp('&' + 'lt;', 'g');
                var reGt = new RegExp('&' + 'gt;', 'g');
                var svgText = codeHTML.replace(reLt,'<').replace(reGt,'>');

                // 5. Parse SVG
                var parser = new DOMParser();
                var doc = parser.parseFromString(svgText,'image/svg+xml');
                var svg = doc.documentElement;
                if(svg.hasAttribute('width') && svg.hasAttribute('height')){
                    img.width = svg.getAttribute('width');
                    img.height = svg.getAttribute('height');
                }

                // 6. Convert SVG to base64 and assign to img.src
                var serializer = new XMLSerializer();
                var svgStr = serializer.serializeToString(svg);
                var b64 = btoa(unescape(encodeURIComponent(svgStr)));
                img.src = 'data:image/svg+xml;base64,' + b64;

                // 7. display the svg code
                if ('{UINT}' !== '1') {
                    codebox.style.display = 'none';
                }

        })(this);
     ">
tip:

代码： 全选

Place this bbcode after a svg code to display image.
如果[ svg=1]，則會顯示原來的svg code，而默認[ svg]是隱藏的。

另加上了width=auto; height=auto，以使圖片比例不會失真。

在我的本地測試通過。希望可以更新下。@圈宝
https://ejsoon.vip/
弈趣極光：享受思維樂趣
页首
头像
圈宝
圈圈守护者
圈圈守护者
帖子： 126
注册时间： 2020年 12月 4日 20:46
我的状态： 🎯
为圈友点赞： 111 次
被圈友点赞： 19 次

Re: 更新: 一個能把code轉換成svg的BBCode

帖子 由 圈宝 »

ejsoon 写了： 2025年 12月 1日 14:17 在我的本地測試通過。希望可以更新下
我这边测试，没有隐藏。
图片
当时明月在，曾照彩云归
页首
头像
ejsoon
圈圈精英
圈圈精英
帖子： 4152
注册时间： 2022年 11月 18日 17:36
为圈友点赞： 164 次
被圈友点赞： 194 次
联系：
联系 ejsoon

Re: 更新: 一個能把code轉換成svg的BBCode

帖子 由 ejsoon »

圈宝 写了： 2025年 12月 1日 22:06
ejsoon 写了： 2025年 12月 1日 14:17 在我的本地測試通過。希望可以更新下
我这边测试，没有隐藏。
图片
[ svg]：這樣就會隱藏。
[ svg=1]：這樣會顯示。

所隱藏和顯示的是它上面的[ code]。
以下圈友为 ejsoon 的帖子点了赞:
圈宝
https://ejsoon.vip/
弈趣極光：享受思維樂趣
页首
头像
圈宝
圈圈守护者
圈圈守护者
帖子： 126
注册时间： 2020年 12月 4日 20:46
我的状态： 🎯
为圈友点赞： 111 次
被圈友点赞： 19 次

Re: 更新: 一個能把code轉換成svg的BBCode

帖子 由 圈宝 »

ejsoon 写了： 2025年 12月 1日 22:31 所隱藏和顯示的是它上面的[ code]。
脑袋糊涂了🥴，没认真看代码。。。 :grin: :lol:

已使用新提供的代码。
当时明月在，曾照彩云归
页首
回复

回到 “留言板”

在线用户

正浏览此版面之用户： 没有注册用户 和 0 访客