I am working on an app with node-webkit to get some data of a TIFF-image. Because of TIFF-images are not supported by webkit, I want to create a temporary PNG version to show it in the app. How could I do this? Is there a way or place for temporary files in node-webkit like App.dataPath? Or should I use another node module node-temp?
I'm looking very forward to get your answers soon. Thank you.
You don't need to create temporary image file, try data URL.
<h1>You will see an image later</h1>
<img id="img" src="">
<script type="text/javascript">
//start js code here
var data_prefix = "data:image/png;base64,";
var img = document.getElementById('img');
var xhr = new XMLHttpRequest();
xhr.open('GET','https://avatars2.githubusercontent.com/u/1356417?s=140',true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e){
var arr = new Uint8Array(this.response);
var raw = String.fromCharCode.apply(null,arr);
var b64=btoa(raw);
var dataURL="data:image/jpeg;base64,"+b64;
img.src = dataURL;
};
xhr.send();
</script>
Yes, consider using the HTML5 File APIs if you are after a pure client-side solution.
This article has you covered.
This is, of course, assuming that you are manipulating the TIFF data in client-side Javascript, and want to write it to a temporary .png file.
Related
I have small laravel project that need to upload file from canvas to storage/uploads/imgs. This is my canvas
<body>
<canvas id="canvas"></canvas>
</body>
I may need ajax for client as below
var canvas = document.getElementById('image');
var dataURL = canvas.toDataURL();
$.ajax({
type: "POST",
url: "/route-here",
data: {
imgBase64: dataURL
}
}).done(function(o) {
console.log('saved');
});
But I'm not sure for coding in server(Laravel) side. Any advise or guidance would be greatly appreciated, Thanks.
I dont use Canvas, but do a bit of file uploading... You can use standard php methods for moving files in Laravel... Also, whilst you can definitely use AJAX, you could also accomplish this via a form...
Example of how I handle the upload in my controller:
if ($request->file('image')) {
$asset = $request->file('image')->getClientOriginalName();
$request->file('image')->move(
base_path() . '/storage/app/uploads/imgs/', $asset
);
}
I would also normally, do a check for path (as if your path doesn't exist - it will fail), duplicate file name etc before the ->move method is invoked.
A better way long term is to learn how the Laravel Storage class works - which is less code - but needs "disks" configured correctly as well as including the class in your controller etc.
Hope above helps point you in right direction...
function pushImage () {
var img = new Image();
img.src = '/waroot/chart/chart.png';
document.getElementById("test1").innerHTML = "<img src='/waroot/chart/chart.png'>";
document.getElementById("test2").innerHTML = img;
}
Test 1 works and shows the image, but test 2 doesn't. I am not sure how to solve it but i will need the way test 2 works further along my project since i'm going to have to circle through a large amount of images.
The images are created by JFreeCharts, saved to png and then have to be posted to a site. As a side question: is it possible to push the freecharts objects straight to the jscript instead of having to save them prior (i could throw them into the dictionary and then look them up later but i'm not sure if this works)
Use .appendChild(img) instead of .innerHTML:
function pushImage () {
var img = new Image();
img.src = '/waroot/chart/chart.png';
document.getElementById("test1").innerHTML = "<img src='/waroot/chart/chart.png'>";
document.getElementById("test2").appendChild(img);
}
Demo
This is because img is an image object, not an html string, so you have to append it to the DOM.
P.S., don't forget that the alt attribute is required in the img tag!
I am working on a project which generates an image on the HTML Canvas, and then offers to download the image as a PNG.
The program has to be clientside (javascript).
I can convert the canvas to image by using
var canvas=document.getElementById('canvas');
var img = canvas.toDataURL("image/png;base64");
And the code that is supposed to download the picture is:
var container = document.querySelector('#container2');
//container2 is a div in HTML
var output = container.querySelector('output');
//output is inside container2
window.URL = window.webkitURL || window.URL;
var prevLink = output.querySelector('a');
if (prevLink) {
window.URL.revokeObjectURL(prevLink.href);
output.innerHTML = '';}
//removes the download link if already there
var bb = new Blob([img], {data: "image/png;base64"});
//creates new blob from the img variable
var a = document.createElement('a');
a.download = 'test' + '.png';
//file name
a.href = window.URL.createObjectURL(bb);
//create URL from blob
a.textContent = 'Click here for download';
a.dataset.downloadurl = ["image/png;base64", a.download, a.href].join(':');
output.appendChild(a);
This works perfectly if the blobvariable is a string of text instead of the "img" variable. Instead of an image, I get af corrupted .png file which, opened in notepad gives data:image/png;base64,iVBORw0KGgoAAAANSUhEU...(long string of base64 letters), which is the correct string, but apparantly not good for PNG images. But if I write
document.write('<img src="'+img+'"/>');
The image is opened correctly in a new tab.
How can i make the downloaded image uncorrupted?
(it seems impossible to download the data generated by Canvas2image )
looks like you need to convert the base64 string back to a blob. here's how:
Base64 encoding and decoding in client-side Javascript
The document.write might work on some browsers, if they are able to handle base64 natively.
The other problem is that JavaScript usually works with string, but to download the file you need something like a ByteArray. Here's an implementation, I've found: https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js
That's how I got it working then:
var ab = Base64Binary.decodeArrayBuffer(img.substring(22));
var bb = new Blob([ab]);
var a = document.createElement('a');
a.download = 'test' + '.png';
a.href = window.URL.createObjectURL(bb);
a.textContent = 'Click here for download';
output.appendChild(a);
I just basically want to get the "http://... .png" or "http://... .jpg" location of my canvas as an image.
I have already tried toDataURL() but it is not working. Especially if I loaded an image within the canvas.
Here is my code: (btw, I'm using jQuery here)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var canvas = $("#canvas");
var ctx = canvas.get(0).getContext("2d");
var image1 = new Image();
image1.src = "http://www.helpinghomelesscats.com/images/cat1.jpg"
$(image1).load(function(){
ctx.drawImage(image1,0,0,200,200);
});
});
</script>
with my html/body having only this:
<canvas id="canvas" width="500" height="400"></canvas>
now, if you try that, that works fine. it shows that cat.
but when i add that toDataURL into my script, it just doesn't happen.
var dataImg = canvas.get(0).toDataURL();
i load this dataImg variable into another click-redirect function to test it, hoping it would redirect to the page using the base64 url it contains, but it just doesn't work:
$("#canvas").click(function(){
document.location = dataImg;
});
it brings me to a blank page? what am i missing here?
thank you very much!
Do you own http://www.helpinghomelesscats.com or is your code hosted directly on that site? If not you won't be able to do this due to cross site origin policies. The best way would be to have some server side code grab the image and then serve it locally on your domain.
If you do own helpinghomelesscats.com this should work, as tested here
Live Demo
Click the canvas and view the log in order to see the response.
var img = new Image();
img.src = '/images/backdrop.jpg';
ctx.drawImage(img,0,0);
I wanted to load an image from local disk on to canvas using dialog box mechanism rather than the path directly specified as in above example. I tried different sorts using JavaScript but in vain, even tried using the input type as file. What else can I try?
Take a look here:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images
It's important to have drawImage call after the image has loaded:
var img = new Image();
img.onload = function() {
var ctx = document.getElementById('ctx').getContext('2d');
ctx.drawImage(img, 0, 0);
}
img.src = 'images/backdrop.jpg';
Also, note that you probably want to use images/backdrop.jpg instead of /images/backdrop.jpg (note there's no slash in front), as using the latter would get the image from root directory, I would assume that's probably not where your images are.
As far as loading from a dialog box, you can replace the last line from the above with something like this:
var name = prompt("Enter the name of the file", "backdrop.jpg");
img.src = 'images/' + name;
This way, the user would be able to enter the name of the image file to load it. Of course, you need to have that file in your images folder.
Hope this helps.