Im trying to figure out how to save a image/canvas to a local folder in Smart Mobile Studio. This should be the way to create a right-click save to folder event:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// draw .................
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
I expect the sms-way to be something like this:
W3Cont:=TW3GraphicContext.Create(Null);
W3Cont.Allocate(300,300);
W3Canv:=TW3Canvas.Create(W3Cont);
asm
var dataURL = #W3Canv.toDataURL();
document.getElementById('canvasImg').src = dataURL;
end;
But the toDataUrl is unknown to sms !? ...
When I look in W3Graphics.pas, I see that TCanvas has a ToDataURL function.
So you can use this function without the asm section, like
var dataURL := W3Canv.ToDataURL('');
(note: javascript within an asm section is case sensitive!)
You can also take a look at W3Image.pas and it's TW3Image.toDataUrl function
Related
I'm trying to base64 encode a local file. It's next to my .js file so there's no uploading going on. Solutions like this (using XMLHttpRequest) get a cross-site scripting error.
I'm trying something like this (which doesn't work but it might help explain my problem):
var file = 'file.jpg'
var reader = new FileReader();
reader.onload = function(e) {
var res = e.target.result;
console.log(res);
};
var f = reader.readAsDataURL(file);
Anyone have any experience doing this locally?
Solutions like this (using XMLHttpRequest) get a cross-site
scripting error.
If using chrome or chromium browser, you could launch with --allow-file-access-from-files flag set to allow request of resource from local filesystem using XMLHttpRequest() or canvas.toDataURL().
You can use <img> element, <canvas> element .toDataURL() to create data URL of local image file without using XMLHttpRequest()
var file = "file.jpg";
var img = new Image;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
img.onload = function() {
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
ctx.drawImage(this, 0, 0);
var res = canvas.toDataURL("image/jpeg", 1); // set image `type` to `image/jpeg`
console.log(res);
}
img.src = file;
You could alternatively use XMLHttpRequest() as described at Convert local image to base64 string in Javascript.
See also How to print all the txt files inside a folder using java script .
For a details of difference of returned data URI from either approach see canvas2d toDataURL() different output on different browser
As described by #Kaiido at comment below
it will first decode it, at this stage it's still your file, then it
will paint it to the canvas (now it's just raw pixels) and finally it
will reencode it (it has nothing to do with your original file
anymore) check the dataURI strings... They're compeltely different and
even if you do the canvas operation from two different browsers,
you'll have different outputs, while FileReader will always give you
the same output, since it encode the file directly, it doesn't decode
it.
I wish to create a simple function in angularJS so I can read image from URL. Simply I put image URL and it convert image of that URL to base64 and saves to DB as well it shows to that Image Canvas. I wish to read image of all type irrespective of only PNG.
I have tried few logics, from Google I found code where it takes dimensions of canvas first..
$scope.convertBase64 = function () {
console.log("Firing Function");
var canvas = $scope.imageURL;
canvas.width = $scope.imageURL.width;
canvas.height = $scope.imageURL.height;
var ctx = canvas.getContext("2d");
ctx.drawImage($scope.imageURL, 0, 0);
var dataURL = canvas.toDataURL("image/png");
$scope.imageURLBase = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
return $scope.imageURLBase;
};
At same moment I wish to save image's base64 content. How to render using that base64 content anytime irrespective of canvas size using ng-source or else.
I have been searching this website for answers to this question, but I couldn't seem to find any. So I want to have the client provide an image to be loaded into a canvas for processing and that's it. So I don't want to save it on the server or on a cloud, but I just want to copy the image to an HTML5 Canvas to be processed from there. Is there a way I can do that without actually saving the file?
I'm not sure if I understand your question. You want that the user can open an image from the client and you load it into a html5 canvas. correct?
If so: you can use an input field of type file. In your code you use URL.createObjectUrl to create object urls from the local selected images. With "Image" you can load the image and in the onload event you draw it to the canvas.
var file = document.getElementById('file'); // the input element of type file
file.onchange = function(e) {
var ctx = document.getElementById('canvas').getContext('2d'); // load context of canvas
var img = new Image();
img.src = URL.createObjectURL(e.target.files[0]); // use first selected image from input element
img.onload = function() {
ctx.drawImage(img, 0, 0); // draw the image to the canvas
}
}
I'm trying to read a URL (the resource of which is an image) and encode this image in base64 to save it in a database.
I've looked around Google and Stackoverflow and a lot of people say that it is impossible to save a base64 formatted image that you read from a URL.(Are they wrong?)
My steps are as follows:
I parse an XML file where there is a URL for the image. I'm trying to save this image in a base64 format in a DB.
Can anybody help me?
I can't readily put together an example of this, but it should be possible, assuming the image is coming from the same domain you are running the code on, or you can control the cross origin header for the image (or else you'll get a Cross-origin error).
Assuming this is the case, you can. Here is a JSFiddle where I encode the logo of JSFiddle: http://fiddle.jshell.net/5S6BY/ (since that logo is on the same domain as where the code is running, it works).
The trick is to draw it to a canvas, then convert that canvas to a base64.
Here is the code:
var url = "http://fiddle.jshell.net/img/logo.png";
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
var image = new Image();
image.crossOrigin = 'anonymous';
image.addEventListener('load', function() {
ctx.drawImage(image, 0, 0, image.width, image.height);
document.body.innerHTML = canvas.toDataURL();
});
image.src = url;
It's pretty straight forward. Load the image, draw the image to the canvas, then call canvas.toDataUrl() to get the base64 encoded version, which you can use to do whatever you want.
When using toDataUrl() to set the source of an image tag I am finding that the image when saved is a great deal larger than the original image.
In the example below I am not specifying a second param for the toDataUrl function so the default quality is being used. This is resulting in an image much larger that the original image size. When specifying 1 for full quality the image generated is even larger.
Does anybody know why this is happening or how I can stop it?
// create image
var image = document.createElement('img');
// set src using remote image location
image.src = 'test.jpg';
// wait til it has loaded
image.onload = function (){
// set up variables
var fWidth = image.width;
var fHeight = image.height;
// create canvas
var canvas = document.createElement('canvas');
canvas.id = 'canvas';
canvas.width = fWidth;
canvas.height = fHeight;
var context = canvas.getContext('2d');
// draw image to canvas
context.drawImage(image, 0, 0, fWidth, fHeight, 0, 0, fWidth, fHeight);
// get data url
dataUrl = canvas.toDataURL('image/jpeg');
// this image when saved is much larger than the image loaded in
document.write('<img src="' + dataUrl + '" />');
}
Thank you :D
Here is an example, unfortunately the image cannot be cross domain and so I am having to just pull one of the jsfiddle images.
http://jsfiddle.net/ptSUd/
The image is 7.4kb, if you then save the image which is being output you will see that it is 10kb. The difference is more noticeable with more detailed images. If you set the toDataUrl quality to 1, the image is then 17kb.
I am also using FireFox 10 for this, when using Chrome the image sizes are still larger but not by as much.
The string returned by the toDataURL() method does not represent the original data.
I have just performed some extensive tests, which showed that the created data-URL depends on the browser (not on the operating system).
Environment - md5 sum - file size
Original file - c9eaf8f2aeb1b383ff2f1c68c0ae1085 - 4776 bytes
WinXP Chrome 17.0.963.79 - 94913afdaba3421da6ddad642132354a - 7702 bytes
Linux Chrome 17.0.963.79 - 94913afdaba3421da6ddad642132354a - 7702 bytes
Linux Firefox 10.0.2 - 4f184006e00a44f6f2dae7ba3982895e - 3909 bytes
The method of getting the data-URI does not matter, the following snippet was used to verify that the data-URI from a file upload are also different:
Test case: http://jsfiddle.net/Fkykx/
<input type="file" id="file"><script>
document.getElementById('file').onchange=function() {
var filereader = new FileReader();
filereader.onload = function(event) {
var img = new Image();
img.onload = function() {
var c = document.createElement('canvas'); // Create canvas
c.width = img.width;
c.height = img.height; c.getContext('2d').drawImage(img,0,0,img.width,img.height);
var toAppend = new Image;
toAppend.title = 'Imported via upload, drawn in a canvas';
toAppend.src = c.toDataURL('image/png');
document.body.appendChild(toAppend);
}
img.src = event.target.result; // Set src from upload, original byte sequence
img.title = 'Imported via file upload';
document.body.appendChild(img);
};
filereader.readAsDataURL(this.files[0]);
}
</script>
The size of the image is determined mostly by the quality of the encoder built into the browser. It has very little to do with the size of the original image. Once you draw anything onto a canvas all you have are pixels, you no longer have the original image. toDataURL does not magically reconstitute an image that was painted onto the canvas. If you want a file with the same size as the original image: use the original image.
Looks like kirilloid and Rob nailed it. I had this issue too and it appears to be a combo:
the dataURL uses base64 encoding which makes it around 1.37 X larger
each browser processes the toDataURL function differently
base64 encoded image size
I tested my thumbnail generator in win8.1 firefox and chrome and got dataURL string sizes:
firefox = 3.72kB
chrome = 3.24kB
My original image when converted to dataURL went from 32kB to 45kB.
I think the base64 part is the larger factor so I guess my plan now is to convert the dataURL back to a binary byte array before I store it on the server (probably on the client side because my server's lazy).