I am very new to Dynamic WebTwain therefore apologies in advance If I am asking something to basic.
I currently have scanning functionality available in my Dynamic WebTwain but I need to implement Uploading functionality as well. For that I need to use ActiveX Object and DynamicTwain Cab Files. I am reading the documentation of WebTwain but there they are not using ActiveX or Cab files.
Currently, I am using below method for uploading,
DWObject.LoadImageEx("",1);
However, I do not want to upload the images in designated image viewer of Dynamosoft. I want to upload images in a custom Image viewer. For that, I am assuming that I will need to get the object of selected image for it to load in the custom image viewer. How can I do that?
Looking for guidance.
The LoadImageEx method is used to load local images to the Dynamic Web TWAIN image viewer, not for uploading images. To load images to a custom viewer, you just need to use the input element and FileReader.
For example:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="file" name="document" id="document" accept="image/*">
<div id='customviewer'></div>
<script>
var input = document.querySelector('input[type=file]');
input.onchange = function () {
var file = input.files[0];
var fileReader = new FileReader();
fileReader.onload = function (e) {
var dataURL = e.target.result, img = new Image();
img.src = dataURL;
$("#customviewer").append(img);
}
fileReader.readAsDataURL(file);
}
</script>
</body>
</html>
Using LoadImageEx:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://unpkg.com/dwt#17.1.1/dist/dynamsoft.webtwain.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input class="button" type="button" value="Load Images" onclick="loadFile()" />
<div id='customviewer'></div>
<script type="text/javascript">
var element = document.createElement('div');
var dwtObj = null;
Dynamsoft.DWT.CreateDWTObjectEx({
WebTwainId: '1'
},
function (obj) {
dwtObj = obj;
dwtObj.Viewer.bind(element);
},
function (err) {
console.log(err);
}
);
function loadFile() {
if (dwtObj) {
dwtObj.LoadImageEx('', 5,
function () {
dwtObj.ConvertToBlob(
[dwtObj.CurrentImageIndexInBuffer],
Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
function (result, indices, type) {
var urlCreator = window.URL || window.webkitURL;
var dataURL = urlCreator.createObjectURL(result);
var img = new Image();
img.src = dataURL;
$("#customviewer").append(img);
},
function (errorCode, errorString) {
}
);
},
function (errCode, error) {
}
);
}
}
</script>
</body>
</html>
Related
I am using this code for making my things workaround. By using the below code I'm trying to get the image name and its the size in bytes/Mbps.
'use strict';
const myImages = [];
function addImage(imageBlob) {
myImages.push(imageBlob);
}
function redrawImages() {
const divForImages = document.getElementById('myImages');
divForImages.innerHTML = '';
myImages.forEach((imageBlob) => {
const img = document.createElement('img');
img.src = URL.createObjectURL(imageBlob);
divForImages.appendChild(img);
});
}
function addImageAndRedraw() {
const fileInput = document.getElementById('fileInput');
if (fileInput.files.length === 1) {
addImage(fileInput.files[0]);
redrawImages();
} else {
alert('No file selected. Select a file and try again.');
}
}
const button = document.getElementById('button');
button.addEventListener('click', addImageAndRedraw);
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My images</h1>
<input id="fileInput" type="file" accept="image/*" multiple="false" value="Select image">
<input id="button" type="button" value="Add image and redraw">
<hr>
<div id="myImages"></div>
<script src="album.js"></script>
</body>
</html>
I have tried to use img.name but it's deprecated.
How to do it? Any help would be highly appreatiated
imageBlob is not a blob. It's a File, which has a name property. The name doesn't get transferred to the img DOMElement.
So, I've made a java program that runs through a list of IPs, pings them, and updates a file on the devices status. I want to know how to open the file into a webpage and update it, so a user can open the webpage and just see a list of data from the file, they don't have to select the file or refresh the page.
Is this feasible to do with javascript/html?
This is the code I'm working with so far:
<html>
<head>
<title>Import Data</title>
<script>
var openFile = function() {
var input = event.target;
var reader = new FileReader();
reader.onload = function() {
var text = reader.result;
var node = document.getElementById('output');
node.innerText = text;
console.log(reader.result.substring(0,200));
};
reader.readAsText(input.files[0]);
setTimeout(openFile(),1000);
};
</script>
</head>
<body>
<input type='file' accept='text/plain' onchange='openFile()'><br>
<div id='output'>
</body>
</html>
But I can't seem to hunt down where to hardcode the path to the file in. When I use this manual selection method, it'll update once, whether the file increases in elements or decreases.
EDIT:
I've narrowed it down to where the file needs to be uploaded:
<html>
<head>
<title></title>
<script>
function uploadFile() {
var reader = new FileReader();
reader.onload = function(event) {
var contents = event.target.result;
console.log("File contents: " + contents);
};
reader.onerror = function(event) {
console.error("File could not be read! Code: " + event.target.error.code);
};
var fileInputElement = document.getElementById("FileName");
reader.readAsText(fileInputElement.files[0]);
console.log(fileInputElement.files[0]);
}
</script>
</head>
<body>
<input type='file' accept='text/plain' value='RESULTS.txt' id='FileName' onchange='uploadFile()' style="display:none;">
</body>
</html>
If I try to type just a file path in a string, it complains it's not type 'blob'. When I do this, it requires the user to enter a file name, but obviously it can't be seen. How can I make that 'file' variable a static variable so it always opens a that file without prompting the user?
Doing some more research, it's security reasons as to why you can't access a file from the local computer.
So, in lieu of all that, I made some code that will constantly load the selected file so you can see whenever it changes:
<html>
<head>
<title>Import Data</title>
<script>
var input;
var openFile = function() {
var reader = new FileReader(event);
reader.onload = function() {
var text = reader.result;
var node = document.getElementById('output');
node.innerText = text;
console.log(reader.result.substring(0,200));
};
reader.readAsText(input.files[0]);
setTimeout(openFile,1000);
};
</script>
</head>
<body>
<input type='file' accept='text/plain' onchange='input = event.target; openFile(event);'><br>
<div id='output'>
</body>
</html>
I have the following code -
<html>
<head>
<script>
function myFunction()
{
var x = document.getElementById("myFile");
alert(x.value);
document.getElementById("picture").src=x.value;
}
</script>
</head>
<body>
<input type="file" id="myFile"><br>
<button onclick="myFunction()">Render this</button>
<img id="picture" src="C:\Users\Shin\Desktop\410.svg">
</body>
</html>
Initailly its showing the image, after I select another file and click the button, it shows me the path in the alert box perfectly but, it doesnt render the new pic and its showing a red cross at the place what you see in image when the src is incorrect. I used chrome browser.
try this...
<html>
<head>
<script>
function myFunction()
{
var input = document.getElementById("myFile");
var fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
var img = document.getElementById("picture");
img.src = event.target.result;
}
}
</script>
</head>
<body>
<input type="file" id="myFile"><br>
<button onclick="myFunction()">Render this</button>
<img id="picture" src="C:\Users\rajpc\Pictures\1390.jpg">
</body>
</html>
this would definitely work....
Change your img src as desired..
I hope this should help you....
you'll need URL.createObjectURL for that:
url=URL.createObjectURL(x[0]);
To read a local file you would need to use the FileReader Api.
function myFunction() {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("picture").src = reader.result;
};
reader.readAsDataURL(document.getElementById("myFile").files[0]);
};
I am just working on a web site for fun and I was wondering if you could use JavaScript to read in a local text file and then display it HTML. So for example if I had a text file saved with my project then could I write a function in JavaScript that reads the entire file and then just displays all that text within on the web page?
I've looked around and tried to find something that will do this, but I don't think I fully understand. I have:
function readFile(fileName){
var fileRead = new ActiveXObject('Scripting.FileSystemObject');
text = fileRead.OpenTextFile(fileName, 1, false, 0);
while(!text.AtEndOfSteam){
text += text.ReadLine();
}
text.Close();
}
I don't know if this is will work or do what I want to do. So my question is, how do I use JavaScript to read in a text file, then display the contents of that text file on a webpage in HTML?
You have to use the File API.
var input = document.getElementById("myFile");
var output = document.getElementById("output");
input.addEventListener("change", function () {
if (this.files && this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
reader.addEventListener('load', function (e) {
output.textContent = e.target.result;
});
reader.readAsBinaryString(myFile);
}
});
<input type="file" id="myFile">
<div id="output"></div>
EDIT
After reading your comment, i think this is what you want.
var output = document.getElementById("output");
$("a").on("click", function (e) {
e.preventDefault();
$.ajax(this.href).done(function(data) {
output.textContent = data;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
Link to file
<html>
<head>
<title>reading file</title>
</head>
<body>
<input type="file" id="myFile">
<hr>
<!--<div style="width: 300px;height: 0px" id="output"></div>-->
<textarea style="width:500px;height: 400px" id="output"></textarea>
<script>
var input = document.getElementById("myFile");
var output = document.getElementById("output");
input.addEventListener("change", function () {
if (this.files && this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
reader.addEventListener('load', function (e) {
output.textContent = e.target.result;
});
reader.readAsBinaryString(myFile);
}
});
</script>
</body>
</html>
I am trying to develop an application where it allows the user to choose a file and then read it and display the text on the screen.
My code can be found here: http://jsfiddle.net/5sy076n5/1/.
<html>
<head>
<title>FileReader Example</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function testRead() {
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.click();
}
</script>
</head>
<body>
<h1>Example</h1>
<p>Read <a onClick="testRead();">File</a></p>
</body>
</html>
You may notice that I don't have an input tag inside the body. This is because I want the user to click on the tag rather than the text.
My problem is what I am suppose to do after fileSector.click();? How can I get what file was chosen?
You have already created the input element on runtime and you have the reference of it fileSelector
You can simply use this variable to FileReader API
function testRead() {
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.click();
fileSelector.addEventListener('change', function () {
var file = fileSelector.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var text = reader.result;
console.log(text); // Select *.txt file and see console
}
reader.readAsText(file);
});
}
DEMO