So i have an image that is read via the FileReader with the following code:
var reader = new FileReader();
reader.onload = function (e) {
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = e.target.result;
imageObj.onload = function(){
//
canvas.width = this.width;
canvas.height = this.height;
// Move them before drawing anything.
context.drawImage(imageObj, 0,0);
context.font = "40pt Calibri";
context.fillText("My TEXT!", 20, 20);
console.log(e.target.result);
console.log(canvas.toDataURL("image/jpeg"));
BuildingService.addFile({file: file, filename: guid});
category.Pictures.push({offlineFoto: canvas.toDataURL(), FileNameOnDevice: guid});
};
leftToProcess--;
if (leftToProcess == 0) {
$scope.loadingCat = false;
$scope.loadingSubCat = false;
}
$scope.$apply();
};
reader.readAsDataURL(file);
Then on the line where I do BuildingService.addFile() I add the file, but now it still contains the original data of that file.
But I have no clue on how to modify the file object, that the new base64 image data is in the file.
So how would you do this?
Related
I have to work with pdfmake to build a pdf preview within my laravel application. I am a javascript noob and going nuts to generate the dataURI for an image in b. Hope you can help me out.
How can I get that generated base64 into my docdefinition?
function convertImageToDataURL(src, callback, outputFormat) {
// Create an Image object
var img = new Image();
// Add CORS approval to prevent a tainted canvas
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.naturalHeight;
canvas.width = this.naturalWidth;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
// Mark the canvas to be ready for garbage
// collection
canvas = null;
};
img.src = src;
// make sure the load event fires for cached images too
if (img.complete || img.complete === undefined) {
// Flush cache
img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
// Try again
img.src = src;
}
}
convertImageToDataURL(
'{{asset('storage/'.$report->author->enterprises->first()->logo_image)}}',
function(dataUrl) {
// console.log('RESULT:', dataUrl);
// Put dataUrl into DocDefinition here!?!?
// return dataUrl is undefined
}
);`
Okay. As I said: I am a javascript noob. So I changed the script to this one:
function convertImageToDataURL(imgSrc) {
img = new Image();
img.src = imgSrc;
img.crossOrigin = "Anonymous";
var canvas = document.createElement("canvas");
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/jpg");
canvas = null;
return dataURL;
}
It might not be beautyful nor elegant, but it works for me.
I need to read the image data from an image object in javascript.
But my code returns always a blank array (set to 255)
<html>
<header>
</header>
<body>
<input type="file" id="imgfile" onchange="testImageData(event);" />
<canvas id="canvas1" width="640" height="480"></canvas>
<script src="./../scripts/cam.js" ></script>
</body>
</html>
Here is the script
var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');
function getImageData(image){
/*
returns Uint8ClampedArray object
takes an image obj
*/
var canvas = document.createElement("canvas");
canvas.height = image.height;
canvas.width = image.width;
var ctx = canvas.getContext("2d");
ctx.width = image.width;
ctx.height = image.height;
ctx.drawImage(image,0,0);
return ctx.getImageData(0, 0, ctx.width, ctx.height);
}
function testImageData(event){
var selectedFile = event.target.files[0];
var reader = new FileReader();
var img = new Image();
reader.onload = function(event) {
console.log('onload');
img.src = event.target.result;
img.onload = function(){
context1.drawImage(img, 0,0, img.width, img.height);
var imgData = getImageData(img);
// console.log(imgData);
var data = imgData.data;
for(var i = 0; i<data.length;i+=4){
console.log(data[i],data[i+1],data[i+2],data[i+3]);
}
}
};
In my understanding, the console.log should return me the data in RGBA.
But I'm just getting 255.
console.log output
EDIT:
Okay I found a work around but I don't understand why this is working.
Instead using getImageData, I get the data directly from the drawn context1.
function testImageData(event){
var selectedFile = event.target.files[0];
var reader = new FileReader();
var img = new Image();
reader.onload = function(event) {
console.log('onload');
img.src = event.target.result;
img.onload = function(){
context1.drawImage(img, 0,0, img.width, img.height);
var imgData = context1.getImageData(0,0,img.width,img.height);
var data = imgData.data;
for(var i = 0; i<data.length;i+=4){
console.log(data[i],data[i+1],data[i+2],data[i+3]);
}
}
};
So the problem must lie in creating a new canvas.
You should wait for the image to load img.onload you are waiting for the readers onload event...
you also forget to read the file... missed reader.readAsDataURL
but you don't need the filereader.
window.URL = window.URL || webkitURL
var img = new Image();
img.src = URL.createObjectURL(file)
img.onload = function(){
// put your image on the canvas
}
I have a canvas and I want to convert it and show in a tag. I know we can convert canvas to image by using toDataURL() and toBlob() but both method give me base64 data which is not a image.
$("#upload_feedback_btn").on("click", function() {
let feedbackSrc = document.getElementById("capture").toDataURL('image/png', 1.0);
$("#feedback_canvas_image").append("<img id='upload_canvas_img' src="+feedbackSrc+">");
});
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,50,50);
var img = new Image();
img.src = can.toDataURL();
document.body.appendChild(img);
http://jsfiddle.net/simonsarris/vgmFN/
Use this, pure javascript:
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
make_base();
function make_base()
{
base_image = new Image();
base_image.src = 'img/base.png';
base_image.onload = function(){
context.drawImage(base_image, 100, 100);
}
}
So I have this code that modifies an image file and then converts it to a new image.
the new image (represented by canvas.toDataURL() ) is working perfectly,
but the conversion to the Blob is generating corrupted images.
var reader = new FileReader();
reader.onload = function (e) {
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = e.target.result;
imageObj.onload = function () {
canvas.width = this.width;
canvas.height = this.height;
context.drawImage(imageObj, 0, 0);
context.textAlign = 'right';
context.fillStyle = "#FFF";
context.font = "15pt Calibri";
context.fillText(new Date().toLocaleString(), this.width - 30, this.height - 30);
var blb = new Blob( [canvas.toDataURL()], {type: 'image/jpeg', encoding: 'utf-8'});
BuildingService.addFile({file: blb, filename: guid});
category.Pictures.push({offlineFoto: canvas.toDataURL(), FileNameOnDevice: guid});
};
};
reader.readAsDataURL(file);
The images are also noticable bigger then the one started with, startsize = 858KB, converted = 2.107KB
I want to ask you what's wrong with my code below :
var myCanvas = document.getElementById('myCanvas');
var ctx = myCanvas.getContext('2d');
var image = new Image();
image.onload = onLoad;
image.src = './PS_Countdown.jpeg';
ctx.drawImage(image, 25, 25);
function onLoad() {
console.log('Image loaded');
}