Skip to content

Commit

Permalink
update to fix missing svg and add scale
Browse files Browse the repository at this point in the history
  • Loading branch information
@IbrahimTanyalcin
IbrahimTanyalcin committed Nov 4, 2016
1 parent d05a499 commit 3af0212
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 15 deletions.
12 changes: 11 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@ method will invoke a security error in IE. However, this seems to be a verified
##Dependencies
    None.

##Mechanism

    The script assumes that either a viewBox or a width&height attributes are explicitly set in the parent SVG. If a height does not exist, it is assumed to be the same as width.

##Usage

###*Inclusion*
Expand All @@ -46,7 +50,7 @@ method will invoke a security error in IE. However, this seems to be a verified
    Assume that we want to click on the *controller* and download a corresponding file in "png" format:

<pre>
svgToPixels.hook(<i>container,target[,type[,fileName[,once[,filter]]]]</i>)
svgToPixels.hook(<i>container,target[,type[,fileName[,once[,filter[,sx[,sy]]]]]]</i>)
</pre>

* _container_ = This is your root SVG element. It can either be a node, or an id string as in "myId" or an id string with *#* as in "#myId".
Expand All @@ -59,13 +63,17 @@ svgToPixels.hook(<i>container,target[,type[,fileName[,once[,filter]]]]</i>)
where _type_ is the previously provided/default mime type.
* _once_ = Specify whether if you want the click callback to execute only once. Set to *false* by default.
* _filter_ = Specify a valid *css filter*. The chosen filter will __not__ be applied on the original SVG. Set to *false* by default. (*Important:If you are an IE, the fallback SVG only method does __not__ allow usage of css filters as the only valid filters in SVGSVGElement are the ones declared in SVG namespace.*)
* _sx_ = X axis scale, defaults to 1.
* _sy_ = Y axis scale, defaults to 1.

&nbsp;&nbsp;&nbsp;&nbsp;If you want to hook several listeners on different elements at once you can use:

```
svgToPixels.hook(...).hook(...).hook(...)..
```

&nbsp;&nbsp;&nbsp;&nbsp;Although default scales are set to 1, this might result in a low resolution image. I recommend settign *sx,sy* to >2.

####__Examples__:


Expand All @@ -83,6 +91,8 @@ svgToPixels.hook(...).hook(...).hook(...)..
<i>svgToPixels.hook(svgNode,divNode,"image/jpeg","someFileName",true,"grayscale(100%)");</i>

<i>svgToPixels.hook(svgNode,divNode,"image/png","someFileName",false,"invert(100%)");</i>

<i>svgToPixels.hook(svgNode,divNode,"image/png","someFileName",false,false,10,10);</i> //about ~1 mb high resolution image.
</pre>


