I have a problem with cv.threshold() function in opencv.js library.
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="opencv.js" type="text/javascript"></script>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
<div class="inputoutput">
<img id="imageSrc" alt="No Image" />
<div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasInput" ></canvas>
</div>
<div class="inputoutput2">
<canvas id="canvasOutput" ></canvas>
</div>
</div>
<script type="text/javascript">
let image1=cv.imread('bookpage.jpg');
let threshold;
cv.threshold(image1,threshold,12,250,THRESH_BINARY);
cv.imshow('canvasInput',image);
cv.imshow('canvasOutput',threshold);
</script>
</body>
</html>
Error:
Uncaught Error: Please input the valid canvas or img id.
at Object.Module.imread (/C:/Users/q/Desktop/web/opencv.js/4-)Thresholding/opencv.js:56:20361)
How can I fix that error?
You need to pass in a canvas or image ID as stated in the error message. You're passing it a file name. Sample code from the docs
OpenCV docs
<script type="text/javascript">
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {
imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function() {
let mat = cv.imread(imgElement);
cv.imshow('canvasOutput', mat);
mat.delete();
};
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
Related
When I run this code:
<!DOCTYPE html>
<html>
<head>
<title>Upload Button</title>
</head>
<body>
<input type="file" accept="image/*" style="display:none" onchange="LoadFile(event)" id="file" name="image"/>
<label for="file" style="cursor:pointer">Upload image</label>
<br>
<img id="output" style="width:200px; height:200px;"/>
<script>
var loadFile = function(event) {
var image = document.getElementById("output");
image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
</body>
</html>
The browser throws this error:
Uncaught ReferenceError: LoadFile is not defined at HTMLInputElement.onchange (tp1.html:7)
It says that function LoadFile() isn't defined and I found this strange because the function is defined.
JavaScript is case-sensitive. You should call loadFile() instead of LoadFile() in onchange.
Here's your code:
<html>
<head>
<title>Upload Button</title>
</head>
<body>
<input type="file" accept="image/*" style="display:none;" onchange="loadFile(event)" id="file" name="image"/>
<label for="file" style="cursor:pointer">Upload image</label>
<br>
<img id="output" style="width:200px; height:200px;"/>
<script>
var loadFile = function(event) {
var image = document.getElementById("output");
image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
</body>
</html>
Or change loadFile() to LaodFile():
<html>
<head>
<title>Upload Button</title>
</head>
<body>
<input type="file" accept="image/*" style="display:none;" onchange="LoadFile(event)" id="file" name="image"/>
<label for="file" style="cursor:pointer">Upload image</label>
<br>
<img id="output" style="width:200px; height:200px;"/>
<script>
var LoadFile = function(event) {
var image = document.getElementById("output");
image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
</body>
</html>
The function you declared is "loadFile", but you use "LoadFile" in onchange.
Here is the JS code:
function flag(){
document.getElementById("f1").value = "country1";
document.getElementById("f1").value = "country2";
}
function clean(){
document.getElementById("country1").value = "";
document.getElementById("country2").value = "";
}
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Flag name</title>
<script src="flag.js"></script>
<script src="C:\Users\DELL\Desktop\jq\jquery.3.js"></script>
<link rel="stylesheet" text="text/css" href="flag.css">
</head>
<body>
<img src="C:\Users\DELL\Desktop\flag1.png" id="flag1" onmouseover="flag()" onmouseout="clean()">
<img src="C:\Users\DELL\Desktop\flag2.png" id="flag2" onmouseover="flag()" onmouseout="clean()">
<form action="#" method="GET">
<input type="text" name="Flag1" id="f1">
<input type="text" name="Flag2" id="f2">
</form>
</body>
</html>
How to get the result in separate text box when mouse is hovered over the image of a country flag.
I want only the output on which mouse is present.
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$("#flag1").mouseover(function() {
$("#f1").val("country1");
});
$("#flag1").mouseleave(function() {
$("#f1").val("");
});
$("#flag2").mouseover(function() {
$("#f2").val("country2");
});
$("#flag2").mouseleave(function() {
$("#f2").val("");
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Flag name</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img src="images/banner1.png" id="flag1">
<img src="images/mobile.png" id="flag2">
<form action="#" method="GET">
<input type="text" name="Flag1" id="f1">
<input type="text" name="Flag2" id="f2">
</form>
</body>
</html>
Hi and welcome to Stackoverflow, i think this could be a more generic solution for you:
function flag(element) {
document.getElementById(element.getAttribute('data-target')).value = element.id;
}
function clean(element) {
document.getElementById(element.getAttribute('data-target')).value = ''
}
img {
width: 150px;
}
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" id="country1" data-target="f1" onMouseOver="flag(this)" onMouseOut="clean(this)">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" id="country2" data-target="f2" onMouseOver="flag(this)" onMouseOut="clean(this)">
<form action="#" method="GET">
<input type="text" name="Flag1" id="f1">
<input type="text" name="Flag2" id="f2">
</form>
onMouseOver
function flag(id){
document.getElementById("f1").value = id;
}
function clean(){
document.getElementById("country1").value = "";
document.getElementById("country2").value = "";
}
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Flag name</title>
<script src = "flag.js"></script>
<script src = "C:\Users\DELL\Desktop\jq\jquery.3.js"></script>
<link rel = "stylesheet" text = "text/css" href = "flag.css">
</head>
<body>
<img onmouseover="flag(this.id))" src = "C:\Users\DELL\Desktop\flag1.png" id = "flag1" onmouseout = "clean()">
<img onmouseover="flag(this.id))" src = "C:\Users\DELL\Desktop\flag2.png" id = "flag2" onmouseout = "clean()">
<form action = "#" method = "GET">
<input type = "text" name = "Flag1" id = "f1">
<input type = "text" name = "Flag2" id = "f2">
</form>
</body>
</html> onmouseover="bigImg(this)"
How is the structure of you project?
flag.js has to be in the same folder that index.html. Also link your javascript scripts at the end of the body.
And then you have a couple of errors with the document.getElementById, you are using the wrong ids.
function flag(){
document.getElementById("f1").value = "country1";
document.getElementById("f2").value = "country2";
}
function clean(){
document.getElementById("f1").value = "";
document.getElementById("f2").value = "";
}
<!DOCTYPE html>
<html>
<head>
<title>Flag name</title>
<link rel="stylesheet" text="text/css" href="flag.css">
</head>
<body>
<img src="C:\Users\DELL\Desktop\flag1.png" id="flag1" onmouseover="flag()" onmouseout="clean()">
<img src="C:\Users\DELL\Desktop\flag2.png" id="flag2" onmouseover="flag()" onmouseout="clean()">
<form action="#" method="GET">
<input type="text" name="Flag1" id="f1">
<input type="text" name="Flag2" id="f2">
</form>
<script src="flag.js"></script>
<script src="C:\Users\DELL\Desktop\jq\jquery.3.js"></script>
</body>
</html>
you can use o onmouseover = "flag()" the parameter this.id like
<img src="C:\Users\DELL\Desktop\flag1.png" id="flag1" onmouseover="flag(this.id)" onmouseout = "clean()">
and after make a if to put the value
if (parameter == flag'){
put one flag
}else{
put the other flag
}
You need to pass your event or this inside of onmouseover and onmouseout event
You can find the textfield by using document.querySelector() and set value inside of onmouseover/onmouseout
You can get the you target attribute value using getAttribute() method.
DEMO
function flag(tag) {
document.querySelector(`[name=${tag.id}]`).value = tag.getAttribute('value');
}
function clean(tag) {
document.querySelector(`[name=${tag.id}]`).value = '';
}
<img src="C:\Users\DELL\Desktop\flag1.png" value="Country 1" id="flag1" onmouseover="flag(this)" onmouseout="clean(this)">
<img src="C:\Users\DELL\Desktop\flag2.png" value="Country 2" id="flag2" onmouseover="flag(this)" onmouseout="clean(this)">
<form action="#" method="GET">
<input type="text" name="flag1">
<input type="text" name="flag2">
</form>
I am able to download content of HTML page but page contain image of QR code, which is not visible in my downloaded image instead of that I am getting blank space
My HTML and jQuery code is in the following fiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="html-content-holder" align="center" style="background-color:lightcyan; color:black; width: 500px;
padding-left: 25px; padding-top: 10px;">
<div id="content">
<form method="post" id="qrForm">
<center>
<h4 style="color:red">Generate QR Code using Google Chart API</h4>
<br>
<b>Type Website URL:</b>
<!--Create TextBox Code-->
<input type="text" id="QRCode" value="https://www.google.com" size="25">
<br><br>
<h3>Output QR Image:</h3> <img id='qrImage' style='display:inline;' src="Images/chart.png" />
<img id="embedImage" />
<img id="embedImage" />
<!--<!--<!-- Create Button Code-->
<center>
<input type="button" value="Make QR Code" onclick="javascript: generateQRCode();">
</center>
</center>
<center>
<a id="btn-Convert-Html2Image" href="#">Download QR Png</a>
<br />
<!--Print Preview Img In this Div-->
<h3>Preview :</h3>
<div id="previewImage">
</div>
</center>
</form>
</div>
</div>
<script>
//Generate QR Code Function
function generateQRCode() {
this.qrImage.style.display = 'none';
//GoogleAPI + TextBox Value= Create QR Image.
this.qrImage.src = "https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=150x150&chl=" +
encodeURIComponent(QRCode.value.trim());
this.qrImage.style.display = 'inline';
//Convert Html To Png
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
html2canvas(element, {
onrendered: function(canvas) {
$("#QRCanvas").append(canvas);
getCanvas = canvas;
}
});
//jQuery: Download HTML to IMAGE
$("#btn-Convert-Html2Image").on('click', function() {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream" + "Image/chart.png");
$("#btn-Convert-Html2Image").attr("download", "QRCodeImage.png").attr("href", newData);
//<img class="preload_img" src="../../dbfhrael6egb5.cloudfront.net/wp-content/themes/qr/img-V2/modal/download_preloader.gif"/>
});
}
</script>
I found your html a bit complicated so I changed it to fit with my style. I did not use html2canvas, I was doing some annoying stuff for some reason, so I used another library that does the same thing.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Download QR</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.5.2/dom-to-image.min.js"></script>
</head>
<body>
<div style="background-color:lightgrey; padding: 25px;">
<h3>Generate QR Code using Google Chart API</h3>
<form>
<label for="QRCode">Type url:</label>
<input type="text" id="QRCode" value="https://www.google.com">
<button type="button" id="btn-generateQR">Generate QR</button>
</form>
<div id="displayImg"> </div>
<button id="btn-downloadQR" style="display:none;">Download QR</button>
</div>
<script>
$(document).ready(function () {
$('#btn-generateQR').click(function () {
let inputValue = $('#QRCode').val().trim()
$('#displayImg').html(
`
<h4>Output QR Image:</h4>
<img id="linkQR" src="https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=150x150&chl=${inputValue}"/>
`
)
$('#btn-downloadQR').show()
})
$('#btn-downloadQR').click(function () {
domtoimage
.toJpeg(document.getElementById('linkQR'), {
quality: 0.95
})
.then(function (dataUrl) {
let link = document.createElement('a')
link.download = 'imageQR.jpeg'
link.href = dataUrl
link.click()
})
})
})
</script>
</body>
</html>
TRY THIS
$('#btn-generateQR').click(function () {
html2canvas(document.getElementById('displayImg'), {
onrendered: function(canvas) {
var data = canvas.toDataURL("image/png");
var docDefinition = {
content: [{
image: data,
width: 500,
height:400,
}],
pageMargins: [ 50, 20, 20, 10 ]
};
pdfMake.createPdf(docDefinition).download("budget.pdf");
},
logging: true,
useCORS:true,
});
});
I would like to grab a file from the input tag and convert it to a URL then display that URL in the paragraph tag.
Is this possible with only Javacript/HTML?
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.12.0.min.js"></script>
</head>
<body>
<form action="demo_form.asp">
<input type="file" id="wow" name="pic" accept="image/*">
</form>
<script>
$("document").ready(function(){
$("#wow").change(function() {
document.getElementById("penut").innerHTML = document.getElementById("wow").files.toDataUrl();
});
});
</script>
<p id="penut"></p>
</body>
</html>
Six days later but I found some code that does it.
<p>Select a File to Load:</p>
<input id="inputFileToLoad" type="file" onchange="loadImageFileAsURL();" />
<p>File Contents as DataURL:</p>
<textarea id="textAreaFileContents" style="width:640;height:240" ></textarea>
<script type="text/javascript">
function loadImageFileAsURL()
{
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textAreaFileContents = document.getElementById
(
"textAreaFileContents"
);
textAreaFileContents.innerHTML = fileLoadedEvent.target.result;
};
fileReader.readAsDataURL(fileToLoad);
}
}
</script>
</body>
</html>
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.