SVG to Image in js svg to png in js



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​​

​​https://stackoverflow.com/questions/27230293/how-to-convert-svg-to-png-using-html5-canvas-javascript-jquery-and-save-on-serve​​

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://www.sitepoint.com/community/t/how-to-convert-a-svg-file-to-to-a-svg-tag-using-readysetraphael-com-tool/43304/2​​

​​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

SVG to Image in js_js

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>