Develop Reference

Image concatenation script

everyone. I'm trying to write a script that would render images from file inputs on a canvas in a row.
First I cycle through images to calculate the canvas width (because the canvas is wiped on resizing). Then cycle again to render the images.
canvas.width = 0;
let x = 0,
y = 0,
totalWidth = 0;
for (let i = 0; i < document.querySelectorAll(".has-file").length; i++) {
let input = document.querySelectorAll(".has-file")[i];
let image = input.files[0];
let img = new Image();
console.log(img);
img.src = window.URL.createObjectURL(image);
img.addEventListener('load', () => {
console.log(img);
let newWidth = img.width * canvas.height / img.height;
totalWidth += newWidth;
canvas.width = totalWidth;
}, false);
};
for (let i = 0; i < document.querySelectorAll(".has-file").length; i++) {
let input = document.querySelectorAll(".has-file")[i];
let image = input.files[0];
let img = new Image();
img.src = window.URL.createObjectURL(image);
img.addEventListener('load', () => {
let newWidth = img.width * canvas.height / img.height;
ctx.drawImage(img, x, y, newWidth, canvas.height);
x += newWidth;
}, false);
};
}
The app behaves weird, the images are not always rendered, and when they do, not always where they supposed to be.

First problem with the code is that you're loading images twice, and the randomness is due to the fact that image loading can be ambiguous. Check out this jsfiddle. I have used text input instead of files, drawing takes place when it is the last image otherwise resizing the canvas can cause canvas to reset, losing the previous draw.
var canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d', {
antialias: false,
depth: false
});
canvas.width = 0;
let x = 0,
y = 0,
totalWidth = 0;
let obj = [];
let k = 0;
for (let i = 0; i < document.querySelectorAll(".has-file").length; i++) {
let input = document.querySelectorAll(".has-file")[i];
let image = input.value;
let img = new Image();
img.src = image;//window.URL.createObjectURL(image);
img.addEventListener('load', () => {
console.log(img);
let newWidth = img.width * canvas.height / img.height;
totalWidth += newWidth;
canvas.width = totalWidth;
obj.push({img: img, x: x, y: y, newWidth: newWidth, height: canvas.height});
k++;
x += newWidth;
if (k == document.querySelectorAll(".has-file").length )
draw();
}, false);
};
function draw() {
for (var i = 0; i < obj.length; i++) {
ctx.drawImage(obj[i].img, obj[i].x, obj[i].y, obj[i].newWidth, obj[i].height);
}
}
<input style="display: none;" class="has-file" value="https://i.imgur.com/I86rTVl.jpg" />
<input style="display: none;" class="has-file" value="https://images.unsplash.com/photo-1446292267125-fecb4ecbf1a5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
<canvas id="canvas"></canvas>

Canvas for image clipping - context.drawImage()

