i'm trying to use localStorage to save an image, or multiple images for retrieval at a later date to upload to a server.
The current camera code is as follows:
function capturePhoto() {
navigator.camera.getPicture(onCameraSuccess, onCameraFail, {quality: 70, destinationType : Camera.DestinationType.DATA_URL});
}
function onCameraSuccess(imageData) {
//In our success call we want to first process the image to save in our image box on the screen.
var image = document.getElementById('image');
image.src = "data:image/jpeg;base64," + imageData;
//Create a new canvas for our image holder
var imgCanvas = document.createElement("canvas"),
imgContext = imgCanvas.getContext("2d");
// Make sure canvas is as big as the picture
imgCanvas.width = image.width;
imgCanvas.height = image.height;
// Draw image into canvas element
imgContext.drawImage(image, 0, 0, image.width, image.height);
// Get canvas contents as a data URL
var imgAsDataURL = imgCanvas.toDataURL("image/png");
// Save image into localStorage
try {
// localStorage.setItem(“savedImage”, imgAsDataURL);
localStorage.setItem("savedImage", imageData);
alert('Image Saved');
}
catch (e) {
alert("Storage failed: " + e);
}
var imageStorage = localStorage.getItem("savedImage");
// myCardHolder= document.getElementById(“m1-cardStorage-image1″);
// Reuse existing Data URL from localStorage
var imageInfo = document.getElementById('image');
imageInfo.src = "data:image/jpeg;base64," + imageStorage;
}
This triggers the camera, and the image captured is displayed into
<img id="image" src=""></img>
It also draws a canvas to output the image into. What i'm really trying to achieve is to capture the images base64 data to be able to store it into an array so that it may be uploaded/downloaded from a server.
Ideally i'd like to completely avoid having to display the image to the user, and simply store the images data
I may have misunderstood the localStorage/camera api a little, so any pointers would be great.
Does the image HAVE to be output into an element before the data can be stored? If i could just output it into the canvas that may never have to be shown, and extract the data from the canvas element?
Does the image HAVE to be output into an element before the data can be stored?
Not at all, in this case anyways. You are already receiving the image as base64 data so just store that directly.
Problems:
datauris can be chopped by the browser if too long
if not chopped by browser on string level, the data can be chopped by localstorage itself which has a size limit (i think it's currently around 5 mb for most browsers but there is no standard here)
a string uses two bytes per char so the storage is in effect the half
A better local storage is to use indexedDB.
When you read the base64 data, then you have to use an Image to show the data. Just prefix as you do with data:... etc. and remember to use correct file type.
Last year I was trying to solve the same problem, I don't have the code right now but I followed kind of the approach taken on this answer:
How to convert image into base64 string using javascript
Remember that localStorage has a limit of 5 MB, so if you save a lot of images in b64 you can reach that limit easily. (which was my case), so I had to move my storage to somewhere else, like a sqlite or something like that.
Related
I am working with Angular 8 and I getting couple of png base64 images from the server via web socket (signalR streaming). More precise: I am getting 15 responses (15 frames) per second and every response has 3 new images.
I need to process those images and present them to the user (currently in canvas).
What I do so far:
const image = new Image();
image.onload = () => {
this.canvasForConversionContext.drawImage(image, 0, 0, image.width, image.height);
const imageData = this.canvasForConversionContext.getImageData(0, 0, image.width, image.height);
// loop trought the image and change color (it can be done in web worker (separate threed))
this.processImagePixelByPixel(imageData.data);
// back to canvas to convert processed image data to new image
this.canvasForConversionContext.putImageData(imageData, 0, 0);
const finalImage = new Image();
finalImage.onload = () => {
// here are get the final image
};
finalImage.src = this.canvasForConversion.toDataURL();
};
image.src = imageFromTheServerInBase64Format;
This simple chart present process.
Those steps below are explanation of the code above:
load image gained from server into the image tag
put image into canvas for conversion
get image data from canvas
process image data pixel by pixel
put data again into canvas
export data from canvas as base64 image
create final image from exported base64 image
This is something already done and it works, but it works really slow.
Any other technique or suggestion into the current code how I can speed up this process ?
I tried to avoid canvas to manipulate with the image data, but I did not find anything about that.
There must be something else for manipulation of the image pixel except canvas (some library) ?
I solved my problems changing couple things here:
We do not need last 2 steps (6 and 7) from the list above:
export data from canvas as base64 image
create final image from exported base64 image
Since we add data again into the final canvas, we can send current canvas with processed image, since canvas can accept another canvas to add as image inside.
We separate streaming process and processing data to another working thread (web worker) and sending already prepared data to main thread.
Also very important part is that we send data to main thread only if main thread is ready since we do not want to overflow main thread with bunch of data. Main thread became really slow if we send him data which cannot process. In meanwhile in the streaming thread we put all processed data into queue until main thread does not send notification that it is ready and wants more data.
How to set up signalR streaming to another thread you can find here: Is it possible to create signalR streaming connection in web worker
We changed image data gained from the server from base64 image to array of lines. For example: [3, 5, 34, 3, 6, 34, 3, 7, 35] where every 3 values present [x, y, line length].
Data gained from the server in this format are smaller and much easier to process since we do not need to load image into the canvas to get pixel data, we immidetly can create image data and process them.
With those 3 steps of improvement we achieved needed performances.
I have a function that reads map tile images. I want to keep track of whether or not a certain image has already been cached. I'm using this function from this thread:
function is_cached(src) {
var image = new Image();
image.src = src;
return image.complete;
}
This was working great. But then I needed to do some image processing. In order to copy the image data to a canvas and process it pixel by pixel, I need to use CanvasRenderingContext2D.drawImage(image, 0, 0). But it bugs me with a cross-origin error. So I can add a image.crossOrigin = "*", which solves that problem, and I can write to a canvas and do the image processing I need. That bit looks like this:
imageOutput.crossOrigin = "*"
var demCtx;
imageOutput.onload = function(){
var c = document.createElement('canvas')
c.width = c.height = 256
demCtx = c.getContext('2d')
demCtx.drawImage(imageOutput, 0, 0)
var imageData = demCtx.getImageData(0, 0, 256, 256)
}
The issue that arises is that every time I run the larger function which contains these two bits of code, the is_cached function returns false every time, except the first time. But I know that even though is_cached is returning false, the images are indeed cached, as they are loading with 0 lag (as opposed to when a novel image is called and it takes a moment to grab it from the server).
Why might .crossOrigin = "*" be interfering with the .complete status of an image?
This is happening within an ObservableHQ notebook. Might that have something to do with it? ObservaleHQ gets weird sometimes.
ObservableHQ Notebook with the problem
You can find this code in the getTileUrl cell at the bottom. This notebook is not yet finished. You can see the cached status at the Tile Previously Cached line after you click around the map of submit changes to the inputs.
Thanks for reading.
Maybe fetch api can enforce cache using the param {cache:"force-cache"}, however images should be cached as expected. You can fetch the image and pass its blob as an image source.
replace your imageOutput.src with
imageOutput.src = URL.createObjectURL(await fetch(imageUrl, {cache:"force-cache"}).then(r => r.blob()));
make your getTileURL function async as we have to await fetch and blob to be ready to be passed as image source
async function getTileURL(latArg, lngArg, zoomArg) {
Use devtools to inspect network and see tile images coming from disk cache
edit:
just try your original code and inspect network via devtools. The tiles images are cache as expected. So no need to hack into fetch blob src.
I am creating a webpage that generates in line svg images and then allows the user to download them in various formats. (png,jpg,jpeg,svg) I have an exporting function to convert the images from inline svg to canvas as then canvas to dataURL for download. When I try exporting with Chrome, it takes time to shrink larger images down (7,000x10,000px) to the canvas because of Chrome's data cap. (FF doesn't have any issue and can shrink massive images in a fraction of the time that chrome can)
I need to create a loading progress bar for when the image is taking a while to populate and download from the canvas. I tried the solutions in this answer to no avail because I am using a objectURL created from a svg blob and not a image file on the server.
Is there a way to view the progress of an image load when setting the image src using an objectURL.
canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d',{alpha:false});
// creates a new blank image
var img = new Image();
// encode the svg to a string
var data = (new XMLSerializer()).serializeToString(svg);
// creates a blob from the encoded svg
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
// creates an object url for the download
var url = DOMURL.createObjectURL(svgBlob);
// when the image is done being created and its loaded
img.onload = function(){ /* drawImage to canvas and save as dataURL*/ }
// load the image src using the objectURL
img.src = url;
Is there a way to read the progress of the image loading when the url is a objectURL not a image file?
Short answer, there's no way I know of to do what you're asking. As you say, you're not downloading from a server, so there's no 'onprogress' event to hook into. You need something to provide regular alerts from inside the createObjectURL function, and it does not provide an event to hook into that it will fire 20 times during processing to give you a status.
What you could do instead is estimate how long it will take in Chrome, and provide an estimated status bar that way. If you know how big your canvas is, you can estimate how long it will take Chrome to generate your image based on its fixed data cap. If a 7Kx10K image takes x seconds, it should generally take that same time to generate every time, due to the fixed data cap, correct? Do a little math to figure out the seconds based on overall pixels. If it take 100 seconds to process (or whatever it takes), then that's 700,000 px / sec. Again, because of the fixed data cap, this value should remain the same until Chrome changes its data cap in a new version.
You could then provide a simulated progress bar that advances at that rate for how many px total you have. If you have 7M px, then it should take 10 seconds to advance the bar from 0 to 100% (based on my sample rate of 700Kpx/sec).
This is all based on Chrome having a fixed data cap; you can calculate a math rate against that based on the number of px you have to process.
I'm trying to produce the same base64 data for an image file in both JavaScript and in Ruby. Unfortunately both are outputting two very different values.
In Ruby I do this:
Base64.encode64(File.binread('test.png'));
And then in JavaScript:
var image = new Image();
image.src = 'http://localhost:8000/test.png';
$(image).load(function() {
var canvas, context, base64ImageData;
canvas = document.createElement('canvas');
context = canvas.getContext('2d');
canvas.width = this.width;
canvas.height = this.height;
context.drawImage(this, 0, 0);
imageData = canvas.toDataURL('image/png').replace(/data:image\/[a-z]+;base64,/, '');
console.log(imageData);
});
Any idea why these outputs are different?
When you load the image in Ruby the binary file without any modifications will be encoded directly to base-64.
When you load an image in the browser it will apply some processing to the image before you will be able to use it with canvas:
ICC profile will be applied (if the image file contains that)
Gamma correction (where supported)
By the time you draw the image to canvas, the bitmap values has already been changed and won't necessarily be identical to the bitmap that was encoded before loading it as image (if you have an alpha channel in the file this may affect the color values when drawn to canvas - canvas is a little peculiar at this..).
As the color values are changed the resulting string from canvas will naturally also be different, before you even get to the stage of re-encoding the bitmap (as PNG is loss-less the encoding/compressing should be fairly identical, but factors may exist depending on the browser implementation that will influence that as well. to test, save out a black unprocessed canvas as PNG and compare with a similar image from your application - all values should be 0 incl. alpha and at the same size of course).
The only way to avoid this is to deal with the binary data directly. This is of course a bit overkill (in general at least) and a relative slow process in a browser.
A possible solution that works in some cases, is to remove any ICC profile from the image file. To save an image from Photoshop without ICC choose "Save for web.." in the file menu.
The browser is re-encoding the image as you save the canvas.
It does not generate an identical encoding to the file you rendered.
So I actually ended up solving this...
Fortunately I am using imgcache.js to cache images in the local filesystem using the FileSystem API. My solution is to use this API (and imgcache.js makes it easy) to get the base64 data from the actual cached copy of the file. The code looks like this:
var imageUrl = 'http://localhost:8000/test.png';
ImgCache.init(function() {
ImgCache.cacheFile(imageUrl, function() {
ImgCache.getCachedFile(imageUrl, function(url, fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(e) {
console.log($.md5(this.result.replace(/data:image\/[a-z]+;base64,/, '')));
};
reader.readAsDataURL(file);
});
});
});
});
Also, and very importantly, I had to remove line breaks from the base64 in Ruby:
Base64.encode64(File.binread('test.png')).gsub("\n", '');
I'm attempting to consume server-side code that is owned by another team and that I can't easily change. It is processing an image and returning it via Response.BinaryWrite:
MemoryStream ms = new MemoryStream();
image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
var imageToReturn = ms.ToArray();
Response.ContentType = "image/jpg";
Response.BinaryWrite(imageToReturn);
However, when I attempt to do standard client-side processing of the result, like using Javascript's btoa() to convert it from a byte array to an ArrayBuffer, I get messages like "'btoa' failed: The string to be encoded contains characters outside of the Latin1 range".
I really just want to be able to display and work with this image - so any approach that would get it to appear in a canvas, or convert it to a data URL, etc., would help me out. Am I missing something?
If you just want to display the image, why don't you just src attribute of img tag to the url of the ASP.Net page, which is writing the JPG in the in the response.
If you want to display the image in canvas, you can do it in following way
myimage = new Image();
myimage.onload = function () {
var canvas = document.getElementById('canv');
var ctx = canvas.getContext('2d');
ctx.drawImage(myimage, x, y);
}
myimage.src = '<url to the asp.net page>';