What I am trying to do is load images dynamically and then draw them on the screen. However, when I call console.log(images), it is empty.
Here is the code:
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
var images = new Array();
for (i = 0; i < mattes_array.length; i++)
{
var imgsrc = mattes_array[i]["imgsrc"];
var total_size = mattes_array[i]["total_size"];
var cpu = mattes_array[i]["cpu"];
var cid = mattes_array[i]["cid"];
var imageObj = new Image();
imageObj.onload = function() {
images[i] = imageObj;
console.log(images[i]);
};
imageObj.id = "matte_" + cid;
imageObj.src = imgsrc;
}
console.log(images); //this is empty
for (i = 0; i < mattes_array.length; i++)
{
var imgsrc = mattes_array[i]["imgsrc"];
var total_size = mattes_array[i]["total_size"];
var cpu = mattes_array[i]["cpu"];
var cid = mattes_array[i]["cid"];
var pattern = ctx.createPattern(images[i], 'repeat');
ctx.strokeStyle = pattern;
ctx.lineWidth = width - opening_width - (total_size * 2);
ctx.strokeRect(0, 0, width, height);
}
}
I have also tried doing it in one loop, but it seems to only draw the last image:
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
var images = new Array();
for (i = 0; i < mattes_array.length; i++)
{
var imgsrc = mattes_array[i]["imgsrc"];
var total_size = mattes_array[i]["total_size"];
var cpu = mattes_array[i]["cpu"];
var cid = mattes_array[i]["cid"];
var imageObj = new Image();
imageObj.onload = function() {
var pattern = ctx.createPattern(imageObj, 'repeat');
ctx.strokeStyle = pattern;
ctx.lineWidth = width - opening_width - (total_size * 2);
ctx.strokeRect(0, 0, width, height);
};
imageObj.id = "matte_" + cid;
imageObj.src = imgsrc;
}
}
Here is an image of what I am trying to do:
Images load asynchronously. You're trying to draw them before they are loaded. Give this a try:
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
var images = new Array();
var loaded = 0;
for (i = 0; i < mattes_array.length; i++)
{
var imgsrc = mattes_array[i]["imgsrc"];
var total_size = mattes_array[i]["total_size"];
var cpu = mattes_array[i]["cpu"];
var cid = mattes_array[i]["cid"];
var imageObj = new Image();
imageObj.onload = function() {
images[i] = imageObj;
console.log(images[i]);
if ( ++loaded === mattes_array.length ) onloaded();
};
imageObj.id = "matte_" + cid;
imageObj.src = imgsrc;
}
function onloaded() {
console.log(images); //this is won't be empty anymore
for (i = 0; i < mattes_array.length; i++)
{
var imgsrc = mattes_array[i]["imgsrc"];
var total_size = mattes_array[i]["total_size"];
var cpu = mattes_array[i]["cpu"];
var cid = mattes_array[i]["cid"];
var pattern = ctx.createPattern(images[i], 'repeat');
ctx.strokeStyle = pattern;
ctx.lineWidth = width - opening_width - (total_size * 2);
ctx.strokeRect(0, 0, width, height);
}
}
}
Related
I am trying to write to an A4 PDF
form = document.querySelector("#theform");
html2canvas(form).then(function(canvas) {
doc = new jsPDF({
unit: 'pt',
format: 'a4',
});
for (var i = 0; i <= form.clientHeight/842; i++) {
//! This is all just html2canvas stuff
var srcImg = canvas;
var sX = 0;
var sY = 842*i;
var sWidth = 595;
var sHeight = 842;
var dX = 0;
var dY = 0;
var dWidth = 595;
var dHeight = 842;
window.onePageCanvas = document.createElement("canvas");
onePageCanvas.setAttribute('width', 595);
onePageCanvas.setAttribute('height', 842);
var ctx = onePageCanvas.getContext('2d');
ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);
var canvasDataURL = onePageCanvas.toDataURL("image/png", wid = canvas.width, hgt = canvas.height);
var hratio = hgt/wid
const pdfWidth = doc.internal.pageSize.width;
const TheHeight = doc.internal.pageSize.width;
const pdfHeight = TheHeight
if (i > 0) {
doc.addPage(595, 842);
}
//! now we declare that we're working on that page
doc.setPage(i+1);
doc.addImage(canvasDataURL, 'PNG', 10, 10, pdfWidth, pdfHeight);
}
doc.autoPrint();
window.open(doc.output('bloburl'), '_blank');
}
But the it is only creating a PDF for part of the left hand side and I can't see anything wrong.. It is as though what it is writing to the PDF is twice the size it should be.
I am new to JavaScript, and trying to create a function that will draw lines on the canvas. This is currently what I have and it's not working. I may be doing unnecessary things and I need some suggestions for this code.
function start(){
var COUNT = 5;
for(var i = 0; i < COUNT; i++){
var row = 0;
var rect = new Rectangle(100, 100);
rect.setPosition(0, row);
rect.setColor(Color.blue);
var rect1 = new Rectangle(100, 100);
rect1.setPosition(100, row);
rect1.setColor(Color.red);
var rect2 = new Rectangle(100, 100);
rect2.setPosition(200, row);
rect2.setColor(Color.blue);
var rect3 = new Rectangle(100, 100);
rect3.setPosition(300, row);
rect3.setColor(Color.red);
add(rect);
add(rect1);
add(rect2);
add(rect3);
row + 100;
}
}
Are you trying to do something like this :
var ctx = canvas.getContext('2d')
var colors = ['red','blue']
function start(){
var COUNT = 5;
for(var i = 0; i < COUNT; i++)
for(var j = 0 ; j<4;j++){
var rect = [10,10];
ctx.fillStyle = colors[(i+j)%2];
ctx.fillRect(j*10, i*10, rect[0],rect[1]);
}
}
start();
https://jsfiddle.net/dbo3htov/29/
I am trying to compare different blocks of an image(filled.png) with a specific block of another image(blank.png).
So far I have tried this :-
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = 20;
canvas.height = 20;
var img = new Image();
img.onload = function(){
context.drawImage(img,53,61,20,20,0,0,20,20);
};
img.src ='blank.png';
var imgResult = new Image();
var image1,image2;
var canvasResult = document.createElement('canvas');
canvasResult.width = 20;
canvasResult.height = 20;
var contextResult = canvasResult.getContext('2d');
function compare(){
image1=new Image();
image1.onload= function(){
imgResult.onload = function(){
var x = 53;
for (var i = 1; i <= 20; i++) {
contextResult.clearRect(0, 0, 20, 20);
contextResult.drawImage(imgResult,x,61,20,20,0,0,20,20);
x += 23;
image2 = new Image();
image2.onload = function(){
resemble(image1.src).compareTo(image2.src).onComplete(function(data){
$('p').append('Diffrence : ' + data.misMatchPercentage+ '%</br>');
});
};
image2.src = canvasResult.toDataURL();
}
};
imgResult.src = 'filled.png';
}
image1.src=canvas.toDataURL();
}
But it is not working, getting same result on each iteration of for loop. So please help me find, where I am going wrong.
.onComplete - sounds asynchronous, and image2.onload DEFINITELY IS - but in the meantime you're changing contextResult ... asynchronous code strikes again
If you create a function which recursively calls itself when each iteration completes, you should have better results:
e.g. with minimal code changes to what you have:
imgResult.onload = function(){
var x = 53, i = 1;
var compare = function() {
contextResult.clearRect(0, 0, 20, 20);
contextResult.drawImage(imgResult,x,61,20,20,0,0,20,20);
x += 23;
image2 = new Image();
image2.onload = function(){
resemble(image1.src).compareTo(image2.src).onComplete(function (data) {
$('p').append('Diffrence : ' + data.misMatchPercentage+ '%</br>');
i += 1;
if (i <= 20) {
compare();
}
});
};
image2.src = canvasResult.toDataURL();
};
compare();
}
guys i want to draw 4 images on canvas but each one at random x and y .. here is my code
var imgs = [];
var fruits = ["fruit1.png", "fruit2.png", "fruit3.png", "fruit4.png"];
var monsterReady1 = false;
for (var i = 0; i < fruits.length; i++) {
imgs[i] = new Image();
imgs[i].onload = function() {
monsterReady1 = true;
};
imgs[i].src = fruits[i];
}
var monsterXY1 = function() {
monster1.x = (Math.random() * (canvas.width - 100));
monster1.y = (Math.random() * (canvas.height - 100));
};
var draw = function() {
if (monsterReady1) {
for (var i = 0; i < fruits.length; i++) {
ctx.drawImage(imgs[i], monster1.x, monster1.y);
}
}
}
var main = function() {
draw();
requestAnimationFrame(main);
};
monsterXY1();
but this code gives me all the images at the same x and y so how i make each of them at random x and y ??
Use an image preloader to be sure all your images have loaded before you try to drawImage them:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var imageURLs=[];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png");
// the loaded images will be placed in imgs[]
var imgs=[];
var imagesOK=0;
loadAllImages(start);
function loadAllImages(callback){
for (var i=0; i<imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function(){
imagesOK++;
if (imagesOK>=imageURLs.length ) {
callback();
}
};
img.onerror=function(){alert("image load failed");}
img.crossOrigin="anonymous";
img.src = imageURLs[i];
}
}
function start(){
// the imgs[] array now holds fully loaded images
// the imgs[] are in the same order as imageURLs[]
for(var i=0;i<imgs.length;i++){
var randomX=Math.min(cw-imgs[i].width,Math.random()*cw);
var randomY=Math.min(ch-imgs[i].height,Math.random()*ch);
ctx.drawImage(imgs[i],randomX,randomY);
}
}
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>
Try:
var imgs = [];
var fruits = ["fruit1.png", "fruit2.png", "fruit3.png", "fruit4.png"];
var monsterReady1 = false;
for (var i = 0; i < fruits.length; i++) {
imgs[i] = new Image();
imgs[i].onload = function() {
monsterReady1 = true;
};
imgs[i].src = fruits[i];
}
var draw = function() {
if (monsterReady1) {
for (var i = 0; i < fruits.length; i++) {
monster1.x = (Math.random() * (canvas.width - 100));
monster1.y = (Math.random() * (canvas.height - 100));
ctx.drawImage(imgs[i], monster1.x, monster1.y);
}
}
}
var main = function() {
draw();
requestAnimationFrame(main);
}
main();
I moved the monster.x and monster.y inside the loop.
i am stuck in passing data from php to kineticjs throught json below is the code
$arrParams = array('images' =>$images, 'captions' => $content);
init({"container":"slider","data":<?php echo json_encode($arrParams); ?>});
i want to pass the above Json array in my below given coded kineticjs code
var data;
var canvasWidth;
var canvasHeight;
var stage;
var layer = new Kinetic.Layer();
var imageNodes = [];
var imageObjects = [];
var imageBox = [];
var captionBox = [];
var textNodes = [];
var totalObjects = 0;
var objectLoaded = 0;
var currentSlide = false;
var defaultPosition = [];
var rightCardPosition = [];
var leftCardPosition = [];
function init(config) {
canvasWidth = config.width | 600;
canvasHeight = config.height | 300;
defaultPosition["x"] = canvasWidth / 4;
defaultPosition["y"] = canvasHeight + 5;
leftCardPosition["start"] = [];
leftCardPosition["end"] = [];
leftCardPosition["start"]["x"] = (canvasWidth / 3) - 180;
leftCardPosition["start"]["y"] = canvasHeight - 260;
leftCardPosition["end"]["x"] = (canvasWidth + 100);
leftCardPosition["end"]["y"] = -250;
rightCardPosition["start"] = [];
rightCardPosition["end"] = [];
rightCardPosition["start"]["x"] = (canvasWidth / 3) + 160;
rightCardPosition["start"]["y"] = canvasHeight - 300;
rightCardPosition["end"]["x"] = (canvasWidth + 100);
rightCardPosition["end"]["y"] = -250;
stage = new Kinetic.Stage({
container: config.container,
width: canvasWidth,
height: canvasHeight
});
totalObjects = data.images.length;
for (var i = 0; i < data.images.length; i++) {
totalObjects += data.captions[i].length;
}
for (var i = 0; i < data.images.length; i++) {
loadImage(data.images[i]);
loadCaption(data.captions[i]);
}
}
I am getting error like in the line
totalObjects = data.images.length;
data is undefine... which means images is not pass from the json array
You're encoding the JSON with PHP, now you just need to parse it with JavaScript and store it in your data variable.
data = JSON.parse(config.data);
Put this at the start of your init function and it should work for you.