Trying to convert SVG signature to Raster image - javascript

I have been trying to convert an SVG image to a raster image. The format doesn't matter, png or jpg would be nice though.
I am using jSignature to try an accomplish this. The API for jSignature isn't clicking for me but I am at the point where I can draw a signature and post it into an <img src="data:" /> tag.
I have been reading other threads on SO discussing this issue and I have been trying this approach. However, I keep getting "Object [object Object] has no method 'getContext' " errors from my console.
I will be passing this to a database using PHP.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="sigStyle.css">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jSignature.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var sigdiv = $("#signature").jSignature({'UndoButton':true});
$("#lock").click(function(){
//Lock the canvas, stop user input
});
$("#save").click(function(){
var datapair = sigdiv.jSignature("getData", "svgbase64");
var i = new Image();
i.src = "data:" + datapair[0] + "," + datapair[1];
$(i).appendTo($("#outputSvg"));
});
$("#clear").click(function(){
sigdiv.jSignature("reset");
$("#outputSvg, #outputRaster").empty();
});
$("#raster").click(function(){
var canvas = $("canvas").getContext("2d");
var img = canvas.toDataURL("image/png");
$("#outputRaster").append('<img src="'+img+'"/>');
});
})
</script>
</head>
<body>
<div id="signature"></div>
<br />
<button id="lock">Lock</button>
<button id="save">Save</button>
<button id="clear">Clear</button>
<button id="raster">Raster</button>
<br /><br />
<fieldset id="outputSvg" style="float:left">
<legend>SVG</legend>
</fieldset>
<fieldset id="outputRaster" style="float:left">
<legend>Raster</legend>
</fieldset>
</body>
</html>
Any help, advice or tips would be greatly appreciated! Thanks!

I have figured it out!
Canvg allows you to draw an svg to a canvas. I made a hidden canvas element on my page. I save my jSignature as an SVG/XML string, pass it to canvg to render, then finally utilize the hidden canvas's .toDataURL() method.
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jSignature.min.js"></script>
<script type="text/javascript" src="canvg.js"></script>
<script>
$(document).ready(function(){
var sigdiv = $("#signature").jSignature({'UndoButton':true});
$("#save").click(function(){
var datapair = sigdiv.jSignature("getData", "svg");
var i = new Image();
i.src = "data:" + datapair[0] + "," + datapair[1];
$(i).appendTo($("#outputSvg"));
var canvas = document.getElementById("canvas");
canvg(canvas, datapair[1]);
var img = canvas.toDataURL("image/png");
$("#outputRaster").append("<img src='"+img+"'/>");
});
});
</script>
</head>
<body>
<div id="signature"></div>
<canvas id="canvas" hidden="hidden"></canvas>
<br />
<button id="lock">Lock</button>
<button id="save">Save</button>
<button id="clear">Clear</button>
<button id="raster">Raster</button>
<br /><br />
<fieldset id="outputSvg" style="float:left">
<legend>SVG</legend>
</fieldset>
<fieldset id="outputRaster" style="float:left">
<legend>Raster</legend>
</fieldset>
</body>
</html>

This code:
$("canvas")
Returns a jQuery object (possibly even a list of jQuery objects), jQuery objects don't have a getContext() method. Try doing something like this to get an actual canvas element:
$("canvas")[0].getContext("2d")
Another thing to note: you do not appear to have a canvas element.

Related

Why codepen working for the filter code I have written but not sublimetext3 or visual studio?

I am new and just learning HTML CSS and Javascript. I just started working on this filter web application for practice. When I try to work a sublime text or visual studio the Javascript part doesn't actually work. I tried to put the right path and other stuff but it> doesn't show any picture uploaded in canvas but if I copy-paste this code in codepen.io it works fine! I don't know what happened as I am just a newbie. Please if anyone can help me with a proper explanation I will be grateful. Thanks!
This is my HTML CSS and JS code :
let fileInput = document.getElementById("mainup");
fileInput.addEventListener("change", function (ev) {
if (ev.target.files) {
let file = ev.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function (e) {
var image = new Image();
image.src = e.target.result;
image.onload = function (ev) {
var canvas = document.getElementById("can1");
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
};
};
}
});
<html>
<head>
<title>Filtaro</title>
<link
rel="shortcut icon"
type="image/png"
href="C:\Users\ADMIN\Desktop\filtaro.png"
/>
</head>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&family=Pacifico&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="filter.css" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&family=Pacifico&display=swap"
rel="stylesheet"
/>
<script type="text/javascript" src="filter.js"></script>
//As my js file name was filter.js
<body>
<div class="bgimg"></div>
<div class="box">
<a href="file:///G:/HTML%20CSS%20JAVA/Project%20Filter/filter.html"
><h1>Filtaro</h1></a
>
</div>
<div class="intro">
<h2>Welcome to Filtaro !</h2>
<br />
<p>
Filter your images with different filters.No quality decrease ! Have Fun
!
</p>
</div>
<canvas id="can1"></canvas>
<canvas id="can2"></canvas><br />
<div class="btn">
<input type="file" id="mainup" multiple="false" accept="image/*" />
<label for="mainup" id="lab1">Upload a Picture</label>
</div>
<div class="btn">
<input type="button" id="maindown" onclick="download()" />
<label for="maindown" id="lab2">Download</label>
</div>
</body>
</html>
put your script at the end of body or add defer to script tag

