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');
}
Related
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 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?
I retrieve a user from the database who has profile picture. This picture is base64 and drawImage to the canvas. but it failed to draw.
Here's my code:
var userId = {'userId' : 1};
$scope.user = UserProfileService.getUserProfile.query(userId, function() {
var canvas = document.getElementById("mycanvasweb");
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function() {
ctx.drawImage(this, 0, 0);
};
image.src = $scope.user.profilePic;
});
Please help.
Error: uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http://127.0.11.1/test/canvas5_b.php :: setup :: line 27" data: no]
function setup() {
var e = document.getElementById("mycanvas");
var ctx = e.getContext('2d');
var meter = new Image();
meter.src = "meter.jpg";
var meter_bar = new Image();
meter_bar.src = "meter_bar.jpg";
//alert(meter);
ctx.beginPath();/////////LINE 27////////////
ctx.drawImage(meter, 50, 100);
//ctx.globalCompositeOperation = "lighter";
ctx.drawImage(meter_bar, 68, 123);
ctx.closePath();
}
window.onload = setup;
Both the images are in the right folder. The thing that gets me is that it works if you put a alert(meter); before line 27. Its as if it is not loaded, but I have it running on window.onload, so I dont see how that is.
edit : It is an issue of when the image is loaded (ty rob). It appears best to globally declare and set the image src, and then call window.onload = setup, like this : (correct me if this is bad)
var img1, img2;
img1 = new Image();
img2 = new Image();
//declare and set the images src
img1.src = "meter.jpg";
img2.src = "meter_bar.jpg";
var canvasHeight, canvasWidth;
canvasHeight = 300;
canvasWidth= 600;
var ctx;
function setup() {
var e = document.getElementById("mycanvas");
ctx = e.getContext('2d');
draw();
}
function draw() {
ctx.clearRect(0,0,canvasWidth, canvasHeight);
ctx.beginPath();
ctx.drawImage(img1, 50, 100);
ctx.drawImage(img2, 68, 123);
ctx.closePath();
}
window.onload = setup;
Make sure the images are loaded first. For instance:
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
}
// put this after onload, otherwise onload may
// not be called if image is in cache
img.src = 'whatev.png';
It's likely that the delay introduced by alert is enough to allow the image to load, but without alert, the images have not loaded in time. Try drawing the images onto the canvas only once they have loaded:
function setup() {
function maybeDraw() {
this.loaded = true;
if(meter.loaded && meter_bar.loaded) {
ctx.beginPath();
ctx.drawImage(meter, 50, 100);
//ctx.globalCompositeOperation = "lighter";
ctx.drawImage(meter_bar, 68, 123);
ctx.closePath();
}
}
var e = document.getElementById("mycanvas");
var ctx = e.getContext('2d');
var meter = new Image();
var meter_bar = new Image();
meter.onload = maybeDraw;
meter_bar.onload = maybeDraw;
meter.src = "meter.jpg";
meter_bar.src = "meter_bar.jpg";
}
window.onload = setup;