I want to show four canvas from the same image
I'm working with an image which I need to be splitted into four pieces. I don't know the actual dimensions of the image so I need it to be dynamic. I already get this far, and I think the first piece is working fine, but I don't know why it is not working for the rest of the pieces. Could you point where the error could be?
I am new working with canvas, so my code is based on this answer:
https://stackoverflow.com/a/8913024/6929416
var image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png';
image.onload = cutImageUp;
function cutImageUp() {
var natW = image.width / 2;
var natH = image.height / 2;
var widthOfOnePiece = jQuery(window).width() / 2;
var heightOfOnePiece = jQuery(window).height() / 2;
var imagePieces = [];
for (var x = 0; x < 2; ++x) {
for (var y = 0; y < 2; ++y) {
var canvas = document.createElement('canvas');
canvas.width = widthOfOnePiece;
canvas.height = heightOfOnePiece;
var context = canvas.getContext('2d');
context.drawImage(image,
x * natW, y * natH,
natW, natH,
x * canvas.width, y * canvas.height,
canvas.width, canvas.height
);
/*drawImage(image,
sx, sy,
sWidth, sHeight,
dx, dy,
dWidth, dHeight);*/
imagePieces.push(canvas.toDataURL());
}
}
// imagePieces now contains data urls of all the pieces of the image
// load one piece onto the page
var anImageElement = document.getElementById('testing');
var anImageElement2 = document.getElementById('testing2');
var anImageElement3 = document.getElementById('testing3');
var anImageElement4 = document.getElementById('testing4');
anImageElement.src = imagePieces[0];
anImageElement2.src = imagePieces[1];
anImageElement3.src = imagePieces[2];
anImageElement4.src = imagePieces[3];
}
img{ border: 1px solid; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<img id="testing" src="">
<img id="testing2" src="">
<img id="testing3" src="">
<img id="testing4" src="">
</section>
I expect the canvas dimensions to fit on the screen, so I set them to half of the windows width and height.

The parameters for drawImage are
drawImage(
source,
sourceX, sourceY, sourceWidth, sourceHeight,
destinationX, destinationY, destinationWidth, destinationHeight
)
In your code, you are setting destinationX to x * canvas.width and destinationY to y * canvas.height. This means that for every iteration where either x or y are not 0, you are drawing outside of the destination area, that is for every parts but the first one.
Simply hard-code destinationX-Y to 0and you'll be good.
var image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png';
image.onload = cutImageUp;
function cutImageUp() {
var natW = image.width / 2;
var natH = image.height / 2;
var widthOfOnePiece = jQuery(window).width() / 2;
var heightOfOnePiece = jQuery(window).height() / 2;
var imagePieces = [];
for (var x = 0; x < 2; ++x) {
for (var y = 0; y < 2; ++y) {
var canvas = document.createElement('canvas');
canvas.width = widthOfOnePiece;
canvas.height = heightOfOnePiece;
var context = canvas.getContext('2d');
context.drawImage(image,
x * natW, y * natH,
natW, natH,
0, 0,
canvas.width, canvas.height
);
/*drawImage(image,
sx, sy,
sWidth, sHeight,
dx, dy,
dWidth, dHeight);*/
imagePieces.push(canvas.toDataURL());
}
}
// imagePieces now contains data urls of all the pieces of the image
// load one piece onto the page
var anImageElement = document.getElementById('testing');
var anImageElement2 = document.getElementById('testing2');
var anImageElement3 = document.getElementById('testing3');
var anImageElement4 = document.getElementById('testing4');
anImageElement.src = imagePieces[0];
anImageElement2.src = imagePieces[1];
anImageElement3.src = imagePieces[2];
anImageElement4.src = imagePieces[3];
}
img{ border: 1px solid; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<img id="testing" src="">
<img id="testing2" src="">
<img id="testing3" src="">
<img id="testing4" src="">
</section>
But note that toDataURL should almost never be used. Instead one should always prefer faster non-blocking and memory friendly toBlob().
Also, no need to create 4 canvases here, you can reuse the same at every round.
And finally, you might want to preserve your image's aspect ratio:
var image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png';
image.onload = cutImageUp;
function cutImageUp() {
var natW = image.width / 2;
var natH = image.height / 2;
var widthOfOnePiece = jQuery(window).width() / 2 - 20;
// preserve aspect ratio
var heightOfOnePiece = widthOfOnePiece * (natH / natW);
var canvas = document.createElement('canvas');
canvas.width = widthOfOnePiece;
canvas.height = heightOfOnePiece;
var context = canvas.getContext('2d');
var promises = [];
for (var y = 0; y < 2; ++y) {
for (var x = 0; x < 2; ++x) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image,
x * natW, y * natH,
natW, natH,
0, 0,
canvas.width, canvas.height
);
promises.push(new Promise(function(resolve, reject) {
canvas.toBlob(function(blob) {
if (!blob) reject();
resolve(blob);
});
}));
}
}
return Promise.all(promises).then(function(blobs) {
// imagePieces now contains data urls of all the pieces of the image
// load one piece onto the page
var anImageElement = document.getElementById('testing');
var anImageElement2 = document.getElementById('testing2');
var anImageElement3 = document.getElementById('testing3');
var anImageElement4 = document.getElementById('testing4');
anImageElement.src = URL.createObjectURL(blobs[0]);
anImageElement2.src = URL.createObjectURL(blobs[1]);
anImageElement3.src = URL.createObjectURL(blobs[2]);
anImageElement4.src = URL.createObjectURL(blobs[3]);
})
}
img {
border: 1px solid;
display: inline-block;
}
body{margin: 0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<img id="testing" src="">
<img id="testing2" src="">
<img id="testing3" src="">
<img id="testing4" src="">
</section>

Drawing image on canvas in loop not working

var canvas = document.getElementById("canvas");
wheel = canvas.getContext("2d");
for (var i = 0; i < 10; i++) {
var img = new Image;
img.src = image;
wheel.drawImage(img, -170, -10, 140, 140);
}
My above code draw only 9(Nine) images but lastOne(10th) image not drawing on canvas. I tried above code but not getting success. Anyone can know solution for this problem.
Can any one help me to find out online JSFiddle Demo which draw image on canvas in loop.

Perhaps your image isn't finished loading before your first draw attempt.
Here is the syntax to make sure your image has finished loading:
var canvas = document.body.appendChild(document.createElement("canvas"));
canvas.width = 1100;
canvas.height = 110;
var wheel = canvas.getContext("2d");
var img = document.createElement("img");
img.onload = function() {
for (var i = 0; i < 10; i++) {
wheel.drawImage(img, 5 + 110 * i, 5);
}
};
img.src = "https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100";
EDIT 1 - PROMISES
Working with multiple images:
List sources
map to generates DOM nodes
Setup a Promise per DOM node in a Promise.all
Then draw images
var canvas = document.body.appendChild(document.createElement("canvas"));
canvas.width = 1100;
canvas.height = 110;
var wheel = canvas.getContext("2d");
var images = [
"https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=2&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=3&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=4&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=5&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=6&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=7&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=8&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=9&w=100&h=100",
"https://placeholdit.imgix.net/~text?txtsize=60&txt=10&w=100&h=100",
]
.map(function(i) {
var img = document.createElement("img");
img.src = i;
return img;
});
Promise.all(images.map(function(image) {
return new Promise(function(resolve, reject) {
image.onload = resolve;
});
}))
.then(function() {
for (var i = 0; i < images.length; i++) {
var img = images[i];
wheel.drawImage(img, 5 + 110 * i, 5);
}
});

I would do the similar approach to Emil, only difference having a method that loads them individually and once the image is loaded, try to load the next one and so on ...
take a look:
var canvas = document.getElementById("canvas");
// setting canvas size
canvas.height = window.innerHeight - 10;
canvas.width = window.innerWidth - 10;
var image_test = document.querySelector(".hidden");
var count = 0;
var total_images = 10;
var wheel = canvas.getContext("2d");
function loadImage() {
var img = new Image();
img.onload = function() {
wheel.drawImage( this , 105 * count , 0 , 100, 100);
if( count < total_images ) {
count++;
loadImage();
}
}
// img.src = "image-" + count + ".jpg";
img.src = "https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100";
}
loadImage();
https://jsfiddle.net/gugalondon/r5xw6u7L/7

is there a workaround to get context.getImageData() from a canvas base64 image in casperjs?

I tried with phantomjs 2.1.1 this code :
var webPage = require('webpage');
var page = webPage.create();
page.open("http://google.com", function (status){
var out = page.evaluate(function(){
var image = new Image();
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AwLDiAQSszC7gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAACAElEQVRYw+2WMYvbQBBGv5ndFegsdC6cTkWKFIEcpDkCqfLz3aQx5KqQ5lAXHRhHurW12pkUJsThDhLJyAlhXyWJWfHYmdkdIJFIJBKJRCIxJ3T+L8qT591f1yqBElgCqzxfGAOgi7HxfgvszvabqFUBlXNv8rxiXhmTEwHwqk2Mtcid93UI9RladprT26K4tfa1c5W1C2YHAAhAJ1IPQ8X8cRjQtvXFtI5OH7LsJssqYwoiR8QAAAGWRNfM18Ys+h5FMdnMjq2nyrlba2+y7KW1BWDpZxkYwBBZwFoLoBN5cG4XwoQ6M6OiXwDvi+Jdlr1yriQ6OtEJAJjIAhmRAi1RfThM0OJR0UugYq6sLU6cfukgIgCWqCCqrK2Yl5OSyKMyuMrzlTELZvec06mZI1owr4xZ5Xk5924tjMmJ3B8sY8ABOdHxSJtX62KM0+pi9KoBkN9FChAAr9rFOK/WDmi8b2LsRIIqAFV9Gnb8GFQ7kSbGxvvZO3EL1CL1MLSqw3Nmx9dBtVWth6EW2U5K4vh6FFkaUxpzxWwBftKMg2oL3Me46fv142Mtcphb6wBARKy9AjKijIiPx+mPeupVd6r3MX7q+3UIn/f7r5fZrR3g+35vjIooQEQB6FW96jfVB5EvIWz6fh3C5oyr+h8dbP6vMXDuoTmRSCQSiURiPN8BXZXzZJhVHqQAAAAASUVORK5CYII=";
var x = 0, y = 0;
image.width = 50;
image.height = 50;
var canvas = document.createElement('canvas');
canvas.id = "mycanvas";
canvas.width = 50;
canvas.height = 50;
var context = canvas.getContext("2d");
document.body.appendChild(canvas);
context.drawImage(
image,
x,
y,
canvas.width,
canvas.height,
0,
0,
image.width,
image.height
);
var imageData = context.getImageData(x, y, canvas.width, canvas.height);
var data = imageData.data;
var pix = 0;
var text = "";
// iterate over all rgba values of each pixels
for (var i = 0; i < data.length; i += 4) {
pix++;
red = data[i];
green = data[i+1];
blue = data[i+2];
alpha = data[i+3];
text += "pix " + pix + " red="+red+" green="+green+" blue="+blue+" alpha="+alpha+"\n";
}
return text;
});
console.log("out"+out);
phantom.exit();
});
The script should print the rgba values of this image, but all are rgba(0,0,0,0).
If you copy paste the evaluate part in chrome dev tools Version 55.0.2883.75 64-bit or firefox 50.0.2 (by example), you will see and values != rgba(0,0,0,0) from within the console.
So in casperjs, I can't get rgba values too. Anyone knows another way to get this rgba values and modify those from a base64 image ? If possible in vanilla javascript
Bug report : https://github.com/ariya/phantomjs/issues/14692

Found a workaround : need to create the image element before in another evaluate() :
var casper = require("casper").create();
casper.start();
casper.on('remote.message', function(message) {
console.log(message);
});
// first evaluate() to create the image
casper.thenEvaluate(function() {
// create original image to be copied
// in the canvas (mandatory to do this first step)
var originalImg = document.createElement('img');
originalImg.id = 'myoriginalimg';
originalImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AwLDiAQSszC7gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAACAElEQVRYw+2WMYvbQBBGv5ndFegsdC6cTkWKFIEcpDkCqfLz3aQx5KqQ5lAXHRhHurW12pkUJsThDhLJyAlhXyWJWfHYmdkdIJFIJBKJRCIxJ3T+L8qT591f1yqBElgCqzxfGAOgi7HxfgvszvabqFUBlXNv8rxiXhmTEwHwqk2Mtcid93UI9RladprT26K4tfa1c5W1C2YHAAhAJ1IPQ8X8cRjQtvXFtI5OH7LsJssqYwoiR8QAAAGWRNfM18Ys+h5FMdnMjq2nyrlba2+y7KW1BWDpZxkYwBBZwFoLoBN5cG4XwoQ6M6OiXwDvi+Jdlr1yriQ6OtEJAJjIAhmRAi1RfThM0OJR0UugYq6sLU6cfukgIgCWqCCqrK2Yl5OSyKMyuMrzlTELZvec06mZI1owr4xZ5Xk5924tjMmJ3B8sY8ABOdHxSJtX62KM0+pi9KoBkN9FChAAr9rFOK/WDmi8b2LsRIIqAFV9Gnb8GFQ7kSbGxvvZO3EL1CL1MLSqw3Nmx9dBtVWth6EW2U5K4vh6FFkaUxpzxWwBftKMg2oL3Me46fv142Mtcphb6wBARKy9AjKijIiPx+mPeupVd6r3MX7q+3UIn/f7r5fZrR3g+35vjIooQEQB6FW96jfVB5EvIWz6fh3C5oyr+h8dbP6vMXDuoTmRSCQSiURiPN8BXZXzZJhVHqQAAAAASUVORK5CYII=";
document.body.appendChild(originalImg);
})
casper.then(function(){
casper.wait(1000);
})
// second evaluate() to create the canvas from the image
casper.thenEvaluate(function() {
// copy the original image in a canvas
var imgInInput = document.querySelector('#myoriginalimg');
var imageObj = new Image();
imageObj.src = imgInInput.getAttribute('src');
var canvas = document.createElement('canvas');
canvas.width = 50;
canvas.height = 50;
var context = canvas.getContext('2d');
context.drawImage(
imageObj,
0,
0,
canvas.width,
canvas.height,
0,
0,
canvas.width,
canvas.height
);
var imageData = context.getImageData(0, 0, 50, 50);
var data = imageData.data; // data of the current image
var pix = 0;
for(var i = 0; i < data.length; i += 4) {
pix++;
var red = data[i];
var green = data[i+1];
var blue = data[i+2];
var alpha = data[i+3];
data[i+3] = 255; // set transparency to null
data[i+1] = 255; // set green at maximum just for the test
console.log(
pix + "nth pixel" +
" red=" + red +
" green=" + green +
" blue=" + blue +
" alpha=" + alpha
);
}
// overwrite original image
context.putImageData(imageData, 0, 0);
// Create a <div> to put the canva in
var childDiv = document.createElement("div");
childDiv.appendChild(canvas);
// Create the parent <div>
var parentDiv = document.createElement("div");
parentDiv.setAttribute('id', 'outputimage');
parentDiv.setAttribute('style', 'position: absolute;z-index:9999');
document.body.insertBefore(parentDiv, document.body.firstChild);
childDiv.setAttribute('id', 'mydivid');
parentDiv.appendChild(childDiv);
});
casper.then(function() {
casper.capture("out.png");
casper.echo(casper.getHTML());
})
casper.run(function() {
this.exit();
});

putImageData will not draw to the canvas

After splitting up the tileset http://mystikrpg.com/images/all_tiles.png
It still will not draw onto the <canvas> I know it gets put into the tileData[] because it outputs ImageData in the console.log(tileData[1]).
$(document).ready(function () {
var tileWidth, tileHeight
ImageWidth = 736;
ImageHeight = 672;
tileWidth = 32;
tileHeight = 32;
console.log("Client setup...");
canvas = document.getElementById("canvas");
canvas.width = 512;
canvas.height = 352;
context = canvas.getContext("2d");
canvas.tabIndex = 0;
canvas.focus();
console.log("Client focused.");
var imageObj = new Image();
imageObj.src = "./images/all_tiles.png";
imageObj.onload = function() {
context.drawImage(imageObj, ImageWidth, ImageHeight);
var allLoaded = 0;
var tilesX = ImageWidth / tileWidth;
var tilesY = ImageHeight / tileHeight;
var totalTiles = tilesX * tilesY;
for(var i=0; i<tilesY; i++)
{
for(var j=0; j<tilesX; j++)
{
// Store the image data of each tile in the array.
tileData.push(context.getImageData(j*tileWidth, i*tileHeight, tileWidth, tileHeight));
allLoaded++;
}
}
if (allLoaded == totalTiles) {
console.log("All done: " + allLoaded); // 483
console.log(tileData[1]); // > ImageData
startGame();
}
};
});
also
var startGame = function () {
console.log("Trying to paint test tile onto convas...");
try {
context.putImageData(tileData[0], 0, 0);
} catch(e) {
console.log(e);
}
}

When you draw the image to the canvas initially, why are you:
context.drawImage(imageObj, ImageWidth, ImageHeight);
Looks like you may have the parameters confused and are trying to fill the area with ImageWidth, ImageHeight... instead, draw it to 0,0
context.drawImage(imageObj, 0, 0);
Here's your code adjusted a little bit:
var tileData = [];
var tileWidth, tileHeight
var ImageWidth = 736;
var ImageHeight = 672;
var tileWidth = 32;
var tileHeight = 32;
var tilesX;
var tilesY
var totalTiles;
canvas = document.getElementById("canvas");
canvas.width = ImageWidth;
canvas.height = ImageHeight;
context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "all_tiles.png";
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
// draw the image to canvas so you can get the pixels context.drawImage(imageObj, 0, 0);
tilesX = ImageWidth / tileWidth;
tilesY = ImageHeight / tileHeight;
totalTiles = tilesX * tilesY;
for(var i=0; i<tilesY; i++) {
for(var j=0; j<tilesX; j++) {
// Store the image data of each tile in the array.
tileData.push(context.getImageData(j*tileWidth, i*tileHeight, tileWidth, tileHeight));
}
}
// test it...
// blank the canvas and draw tiles back in random positions
context.fillStyle = "rgba(255,255,255,1)";
context.fillRect(0,0,canvas.width, canvas.height);
for ( i = 0; i < 20; i++ ) {
context.putImageData(tileData[ i ], Math.random() * canvas.width, Math.random() * canvas.height );
}
};
There's no need to test 'all loaded' since it's just one image that you're splitting apart.