最近想给站点添加一个logo,于是在Google找到一些国外的免费在线logo制作平台,但是没想到这全都是打着免费的旗号骗人,logo制作完成之后还用各种理由要你缴费,好在在页面上有一个SVG的预览,我们可以耍一些小手段将这个SVG转换成PNG保存到本地。

在SVG页面打开F12控制台,输入以下脚本并执行:

// 下面这行元素选择代码请按实际情况写
var svg = document.getElementById("svg_o");
// get svg source.
var serializer = new XMLSerializer();
var source = serializer.serializeToString(svg);
// add name spaces.
if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
    source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
}
if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
    source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
}
// add xml declaration
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
//convert svg source to URI data scheme.
var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
//set url value to a element's href attribute.
document.write('<img src="' + url + '"/>');

到此,你完成了第一步,你现在应该可以看见页面输出了一个大大的SVG图片,你可以右键保存它,但保存的格式仍然是SVG,接下来我们执行以下代码将SVG转换为PNG并保存到本地:

var canvas = document.createElement('canvas');
canvas.width = 900; // 这里设置保存的图片的宽度
canvas.height = 198; // 这里设置保存的图片的高度
var context = canvas.getContext("2d");

var image = new Image;
// 下面这行请选中刚刚第一步输出的img标签
image.src = document.getElementsByTagName('img')[0].src;
image.onload = function() {
  context.drawImage(image, 0, 0);

  var a = document.createElement("a");
  a.download = "fallback.png";
  a.href = canvas.toDataURL("image/png");
  a.click();
};

Safari中position对-webkit-font-smoothing的影响

阅读本文前建议先了解 -webkit-font-smoothing,戳这里查看。 最近在调整本blog的header样式的时候发现一个神奇的问题,当一个元素从 position:fixed; 变更为...

阅读全文

字体渲染抗锯齿CSS属性: -webkit-font-smoothing

前言 -webkit-font-smoothing 控制的字体渲染只对MacOS的Webkit有效。 所以,你在MacOS测试环境下面设置 -webkit-font-smoothing 时,只要你不把它设置为none...

阅读全文

本地调试关闭Chrome的同源策略

右键chrome的快捷方式,在“目标”尾部追加两个参数 --user-data-dir --disable-web-security 关闭所有chrome实例重新打开即可。

阅读全文

欢迎留言