Converting file:/// image to base64 with JavaScript - javascript

Here's my code to convert a normal image to base64:
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
var img = document.createElement("img");
img.src = "file:///" + contact.photos[0].value;
ctx.drawImage(img, 100, 100);
console.log(c.toDataURL());
However, this outputs an empty image. The contact.photos[0].value variable is from the Cordova Contacts Plugin, in which all contact photos on iOS are represented as local URLs. How can I accomplish this?

Related

How to optimize canvas image and get jpg instead of png

<img id='imgt' src='01.jpg' alt='img'>
var img = document.getElementById("imgt");
c1 = document.createElement("canvas");
var ctx = c1.getContext("2d");
var a = $('#imgt').width();
var b = $('#imgt').height();
c1.width = a;
c1.height = b;
ctx.drawImage(img, 0, 0, a, b);
So resulting image is the same dimensions as source img, but it has over 1MB while the source image is less than 1MB.
Also the source image is jpg and resulting image is png.
How can I get jpg instead of png and how to optimize resulting image for web?
When you' re making the data URI you can specify
canvas.toDataURL("image/jpeg", 0.95);
or
canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95);
which will generate a JPG. Just make sure your picture is opaque, because otherwise the background will become black.

Getting a base64 png from a PDF.JS pdf converted to a canvas tag?

I'm trying to get a base64 encoded png value from a canvas that was created by converting a pdf with the PDF.JS library by Mozilla.
So I had a base64 encoded PDF that I converted into a HTML canvas. I now need to convert that HTML canvas into a base64 encoded png value that I can use with a HTML img tag that displays properly.
I tried the HTMLCanvasElement.toDataURL(), however it doesn't display anything. I tried using the same method with some green boxes drawn in canvas and it worked fine, meaning that the base64 encoded pdf converted to canvas just doesn't want to work with that method.
Any other solutions or a workaround for the solution I tried?
**I need to do this inside my JS code with my HTML.
function convertDataURIToBinary() {
var raw = window.atob(BASE64 OF PDF);
var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));
for(var i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
}
var pdfAsArray = convertDataURIToBinary();
PDFJS.workerSrc = "http://mozilla.github.io/pdf.js/build/pdf.worker.js";
var canvas = _el.querySelector(".insertHere");
PDFJS.getDocument(pdfAsArray).then(function getPdfHelloWorld(pdf) {
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
var context = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
canvas = _el.querySelector(".insertHere");
var imgSrc = canvas.toDataURL("image/png");
var img = new Image();
img.src = imgSrc;
_el.querySelector(".insertImageLabel").appendChild(img);
});
});
You are not waiting on the promise returned by render() to finish async operation. See https://github.com/mozilla/pdf.js/blob/master/examples/learning/prevnext.html#L76 how to wait on completion:
...
var renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(function () {
// Page rendered, now take snapshot.
});
...

Convert image to base64 works but bad [duplicate]

This question already has an answer here:
CanvasContext2D drawImage() issue [onload and CORS]
(1 answer)
Closed 7 years ago.
I want convert a picture to base64. So, in the html i put a img and canvas with display:none
html :
<img style="display:none" id="imgDownload" />
<canvas style="display:none" id="myCanvas" />
and in the controller i do this :
controller :
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("imgDownload");
img.crossOrigin = 'anonymous';
img.src = conf.storeUrl + '/' +$scope.fRoot.name + $scope.getFileWay() + value.name;
console.log(img);
ctx.drawImage(img, img.naturalHeight, img.naturalWidth);
var base64Img = c.toDataURL();
i get a base64 but it's not good...
see an example :
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII=
you can test it here.
and i tried giving a height and width to the canvas but the result is that :
data:,
and it's the same thing for différents images, you have a idea?
You're trying to draw the image on the canvas before it has finished loading.
After setting img.src, it takes some time to load the image, so you have to wait until that has happened before you proceed.
You can use img.onload for that:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("imgDownload");
img.crossOrigin = 'anonymous';
img.onload = function()
{
console.log(img);
ctx.drawImage(img, img.naturalHeight, img.naturalWidth);
var base64Img = c.toDataURL();
};
img.src = conf.storeUrl + '/' +$scope.fRoot.name + $scope.getFileWay() + value.name;

HTML5 camera image to local storage

my mobile app first uses the camera element of html5 and then takes a picture. The picture then shows on a seperate div. I'm having problems naming the image & then saving both the image and the caption to localstorage. Are my attempts futile, or is there a way to do this?
Thank you for any help or guidance offered.
To save an image in localstorage you need to convert it to dataURL string. You can do this via the canvas element as shown below.
When you want to retrieve the image from localstorage and display it you can simply set the src attrib of an image element to the dataURL string.
// convert image to localstorage friendly data URL string
function getImageDataURL(img) {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL('image/png');
return dataURL;
}
var image = new Image();
image.onload = function() {
var dataURL = getImageDataURL(image);
document.body.innerHTML = dataURL;
image.src = dataURL;
document.body.appendChild(image);
};
image.crossOrigin = 'anonymous';
image.src = '//placekitten.com/g/120/120';

Is there a max img size able to render to html canvas?

I am trying to read in a jpg and render the image to an HTML5 canvas and then grab and store the data as a DataURL. I am wondering is there a maximum size image that can be rendered into a canvas. It works with with files 5mb and smaller but when I try for instance a 10mb jpg when I open the resulting dataURI in a new tab it is just black. I posted the basic logic for what I am doing below.
reader = new FileReader();
reader.onloadend = function() {
var finalCanvas = document.createElement('canvas'),
ctx = finalCanvas.getContext('2d'),
img = new Image();
img.onload = function() {
finalCanvas.width = img.width;
finalCanvas.height = img.height;
ctx.drawImage(img, 0, 0);
// Get data URL and compress image 75%
finalImagedocument = finalCanvas.toDataURL('image/jpeg', 0.75);
console.log(finalImagedocument);
}
img.src = reader.result;
}
filedata = reader.readAsDataURL(f);
The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB
RAM and 5 megapixels for devices with greater or equal than 256 MB RAM

Categories