SVG to Image in js

SVG to Image

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的更多相关文章

svg DOM的一些js操作
这是第一个实例,其中讲了如何新建svg,添加元素,保存svg document,查看svg. 下面将附上常用一些元素的添加方法:(为js的,但基本上跟java中操作一样,就是类名有点细微差别) Cir ...
svg绘图工具raphael.js的使用
1.raphael.js svg画图的开源库,支持IE8+ 官方api: http://dmitrybaranovskiy.github.io/raphael/reference.html Githu ...
D3.js & Data Visualization & SVG
D3.js & Data Visualization & SVG https://davidwalsh.name/learning-d3 // import {scaleLinear} ...
带给你灵感：30个超棒的 SVG 动画展示【下篇】
前端开发人员和设计师一般使用 CSS 来创建 HTML 元素动画.然而,由于 HTML 在创建图案,形状,和其他方面的局限性,它们自然的转向了 SVG,它提供了更多更有趣的能力.借助 SVG,我们有更 ...
Firefox使用svg blur滤镜渲染图片
很久没来更新博客了,今天正好比较闲,就写一篇手头项目上遇到的一个css问题: .mature .blur { -webkit-filter:blur(25px); -moz-filter:blur(2 ...
HTML5的 2D SVG和SVG DOM的学习笔记（1）
(项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述可缩放矢量图形(Sc ...
基于HTML5 SVG炫酷文字爆炸特效
这是一款使用html5 svg.css3和js制作的炫酷文字爆炸特效.该文字特效用SVG path属性将文字路径切割为很多小块,然后使用css3和js在鼠标滑过文字时制作文字爆炸分裂的炫酷效果. 在线 ...
了解SVG
页的节点类型,我们将说明怎样通过Illustrator高速的把SVG文档加入到网页中.我们还会讲讲D3.js,一个强大的.SVG控制的JavaScript库. "SVG并不仅仅用于像素处理. ...
SVG 学习（二）--- 创建组合交互式应用
接着上一节的内容,本次学习主要介绍SVG组合式应用以及js交互式应用! 1.组合式应用绘制两棵带有投影效果的树! <svg width="400" height=" ...

随机推荐

Selenium：WebDriver简介及元素定位
参考内容:官方API文档,下载链接:http://download.csdn.net/detail/kwgkwg001/4004500 虫师:<selenium2自动化测试实战-基于python ...
wifidog源码分析 - 客户端检测线程
引言当wifidog启动时,会启动一个线程(thread_client_timeout_check)维护客户端列表,具体就是wifidog必须定时检测客户端列表中的每个客户端是否在线,而wifido ...
c语言学习5
break 和 continue之间的区别: 在1000人中,募捐100000元,当达到10万元后结束 break 跳出当前循环,即是终止循环,continue结束本次循环,不终止循环 #in ...
免安装的Tomcat基本配置和安装
大家都知道tomcat吧!因为Tomcat 技术先进.性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可,成为目前比较流行的Web 应用服务器,也是运行Servlet和JS ...
CF915G Coprime Arrays 莫比乌斯反演、差分、前缀和
传送门差分是真心人类智慧--完全不会这么经典的式子肯定考虑莫比乌斯反演,不难得到\(b_k = \sum\limits_{i=1}^k \mu(i) \lfloor\frac{k}{i} \rfl ...
如何实现.net程序的进程注入
原文:如何实现.net程序的进程注入如何实现.net程序的进程注入周银辉进程注入比较常见,比如用IDE调试程序以及一些Sp ...
Luogu P3374 【模板】树状数组 1
真正的模板题. 树状数组的思想很简单(不如说背代码更简单),每个节点记录多个节点的信息(每个点存x&(-x)个). 道理可以参见很多大佬的博客,最后前缀和的思想搞一下就好了.不想说也不会说. ...
【译】高级指南-深入JSX
title: 高级指南-深入JSX date: 2017-4-5 17:13:09 --- 深入JSX 从根本上来讲,JSX 仅仅是提供 React.createElement(component, ...
SQLAlchemy模块的使用教程
数据库表是一个二维表,包含多行多列.把一个表的内容用Python的数据结构表示出来的话,可以用一个list表示多行,list的每一个元素是tuple,表示一行记录,比如,包含id和name的user表 ...
[UWP 自定义控件]了解模板化控件(10)：原则与技巧
1. 原则推荐以符合以下原则的方式编写模板化控件: 选择合适的父类:选择合适的父类可以节省大量的工作,从UWP自带的控件中选择父类是最安全的做法,通常的选择是Control.ContentContr ...

SVG to Image in js

SVG to Image in js

Canvas to Image

solutions

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

随机推荐

热门专题