html保存为svg,JavaScript – 将内联SVG保存为JPEG / PNG / SVG

如今这很简单.

基本思路是：

> svg到画布

> canvas到dataUrl

>从dataUrl触发下载

它实际上在stackoverflow片段之外工作

var btn = document.querySelector('button');

var svg = document.querySelector('svg');

var canvas = document.querySelector('canvas');

function triggerDownload (imgURI) {

var evt = new MouseEvent('click', {

view: window,

bubbles: false,

cancelable: true

});

var a = document.createElement('a');

a.setAttribute('download', 'MY_COOL_IMAGE.png');

a.setAttribute('href', imgURI);

a.setAttribute('target', '_blank');

a.dispatchEvent(evt);

}

btn.addEventListener('click', function () {

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

var data = (new XMLSerializer()).serializeToString(svg);

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();

var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});

var url = DOMURL.createObjectURL(svgBlob);

img.onload = function () {

ctx.drawImage(img, 0, 0);

DOMURL.revokeObjectURL(url);

var imgURI = canvas

.toDataURL('image/png')

.replace('image/png', 'image/octet-stream');

triggerDownload(imgURI);

};

img.src = url;

});

svg to png

Look, i'm cool

关于下载部分,您可以设置文件名等(虽然不在本例中).前几天我回答了一个关于如何从给定页面下载特定部分HTML的问题.下载部分可能有用：https://stackoverflow.com/a/28087280/2178180

update：现在让你指定文件名

html保存为svg,JavaScript – 将内联SVG保存为JPEG / PNG / SVG相关推荐

html5svg在线编辑器,HTML5 内联 SVG
HTML5 内联 SVG HTML5 支持内联 SVG. SVG Sorry, your browser does not support inline SVG. 什么是SVG? SVG 指可伸缩矢量 ...
Html内联定义特点,HTML5
HTML5 内联 SVG HTML5 支持内联 SVG (Scalable Vector Graphics),看下图例子,进一步了解 SVG : SVG 对不起,您的浏览器不支持内联SVG(Sorry ...
thymeleaf 语法——th:text默认值、字符串连接、th:attr、th:href 传参、th:include传参、th:inline 内联、th:each循环、th:with、th:if
文章目录 1.表达式 1.1.简单表达式 1.2.三元运算.条件表达式: 1.3.默认表达式 1.4.综合使用,属性值的 if - else 2.字符串连接.拼接 3.th:attr 的使用 4.th ...
汇编语言---GCC内联汇编
GCC支持在C/C++代码中嵌入汇编代码,这些代码被称作是"GCC Inline ASM"(GCC内联汇编); 一.基本内联汇编(寄存器前一个%) GCC中基本的内联汇编非常易懂, ...
html内敛样式background,js获取内联样式的方法
javascript 获取内联样式 #box{ width:100px; height:100px; background-image:url(1.jpg); background-size:140% ...
C++内联函数、友元函数、名称空间
内联函数:C++为提高程序运行速度所做的一项改进. 常规函数和内联函数的区别在于:C++编译器如何将它们组合到程序中.源程序编译得到可执行程序--由一组机器语言指令组成.运行程序时,OS将这些指令载入 ...
svg配合css3动画_如何使用CSS制作节日SVG图标动画
svg配合css3动画正是这个季节,因此在本教程中,我将逐步创建一些CSS动画,以假日为主题的SVG图标. Iconmelon上有一些很棒的图标,该网站上有许多免费的矢量图标集,可让您尽其所能 . ...
HTML5 Canvas、内联 SVG、Canvas vs. SVG
canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...

html保存为svg,JavaScript – 将内联SVG保存为JPEG / PNG / SVG

html保存为svg,JavaScript – 将内联SVG保存为JPEG / PNG / SVG相关推荐

最新文章

热门文章