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
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
<!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);
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
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.
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/