Develop Reference

Why is getImageData only giving data ouput of the first 300 pixels? [duplicate]

Here is my code. I am uploading a image and using like this :
> var canvas = document.createElement('canvas');
> var context = canvas.getContext('2d');
> context.drawImage(image, 0, 0);
This works fine but if I copy the imagedata like below to another canvas. It loads image partially.
var canvas = document.getElementById('myCanvas');
var context1 = canvas.getContext('2d');
context1.putImageData(context.getImageData(0, 0, image.width, image.height), 0, 0);
I tried same approach by creating two canvas and this code which worked fine but without image.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 300);
var d = document.getElementById("myCanvas1");
var btx = d.getContext('2d');
var imgData = ctx.getImageData(0, 0, 300, 300);
btx.putImageData(imgData, 0, 0);
If i create two canvas it works fine but not like the above where I am using in memory canvas.
My HTML file has this :
<canvas id="myCanvas" width="960" height="960"></canvas>
<canvas id="myCanvas1" width="960" height="960"></canvas>

When you create canvases, you need to set their width manually. Default canvas size is 300x150. From here HTMLCanvasElement.
Something like this:
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);

To copy one canvas to another use drawImage rather than getImageData, setImageData That way you will use the GPU to move the pixels rather than the CPU. You also have the option to resize, crop, and apply a variety of FXs.
// create a copy of canvasSource
// returns the newly created canvas.
function copyCanvas(canvasSource){
var canvasCopy = document.createElement("canvas");
canvasCopy.width = canvasSource.width;
canvasCopy.height = canvasSource.height;
canvasCopy.getContext("2d").drawImage(canvasSource, 0, 0);
return canvasCopy;
}

Rescaling image make it black in javascript

I have come up with a function which transform the width and height of an image to new values,
function imageToDataUri(src, width, height) {
// create an off-screen canvas
var img=new Image();
img.src=src;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// set its dimension to target size
canvas.width = width;
canvas.height = height;
// draw source image into the off-screen canvas:
ctx.drawImage(img, 0, 0, width, height);
var d = ctx.getImageData(0, 0, width, height);
console.log('de from transformation is');
console.log(d);
return canvas.toDataURL();
}
The input to the function is a base64 string and the output is the same as well, but sometimes above function gives me a complete black image when I use my input image. Can someone tell me is there anything I am missing in my codes?

How to execute a function after another one that has an onload function inside it?

I want to display an image(dinamically) on the canvas and then reset it.
drawImage() is the function that draws the image on the canvas after its source is loaded.
resetCanvas() is the function that resets/clean the canvas.
var canvas = document.getElementById("Canvas");
const ctx = canvas.getContext("2d");
drawImage("img/earth.jpg");
resetCanvas();
//more code
function resetCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function drawImage(source) {
var img = new Image();
img.onload = function() {
var x = img.width;
var y = img.height;
adjustCanvasSize(x, y);
ctx.drawImage(img,0,0, x, y);
}
img.src = source;
}
When I execute this code, the resetCanvas() is "ignored". I don't want to insert the resetCanvas() inside the onload function of the drawImage() as it actually represents many other distinct functions and instructions that are going to be executed after the drawImage() and it would look wrong.
I was thinking if there was a way of making javascript more patient and stop it from executing anything until the image gets loaded in the drawImage function.

A few comments:
If you reset the canvas after drawing the image you you won't see the image since the resetCanvas function is deleting everything you previously draw on the canvas
There are some problems when working with images in canvas. Please read this article: MDM Using images
Next come my code. I hope it helps.
var canvas = document.getElementById("Canvas");
const ctx = canvas.getContext("2d");
resetCanvas();
drawImage("https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg");
//more code
function resetCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function drawImage(source) {
var img = new Image();
img.onload = function() {
var x = img.width;
var y = img.height;
adjustCanvasSize(canvas,x, y);
ctx.drawImage(img,0,0, x, y);
}
img.src = source;
}
function adjustCanvasSize(canvas, x, y){
canvas.width = x;
canvas.height = y;
}
canvas{border:1px solid;}
<canvas id="Canvas"></canvas>

javascript drawimage height incorrect

i have this image Image Link and i want to put that image into canvas
but the result height and width did not accurate
this is my script
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');
img.src = "https://s13.postimg.org/rmk2wq6uf/depan.jpg";
ctx.drawImage(img, 0, 0);
jsfiddle link
please help

You can set the height and width of the canvas programmatically using naturalWidth and naturalHeight:
https://jsfiddle.net/ryanpcmcquen/wbxnkuq4/
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = document.createElement('img');
img.src = "https://s13.postimg.org/rmk2wq6uf/depan.jpg";
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
<canvas id="canvas"></canvas>
MDN:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement

ctx.drawImage(img, 0, 0, img.width, img.height,
0, 0, canvas.width, canvas.height);
https://jsfiddle.net/Im_Saajan/ekw9n3et/2/
check this jsfiddle

Creating image from canvas results in blank image in firefox

Okay I found out what the problem was. Every time you say new Image() you HAVE to use the onload handler to ensure that the image has really load. Even if you assign the src attr via toDataURL.
I want to get a subimage of a given image.
In Google Chrome when I type console.log(createSubImg(img, 0, 0, 20, 20));
I can see the image. In Firefox I see an empty image.
What did I wrong?
My method looks like:
function createSubImg(img, x, y, width, height) {
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.drawImage(
img,
x * width,
y * height,
width,
height,
0,
0,
width,
height);
var result = new Image();
result.src = canvas.toDataURL();
return result;
}

It works for me like this:
var img;
(function(){
img = document.getElementById('example');
img.onload = function(){
console.log(createSubImg(img, 0, 0, 20, 20));
};
});
and if I write console.log(createSubImg(img, 0, 0, 20, 20)); in Firefox it works too.

Here Is The Solution
<body>
<form id="form1" runat="server" style="position: relative;">
<img id="scream" width="220" height="277" src="Images/01.jpg" alt="The Scream" />
<img id="test" src="#" />
</form>
Script part is here
<script type="text/javascript">
$(function () {
var canvas = document.createElement('canvas');
var img = document.getElementById("scream");
var ctx = canvas.getContext("2d");
var res = createSubImg(img, 0, 0, 200, 200, canvas, ctx);
var myImage = $("#test");
myImage.attr('src', res.src);
});
function createSubImg(img, x, y, width, height, canvas, ctx) {
canvas.width = width;
canvas.height = height;
ctx.drawImage(
img,
x * width,
y * height,
width,
height,
0,
0,
width,
height);
var result = new Image();
result.src = canvas.toDataURL();
return result;
}
</script>