一個能把code轉換成svg的BBCode
发表于 ： 2025年 11月 30日 16:02
經過測試可行。
bbcode:
html:
tips:
這回是用img的onload事件來觸發，同時因為代碼是直接放進img的src中，所以我感覺不會有安全風險。
是否考慮添加？@圈宝
bbcode:
代码： 全选
[svg/]代码： 全选
<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 <svg
if(!codeHTML.trim().startsWith('&' + 'lt;svg')){
img.remove();
return;
}
// 4. Replace < and > 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);
">代码： 全选
Convert svg code to image.是否考慮添加？@圈宝
，没认真看代码。。。 