Expand Down
51 changes: 44 additions & 7 deletions src/svgToPixels.js
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,43 @@
!function () {
function svgToPixels() {
this.hook = function(container,target,type,fileName,once,filter) {
var _this_ = this;
this.hook = function(container,target,type,fileName,once,filter,sx,sy) {
var containerNode = registerNode(container);
var targetNode = registerNode(target);
type = type || "image/png";
fileName = fileName === undefined ? "file."+(type.replace(/^.*\//,"")) : fileName+"."+(type.replace(/^.*\//,""));
once = once ? true : false;
filter = filter ? filter : "none";
sx = sx === undefined ? 1 : (parseFloat(sx) || 1);
sy = sy === undefined ? 1 : (parseFloat(sy) || 1);
targetNode.addEventListener("click",function svgToPixelsListener(){
try {
invokeClick();
_this_.clr();
} catch (err) {
console.log(err.message);
} finally {
once ? targetNode.removeEventListener("click",svgToPixelsListener) : void(0);
}
});
function invokeClick() {
var dims = getDims(containerNode);
var cloneSVG = containerNode.cloneNode(true);
cloneSVG.style.filter = filter;
_this_.sel(cloneSVG).set("width",dims.width).set("height",dims.height).rm("viewBox").rm("style").styl("filter",filter);
var canvas = document.createElement("canvas");
_this_.sel(canvas).set("width",dims.width*sx).set("height",dims.height*sy);
var context = canvas.getContext("2d");
context.imageSmoothingEnabled = false;
var aTag = document.createElement("a");
var serialized = new XMLSerializer().serializeToString(cloneSVG);
var src = "data:image/svg+xml;base64,"+window.btoa(serialized);
var src = "btoa" in window ? "data:image/svg+xml;base64,"+window.btoa(serialized) : "data:image/svg+xml;charset=utf8,"+window.encodeURIComponent(serialized);
var img = document.createElement("img");
img.crossOrigin = "Anonymous";
img.onload = function(){
try {
context.drawImage(img,0,0);
context.drawImage(img,0,0,dims.width,dims.height,0,0,dims.width*sx,dims.height*sy);
var url = canvas.toDataURL(type,1.0);
aTag.style.display = "none";
aTag.setAttribute("href",url);
aTag.setAttribute("download",fileName);
_this_.sel(aTag).styl("display","none").set("href",url).set("download",fileName);
targetNode.appendChild(aTag);
aTag.addEventListener("click",generatorClick(aTag));
fire(aTag);
Expand Down Expand Up @@ -65,6 +70,38 @@
setTimeout(function(){window.URL.revokeObjectURL(url);targetNode.removeChild(node)},1000);
};
}
function getDims (node) {
if ("width" in node.attributes) {
var width = parseFloat(node.getAttribute("width"));
var height = parseFloat(node.getAttribute("height")) || width;
return {width:width,height:height};
} else if("viewBox" in node.attributes) {
var dims = node.getAttribute("viewBox").split(/\s*[,]{1}\s*|\s+/gi);
return {width:dims[2]-dims[0],height:dims[3]-dims[1]};
}
}
return this;
}
this.active = undefined;
this.clr = function(){this.active = undefined;}
this.set = function(attr,value) {
this.active.setAttribute(attr,value);
return this;
}
this.rm = function(attr) {
this.active.removeAttribute(attr);
return this;
}
this.pro = function(property,value) {
this.active[property] = value;
return this;
}
this.styl = function(property,value) {
this.active.style[property] = value;
return this;
}
this.sel = function (node) {
this.active = node;
return this;
}
}
Expand Down
51 changes: 44 additions & 7 deletions svgToPixels.js
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,43 @@
!function () {
function svgToPixels() {
this.hook = function(container,target,type,fileName,once,filter) {
var _this_ = this;
this.hook = function(container,target,type,fileName,once,filter,sx,sy) {
var containerNode = registerNode(container);
var targetNode = registerNode(target);
type = type || "image/png";
fileName = fileName === undefined ? "file."+(type.replace(/^.*\//,"")) : fileName+"."+(type.replace(/^.*\//,""));
once = once ? true : false;
filter = filter ? filter : "none";
sx = sx === undefined ? 1 : (parseFloat(sx) || 1);
sy = sy === undefined ? 1 : (parseFloat(sy) || 1);
targetNode.addEventListener("click",function svgToPixelsListener(){
try {
invokeClick();
_this_.clr();
} catch (err) {
console.log(err.message);
} finally {
once ? targetNode.removeEventListener("click",svgToPixelsListener) : void(0);
}
});
function invokeClick() {
var dims = getDims(containerNode);
var cloneSVG = containerNode.cloneNode(true);
cloneSVG.style.filter = filter;
_this_.sel(cloneSVG).set("width",dims.width).set("height",dims.height).rm("viewBox").rm("style").styl("filter",filter);
var canvas = document.createElement("canvas");
_this_.sel(canvas).set("width",dims.width*sx).set("height",dims.height*sy);
var context = canvas.getContext("2d");
context.imageSmoothingEnabled = false;
var aTag = document.createElement("a");
var serialized = new XMLSerializer().serializeToString(cloneSVG);
var src = "data:image/svg+xml;base64,"+window.btoa(serialized);
var src = "btoa" in window ? "data:image/svg+xml;base64,"+window.btoa(serialized) : "data:image/svg+xml;charset=utf8,"+window.encodeURIComponent(serialized);
var img = document.createElement("img");
img.crossOrigin = "Anonymous";
img.onload = function(){
try {
context.drawImage(img,0,0);
context.drawImage(img,0,0,dims.width,dims.height,0,0,dims.width*sx,dims.height*sy);
var url = canvas.toDataURL(type,1.0);
aTag.style.display = "none";
aTag.setAttribute("href",url);
aTag.setAttribute("download",fileName);
_this_.sel(aTag).styl("display","none").set("href",url).set("download",fileName);
targetNode.appendChild(aTag);
aTag.addEventListener("click",generatorClick(aTag));
fire(aTag);
Expand Down Expand Up @@ -65,6 +70,38 @@
setTimeout(function(){window.URL.revokeObjectURL(url);targetNode.removeChild(node)},1000);
};
}
function getDims (node) {
if ("width" in node.attributes) {
var width = parseFloat(node.getAttribute("width"));
var height = parseFloat(node.getAttribute("height")) || width;
return {width:width,height:height};
} else if("viewBox" in node.attributes) {
var dims = node.getAttribute("viewBox").split(/\s*[,]{1}\s*|\s+/gi);
return {width:dims[2]-dims[0],height:dims[3]-dims[1]};
}
}
return this;
}
this.active = undefined;
this.clr = function(){this.active = undefined;}
this.set = function(attr,value) {
this.active.setAttribute(attr,value);
return this;
}
this.rm = function(attr) {
this.active.removeAttribute(attr);
return this;
}
this.pro = function(property,value) {
this.active[property] = value;
return this;
}
this.styl = function(property,value) {
this.active.style[property] = value;
return this;
}
this.sel = function (node) {
this.active = node;
return this;
}
}
Expand Down

0 comments on commit 3af0212

Please sign in to comment.