![在这里插入图片描述](https://img-blog.csdnimg.cn/1e41a891e70b4156a0185f579fa04020.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODMyODA3,size_16,color_FFFFFF,t_70)
转换页面上的svg代码
svgBase64(): void {
const svg = document.getElementById('svg');
const s = new XMLSerializer().serializeToString(svg);
const img = `data:image/svg+xml;base64,${window.btoa(s)}`;
this.myImg = img;
}
转换后台返回的的svg
this.workflowService.getProcessInstanceSvgById(this.processInstanceId).subscribe(res => {
this.myImg = `data:image/svg+xml;base64,${window.btoa(res)}`;
});
扩展
const myImg = document.getElementById('myImg');
function canvasBase64() {
const canvas = document.getElementById('myCanvas');
const ImgBase64 = canvas.toDataURL('image/png');
console.log(ImgBase64, 'Canvas 转 Base64');
myImg.src = ImgBase64;
}
function svgBase64() {
const svg = document.getElementById('mySvg');
const s = new XMLSerializer().serializeToString(svg);
const ImgBase64 = `data:image/svg+xml;base64,${window.btoa(s)}`;
console.log(ImgBase64, 'Svg 转 Base64');
myImg.src = ImgBase64;
}
function svgPng() {
const svg = document.getElementById('mySvg');
const s = new XMLSerializer().serializeToString(svg);
const src = `data:image/svg+xml;base64,${window.btoa(s)}`;
const img = new Image();
img.src = src;
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
const ImgBase64 = canvas.toDataURL('image/png');
console.log(ImgBase64, 'Svg 转 png');
myImg.src = ImgBase64;
}
}