SVG to Base64 Image in js All In One
SVG to Base64 Image in js All In One
SVG to Image in js
SVG to Image
https://image.online-convert.com/convert-to-svg
https://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser
function drawInlineSVG(ctx, rawSVG, callback) {
var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
domURL = self.URL || self.webkitURL || self,
url = domURL.createObjectURL(svg),
img = new Image;
img.onload = function () {
ctx.drawImage(this, 0, 0);
domURL.revokeObjectURL(url);
callback(this);
};
img.src = url;
}
// usage:
drawInlineSVG(ctxt, svgText, function() {
console.log(canvas.toDataURL()); // -> PNG data-uri
});
function drawInlineSVG(svgElement, ctx, callback){
var svgURL = new XMLSerializer().serializeToString(svgElement);
var img = new Image();
img.onload = function(){
ctx.drawImage(this, 0,0);
callback();
}
img.src = 'data:image/svg+xml; charset=utf8, '+encodeURIComponent(svgURL);
}
//usage :
drawInlineSVG(document.querySelector('svg'), ctxt, function(){console.log(canvas.toDataURL())})
https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer
demo
https://codepen.io/chriscoyier/pen/lCEux
https://codepen.io/webgeeker/pen/oVGybN
https://css-tricks.com/using-svg/
Canvas to Image
https://github.com/canvg/canvg
https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf/3514404#3514404
let canvas = document.getElementById("myCanvas");
let img = canvas.toDataURL("image/png");
document.write(`<img src="${img}"/>`);
// document.write('<img src="'+img+'"/>');
svg bug & only for canvas
solutions
svg to canvas to image
https://codepen.io/webgeeker/full/VRMGyN
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="xgqfrms">
<meta name="generator" content="VS code">
<title>svg to canvas to image</title>
<style>
.auto-hidden{
display: none;
/* visibility: hidden; */
}
</style>
</head>
<body>
<section>
<svg width="500" height="100">
<rect x="0" y="64" width="25" height="36" fill="navy"></rect><rect x="30" y="7" width="25" height="93" fill="navy"></rect><rect x="60" y="34" width="25" height="66" fill="navy"></rect><rect x="90" y="49" width="25" height="51" fill="navy"></rect><rect x="120" y="25" width="25" height="75" fill="navy"></rect><rect x="150" y="46" width="25" height="54" fill="navy"></rect><rect x="180" y="13" width="25" height="87" fill="navy"></rect><rect x="210" y="58" width="25" height="42" fill="navy"></rect><rect x="240" y="73" width="25" height="27" fill="navy"></rect><text x="0" y="61" width="25" height="36" class="high-light-color">¥12</text><text x="30" y="4" width="25" height="93" class="high-light-color">¥31</text><text x="60" y="31" width="25" height="66" class="high-light-color">¥22</text><text x="90" y="46" width="25" height="51" class="high-light-color">¥17</text><text x="120" y="22" width="25" height="75" class="high-light-color">¥25</text><text x="150" y="43" width="25" height="54" class="high-light-color">¥18</text><text x="180" y="10" width="25" height="87" class="high-light-color">¥29</text><text x="210" y="55" width="25" height="42" class="high-light-color">¥14</text><text x="240" y="70" width="25" height="27" class="high-light-color">¥9</text>
</svg>
<canvas id="canvas"></canvas>
</section>
<!-- js -->
<script>
const canvas = document.getElementById(`canvas`);
const ctx = canvas.getContext(`2d`);
// rect
// ctx.fillStyle = `green`;
// ctx.fillRect(10, 10, 150, 100);
// image
let svg = document.querySelector(`svg`);
// let svg = document.createElement(`svg`);
// ctx.drawImage(imageResource, dx, dy, dWidth, dHeight);
// console.log(`svg.width =`, svg.width);
// console.log(`vg.height =`, svg.height);
let svgURL = new XMLSerializer().serializeToString(svg);
let img = new Image();
img.onload = function(){
// console.log(`this =`, this);
// img
ctx.drawImage(this, 0, 0);
callback();
}
img.src = `data:image/svg+xml; charset=utf8, ` + encodeURIComponent(svgURL);
// ctx.drawImage(svg, 0, 0, svg.width, svg.height);
// svg-to-canvas.html:39
// Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D':
// The provided value is not of type '(
// CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas
// )'
const callback = () => {
setTimeout(() => {
// let canvas = document.getElementById("canvas");
let base64URL = canvas.toDataURL("image/png");
console.log(`base64URL =`, base64URL);
// let img = document.createElement(`img`);
// img.src = base64URL;
// img.download;
let aTag = document.createElement(`a`);
aTag.setAttribute(`href`, base64URL);
// aTag.setAttribute(`href`, canvas.toDataURL("image/png"));
aTag.download = "svg-to-canvas.png";
aTag.click();
setTimeout(() => {
canvas.setAttribute(`class`, "auto-hidden");
}, 1000);
}, 1000);
};
// setTimeout(() => {
// let canvas = document.getElementById("canvas");
// let img = canvas.toDataURL("image/png");
// console.log(`img =`, img);
// // with the value in IMG you can write it out as a new Image like so:
// document.write(`<img src="${img}" />`);
// }, 3000);
</script>
</body>
</html>
refs
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！
本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/10516810.html
未经授权禁止转载，违者必究！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）