Why is this code working and not the other one? JavaScript

<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<input name="usrname" type="text" placeholder="Username" />
<input name="comnts" type="text" placeholder="comments"/>
<input id="btnButton" type="Submit" value="Click me"/>
</body>
<script type="text/javascript">
window.onload = function(){
var refButton = document.getElementById("btnButton");
refButton.onclick = function() {
window.alert("Hi");
//var name-"Bhuvanesh";
//var Comment="Zack";
//window.alert("Hello");
}
};
</script>
</html>
This code above works and the code below does not work
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<input name="usrname" type="text" placeholder="Username" />
<input name="comnts" type="text" placeholder="comments"/>
<input id="btnButton" type="Submit" value="Click me"/>
</body>
<script type="text/javascript">
window.onload = function(){
var refButton = document.getElementById("btnButton");
refButton.onclick = function() {
//window.alert("Hi");
var name-"Bhuvanesh"; //Edited from - to =
var Comment="Zack";
window.alert("Hello "+name);
}
};
</script>
</html>
I do not understand why the code below does not work. I have used window.onload to make sure the page renders first. Somehow the code does not seem to work. I am trying to make a simple page that can accept Name and comment from the textbox and display it on the webpage. I am relatively new to web development. Any help is appreciated.
Edit 1: This code below does not seem to work.`
var name=document.getElementByName("usrname");
var Comment=document.getElementByName("comnts");
document.write(name+ "wrote "+Comment);
As far as I can tell, getElementByName is not a function. You can use getElementsByName (note the plural). This will return a collection rather than an element. More than this, you were fetching the entire element, not the value of the element like it seems you want. The following works for me:
var name = document.getElementsByName("usrname")[0].value;
var comment = document.getElementsByName("comnts")[0].value;
document.write(name + "wrote "+ comment);

Injecting a .css file on a page with a button

I wan't to inject a .css on a page by clicking a button on my extensions!
Here is the popup.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/popup.css">
<script type="text/javascript" src="black.js"></script>
<script type="text/javascript" src="white.js"></script>
</head>
<body style="width: 400px">
<h1>test v1.0.0</h1>
<hr ></hr>
<input type="button" onclick="black" value="Black"/>
<input type="button" onclick="white" value="White"/>
</body>
</html>
And here is the black.js (white.js is almost the same):
function black() {
var browserListener = function(tab) {
chrome.tabs.insertCSS(tab.id, {
file: "css/black.css"
});
}
}
I don't know why but it's not working.
You can also try:
var blackCss = document.createElement('link');
blackCss.src = "css/black.ss";
blackCss.rel = "stylesheet";
document.head.appendChild(blackCss);
Of course, you can wrap that in a function and make the src path dynamic.
There are lots of ways of doing this literally LOTS ive come up with 1 solution but now that i think of it its probably not best but it works.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>test v1.0.0</h1>
<input id="black" type="button" value="Black"/>
<input id="blue" type="button" value="Blue"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
(function(){
$('#black').on('click', function(){
var location = 'black.css';
var link = $("<link rel='stylesheet' href='"+ location +"'>");
$('head').append(link);
});
$('#blue').on('click', function(){
var location = 'blue.css';
var link = $("<link rel='stylesheet' href='"+ location +"'>");
$('head').append(link);
});
})();
</script>
</body>
</html>
You could go so much further with this and make it 1 function that just changes the value of the href tag on the css link. but this also works fine. I wouldn't recommend using this exact code but im hoping you get what im trying to show here

Javascript in separate file not working

I'm just starting out in Javascript, and I'm trying to put my scripts in a separate file. They work just fine when they're in the html file, but as soon as I move them to their own separate file it stops working.
Here's my html file:
<!DOCTYPE html>
<head>
<meta lang = "en">
<link rel="stylesheet" type="text/css" href="css/mainStyle.css">
<script src="js/script1.js"></script>
<title>Web Dev Practice</title>
</head>
<body>
<h1>First JavaScript Example</h1>
<button type="button" onclick="changeText()">ClickMe!</button>
<p id="demo">This is just a test.</p>
</br>
</br>
<h1>Second JavaScript Example</h1>
<img id="lightBulb" onclick="changeImage()" src="res/img/pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn it on or off.</p>
</body>
</html>
And here's my js file:
<script>
function changeText(){
var string_first = "This is just a test.";
var string_second = "Woah, it actually works!";
if(document.getElementById("demo").innerHTML == string_first){
document.getElementById("demo").innerHTML = string_second;
} else{
document.getElementById("demo").innerHTML = string_first;
}
}
<script>
function changeImage(){
var image = document.getElementById('lightBulb');
if(image.src.match("bulbon")){
image.src = "res/img/pic_bulboff.gif";
}
else{
image.src = "res/img/pic_bulbon.gif";
}
}
</script>
The <script> tags are html things, not javascript, so you don't need (and can't have) them in your external files. What browser are you using? Many have a built in console that can help you see what errors, if any, your page is throwing.

Pointing to mouse position Jquery

I am trying to make a pointer that moves according to the position of your mouse.
I am using Jquery and transforming the radians to degrees, and a plugin for jquery that is called rotate.I set up all the conditions butt the pointer will not have a continuous animation.
Here`s the code:
<html>
<head>
<title>Pagina test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="rotate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<link rel='stylesheet' type='text/css' href='style.css' media='all' />
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(e){
<!--$('#log2').html(e.pageX +', '+ e.pageY);-->
var radian = Math.atan2(e.pageY, e.pageX);
var grade = radian/(Math.PI/360);
$('#log2').html(grade);
$(document).mousemove(function(){
$('#img').animateMe({rotate: grade});
});
});
});
</script>
</head>
<body>
<div id="log"></div>
<div id="log1"></div>
<div id="log2"></div>
<div id="patrat">
<img src="arrow.png" alt="" width="300" height="300" border="0" id="img" title="" />
</div>
<script type="text/javascript">
var radian = $(document).bind('mousemove',function(e){
$("#log1").text(Math.atan2(e.pageY, e.pageX));
});
var grade = radian/(Math.PI/180);
</script>
<script type="text/javascript">
$(document).ready(function(){
$(document).bind('mousemove',function(e){
$("#log").text(e.pageX +', '+ e.pageY);
});
});
</script>
</body>
</html>
Thx you all for your help!
This is the new code
<html>
<head>
<title>Pagina test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/heygrady/transform/jquery.transform-0.9.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<link rel='stylesheet' type='text/css' href='style.css' media='all' />
<script type="text/javascript">
$(document).mousemove(function(e){
var radian = Math.atan2(e.pageY, e.pageX);
var grade = radian/(Math.PI/720);
$('#log2').html('grade:'+grade+' :: radian:'+radian);
$('#img').animate({rotate: grade});
});
</script>
</head>
<body>
<div id="log"></div>
<div id="log1"></div>
<div id="log2"></div>
<div id="patrat">
<img src="arrow.png" alt="" width="300" height="300" border="0" id="img" title="" />
</div>
</body>
</html>
Think I've spotted a problem:
<!--$('#log2').html(e.pageX +', '+ e.pageY);-->
That's an HTML comment tag, inside javascript it will break so use // instead - i.e:
//$('#log2').html(e.pageX +', '+ e.pageY);
After fixing this you might find that your script works.
If this doesn't help, please post a fiddle (http://jsfiddle.net) showing broken behaviour and comment on exactly how it should behave.
Hope this helps
EDIT:
No offense but your code is pretty dire.
Try this (stripped down and fixed):
$('body').mousemove(function(e){
var radian = Math.atan2(e.pageY, e.pageX);
var grade = radian/(Math.PI/360);
$('#log2').html('grade:'+grade+' :: radian:'+radian);
$('#img').animate({rotate: grade});
});
To name a few, 'animateMe' is not a function, 'animate' is. There was a second $(document).mousemove(function(){..}); line in there that didn't have a close bracket - little wonder this didn't work.
And remove all the other script tags from your page, a few of them are binding mousemove events where you have already bound them - either remove them or roll them into the one handler.
Example fiddle:
http://jsfiddle.net/uRpag/1/
2nd Edit:
Your plugin's rotate method needs to have 'deg' in the property.
Try this code:
$('#img').animate({rotate: grade+'deg'});
Instead of
$('#img').animate({rotate: grade});
Last edit:
One last thing you needed to do was .stop() the animation when the mouse moved again - otherwise hundreds of animate functions would queue up when you move the mouse more than a couple of pixels.
$('#img').stop(true, true).animate({rotate: grade+'deg'});
Job done :)
http://jsfiddle.net/uRpag/4/

Categories

Resources