/*
* canvg.js - Javascript SVG parser and renderer on Canvas
* MIT Licensed
* Gabe Lerner (gabelerner@gmail.com)
* http://code.google.com/p/canvg/
*
* Requires: rgbcolor.js - http://www.phpied.com/rgb-color-parser-in-javascript/
*/
(function (global, factory) {
'use strict';
// export as AMD...
if (typeof define !== 'undefined' && define.amd) {
define('canvgModule', ['rgbcolor', 'stackblur'], factory);
}
// ...or as browserify
else if (typeof module !== 'undefined' && module.exports) {
module.exports = factory(require('rgbcolor'), require('stackblur'));
}
global.canvg = factory(global.RGBColor, global.stackBlur);
}(typeof window !== 'undefined' ? window : this, function (RGBColor, stackBlur) {
// canvg(target, s)
// empty parameters: replace all 'svg' elements on page with 'canvas' elements
// target: canvas element or the id of a canvas element
// s: svg string, url to svg file, or xml document
// opts: optional hash of options
// ignoreMouse: true => ignore mouse events
// ignoreAnimation: true => ignore animations
// ignoreDimensions: true => does not try to resize canvas
// ignoreClear: true => does not clear canvas
// offsetX: int => draws at a x offset
// offsetY: int => draws at a y offset
// scaleWidth: int => scales horizontally to width
// scaleHeight: int => scales vertically to height
// renderCallback: function => will call the function after the first render is completed
// forceRedraw: function => will call the function on every frame, if it returns true, will redraw
var canvg = function (target, s, opts) {
// no parameters
if (target == null && s == null && opts == null) {
var svgTags = document.querySelectorAll('svg');
for (var i = 0; i < svgTags.length; i++) {
var svgTag = svgTags[i];
var c = document.createElement('canvas');
c.width = svgTag.clientWidth;
c.height = svgTag.clientHeight;
svgTag.parentNode.insertBefore(c, svgTag);
svgTag.parentNode.removeChild(svgTag);
var div = document.createElement('div');
div.appendChild(svgTag);
canvg(c, div.innerHTML);
}
return;
}
if (typeof target == 'string') {
target = document.getElementById(target);
}
// store class on canvas
if (target.svg != null) target.svg.stop();
var svg = build(opts || {});
// on i.e. 8 for flash canvas, we can't assign the property so check for it
if (!(target.childNodes.length == 1 && target.childNodes[0].nodeName == 'OBJECT')) target.svg = svg;
var ctx = target.getContext('2d');
if (typeof s.documentElement != 'undefined') {
// load from xml doc
svg.loadXmlDoc(ctx, s);
} else if (s.substr(0, 1) == '<') {
// load from xml string
svg.loadXml(ctx, s);
} else {
// load from url
svg.load(ctx, s);
}
}
// see https://developer.mozilla.org/en-US/docs/Web/API/Element.matches
var matchesSelector;
if (typeof Element.prototype.matches != 'undefined') {
matchesSelector = function (node, selector) {
return node.matches(selector);
};
} else if (typeof Element.prototype.webkitMatchesSelector != 'undefined') {
matchesSelector = function (node, selector) {
return node.webkitMatchesSelector(selector);
};
} else if (typeof Element.prototype.mozMatchesSelector != 'undefined') {
matchesSelector = function (node, selector) {
return node.mozMatchesSelector(selector);
};
} else if (typeof Element.prototype.msMatchesSelector != 'undefined') {
matchesSelector = function (node, selector) {
return node.msMatchesSelector(selector);
};
} else if (typeof Element.prototype.oMatchesSelector != 'undefined') {
matchesSelector = function (node, selector) {
return node.oMatchesSelector(selector);
};
} else {
// requires Sizzle: https://github.com/jquery/sizzle/wiki/Sizzle-Documentation
// or jQuery: http://jquery.com/download/
// or Zepto: http://zeptojs.com/#
// without it, this is a ReferenceError
if (typeof jQuery === 'function' || typeof Zepto === 'function') {
matchesSelector = function (node, selector) {
return $(node).is(selector);
};
}
if (typeof matchesSelector === 'undefined') {
matchesSelector = Sizzle.matchesSelector;
}
}
// slightly modified version of https://github.com/keeganstreet/specificity/blob/master/specificity.js
var attributeRegex = /(\[[^\]]+\])/g;
var idRegex = /(#[^\s\+>~\.\[:]+)/g;
var classRegex = /(\.[^\s\+>~\.\[:]+)/g;
var pseudoElementRegex = /(::[^\s\+>~\.\[:]+|:first-line|:first-letter|:before|:after)/gi;
var pseudoClassWithBracketsRegex = /(:[\w-]+\([^\)]*\))/gi;
var pseudoClassRegex = /(:[^\s\+>~\.\[:]+)/g;
var elementRegex = /([^\s\+>~\.\[:]+)/g;
function getSelectorSpecificity(selector) {
var typeCount = [0, 0, 0];
var findMatch = function (regex, type) {
var matches = selector.match(regex);
if (matches == null) {
return;
}
typeCount[type] += matches.length;
selector = selector.replace(regex, ' ');
};
selector = selector.replace(/:not\(([^\)]*)\)/g, ' $1 ');
selector = selector.replace(/{[\s\S]*/gm, ' ');
findMatch(attributeRegex, 1);
findMatch(idRegex, 0);
findMatch(classRegex, 1);
findMatch(pseudoElementRegex, 2);
findMatch(pseudoClassWithBracketsRegex, 1);
findMatch(pseudoClassRegex, 1);
selector = selector.replace(/[\*\s\+>~]/g, ' ');
selector = selector.replace(/[#\.]/g, ' ');
findMatch(elementRegex, 2);
return typeCount.join('');
}
function build(opts) {
var svg = {opts: opts};
svg.FRAMERATE = 30;
svg.MAX_VIRTUAL_PIXELS = 30000;
svg.log = function (msg) {
};
if (svg.opts['log'] == true && typeof console != 'undefined') {
svg.log = function (msg) {
console.log(msg);
};
}
;
// globals
svg.init = function (ctx) {
var uniqueId = 0;
svg.UniqueId = function () {
uniqueId++;
return 'canvg' + uniqueId;
};
svg.Definitions = {};
svg.Styles = {};
svg.StylesSpecificity = {};
svg.Animations = [];
svg.Images = [];
svg.ctx = ctx;
svg.ViewPort = new (function () {
this.viewPorts = [];
this.Clear = function () {
this.viewPorts = [];
}
this.SetCurrent = function (width, height) {
this.viewPorts.push({width: width, height: height});
}
this.RemoveCurrent = function () {
this.viewPorts.pop();
}
this.Current = function () {
return this.viewPorts[this.viewPorts.length - 1];
}
this.width = function () {
return this.Current().width;
}
this.height = function () {
return this.Current().height;
}
this.ComputeSi
没有合适的资源?快使用搜索试试~ 我知道了~
svg转img所需 html2canvas方法,svg转canvas所需canvg方法
共2个文件
js:2个
需积分: 5 2 下载量 77 浏览量
2023-04-26
09:46:59
上传
评论
收藏 44KB ZIP 举报
温馨提示
svg转img所需 html2canvas方法,svg转canvas所需canvg方法 svg转img所需 html2canvas方法,svg转canvas所需canvg方法
资源推荐
资源详情
资源评论
收起资源包目录
svg转img和svg转canvas所需js.zip (2个子文件)
canvg.js 139KB
svgtoimg.js 98KB
共 2 条
- 1
资源评论
1°叁柒
- 粉丝: 207
- 资源: 84
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功