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


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>

SVG to Image in js的更多相关文章

  1. svg DOM的一些js操作

    这是第一个实例,其中讲了如何新建svg,添加元素,保存svg document,查看svg. 下面将附上常用一些元素的添加方法:(为js的,但基本上跟java中操作一样,就是类名有点细微差别) Cir ...

  2. svg绘图工具raphael.js的使用

    1.raphael.js svg画图的开源库,支持IE8+ 官方api: http://dmitrybaranovskiy.github.io/raphael/reference.html Githu ...

  3. D3.js & Data Visualization & SVG

    D3.js & Data Visualization & SVG https://davidwalsh.name/learning-d3 // import {scaleLinear} ...

  4. 带给你灵感:30个超棒的 SVG 动画展示【下篇】

    前端开发人员和设计师一般使用 CSS 来创建 HTML 元素动画.然而,由于 HTML 在创建图案,形状,和其他方面的局限性,它们自然的转向了 SVG,它提供了更多更有趣的能力.借助 SVG,我们有更 ...

  5. Firefox使用svg blur滤镜渲染图片

    很久没来更新博客了,今天正好比较闲,就写一篇手头项目上遇到的一个css问题: .mature .blur { -webkit-filter:blur(25px); -moz-filter:blur(2 ...

  6. HTML5的 2D SVG和SVG DOM的学习笔记(1)

    (项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...

  7. 基于HTML5 SVG炫酷文字爆炸特效

    这是一款使用html5 svg.css3和js制作的炫酷文字爆炸特效.该文字特效用SVG path属性将文字路径切割为很多小块,然后使用css3和js在鼠标滑过文字时制作文字爆炸分裂的炫酷效果. 在线 ...

  8. 了解SVG

    页的节点类型,我们将说明怎样通过Illustrator高速的把SVG文档加入到网页中.我们还会讲讲D3.js,一个强大的.SVG控制的JavaScript库. "SVG并不仅仅用于像素处理. ...

  9. SVG 学习(二)--- 创建组合交互式应用

    接着上一节的内容,本次学习主要介绍SVG组合式应用以及js交互式应用! 1.组合式应用 绘制两棵带有投影效果的树! <svg width="400" height=" ...

随机推荐

  1. spring的@Transaction使用注意

    文章参考资料 https://www.cnblogs.com/andy-zhou/p/5317866.html http://labreeze.iteye.com/blog/2277261 Sprin ...

  2. [转]免费数学神器!再复杂的公式,只要有照片就能转成LaTeX

    转自:https://mp.weixin.qq.com/s/ja7UGr742DtYglGU6TT4qg 又一数学神器来袭! 这是一个帮你快速把数学公式图片转成LaTeX代码的工具,名为Snip,可以 ...

  3. tcpdump -i eth0 -n -vvv src or dst port 443

    tcpdump -i eth0 -n  -vvv src or dst port 443

  4. 关于ELK

    官方文档:https://www.elastic.co/guide/en/elasticsearch/reference/6.0/getting-started.html 日志: https://ww ...

  5. java Arrays数组

    1.java.util.Arrays 工具类的使用Arrays 类中的常用方法1) toString()打印数组2) equals()比较两个数组是否相同3) copyOf(…)复制指定的数组 (效率 ...

  6. python属性查找 深入理解(attribute lookup)

    在Python中,属性查找(attribute lookup)是比较复杂的,特别是涉及到描述符descriptor的时候. 在上一文章末尾,给出了一段代码,就涉及到descriptor与attribu ...

  7. (转)对一个deb包的解压、修改、重新打包全过程方法

    转自:https://blog.csdn.net/yygydjkthh/article/details/36695243 Reference: http://www.debian.org/doc/ma ...

  8. 使用第三方库(Senparc)完成小程序支付 - z

    https://www.cnblogs.com/zmaiwxl/p/8931585.html

  9. C# 随机生成姓名的方法

    没什么好说的,因为用的上,所以作此记录: 代码如下: public class indexModel { private object O = new object(); public List< ...

  10. Scala学习(四)练习

    映射和元组&练习 1. 设置一个映射,其中包含你想要的一些装备,以及它们的价格.然后构建另一个映射,采用同一组键,但在价格上打9折 映射代码如下: object HelloScala{ def ...