Develop Reference

checking image dimensions before ajax post event in javascript

I am attempting to access the dimensions from my uploaded image before I post it to the post upload endpoint. If you look, there is a variable issueArrived that is supposed to determine if the image is too small and if so negate the upload process. Unfortunately, the image doesn't access the dimensions check until after the upload to the server commences. Any help would be appreciated.
// internal function that creates an input element
var file = newElement("input", 0, "");
// sets the input element as type file
file.type = "file";
file.multiple = "multiple";
file.name = "photoupload[]";
file.accept = "image/*";
var issueArrived = false;
file.onchange = function(e) {
// internal function that creates an image element
var img = newElement("img", 0, "");
img.onload = function(){
var cw = img.width;
var ch = img.height;
if(cw < 500 || ch < 500) {
alert("Photo must be atleast 500x500");
issueArrived = true;
return false;
}
}
img.src = URL.createObjectURL(this);
if (issueArrived) return;
var formdata = new FormData();
formdata.append("photoupload[]", this);
var x = new XMLHttpRequest();
x.open("POST", "/media/uploadphotos", true);
x.send(formdata);
}
file.click();

onchange method is async. You can't expect to set the value from issueArrived inside it an access it outside.
You can rewrite this way:
file.onchange=function(e){
// internal function that creates an image element
var img=newElement("img",0,"");
img.onload=function(){
var cw=img.width;
var ch=img.height;
if(cw<500||ch<500){
alert("Photo must be atleast 500x500");
} else {
var formdata=new FormData();
formdata.append("photoupload[]",this);
var x=new XMLHttpRequest();
x.open("POST","/media/uploadphotos",true);
x.send(formdata);
}
}
img.src=URL.createObjectURL(this);
}
file.click();
or, better, you can create a function that gets the file and returns a promise.
function checkSize(fileToCheck) {
return new Promise( function(resolve, reject) {
var img = newElement("img",0,"");
img.onload=function(){
var cw=img.width;
var ch=img.height;
cw<500||ch<500 ? reject() : resolve()
}
img.src=URL.createObjectURL(fileToCheck);
})
}
...
file.onchange=function(e){
checkSize(this)
.then( function() { /* success handler */ } )
.catch( function() { /* error handler */ } )
}

Check if series of images exists, stop when not found in Javascript

I'd like to show series of dynamically loaded images named in a structured way in my website. Images are located in a different domain which causes Same Origin Policy restriction. I cannot use $.ajax.
I build my url like with a counter such as www.example.com/Images/img-1.jpg, www.example.com/Images/img-2.jpg and it goes...
I've tried several other answers from similar posts but couldn't make them work. Either the loop runs forever or it never finds the images even though they exist in the path.
1st try:
ShowImages: function () {
var urlBase = 'http://www.example.com/Images/img-';
var i = 1;
while (true) {
var url = urlBase + i + '.jpg';
var imgDom = new Image();
imgDom.onload = function () {
alert('worked');
i++;
};
imgDom.onerror = function () {
return; // I want to either break the while loop, or return from ShowImages function
};
imgDom.src = url;
}
},
It never hits the .onerror.
2nd try:
ShowImages: function () {
var urlBase = 'http://www.example.com/Images/img-';
var i = 1;
while (true) {
var url = urlBase + i + '.jpg';
var imgDom = document.createElement("img");
$(imgDom).attr('src', url);
if (imgDom.complete) {
alert('worked');
i++;
} else {
break;
}
}
},
It never hits the .complete.

Trying with your first option (you basically need to chain them)
ShowImages(1);
ShowImages: function (counter) {
var urlBase = 'http://www.example.com/Images/img-';
var url = urlBase + counter + '.jpg';
var imgDom = new Image();
imgDom.onload = function () {
alert('worked');
ShowImages(counter+1);
};
imgDom.onerror = function () {
alert("all images done..");
return; // I want to either break the while loop, or return from ShowImages function
};
imgDom.src = url;
};

Trying to access variables outside the function in Javascript

I am using the following snip of Javascript from another SO answer:
var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
alert(this.width + " " + this.height);
};
img.src = _URL.createObjectURL(file);
}
});
I cannot figure out how to get access to those this.width and this.height variables outside of the function. I have set them equal to existing variables and the variables are always 0 or null.

Its not really useful to just make them available outside a function since you will never really know the onload happened. You want a callback that will use those values at the appropriate time.
var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
someCallback(this.width, this.height);
};
img.src = _URL.createObjectURL(file);
}
});
function someCallback (width, height) {
// use those values
}
Yes you can use a global variable but again I point out you won't know when those values have been populated and could end up with problems in your code.

You can also do something like this
var _URL = window.URL || window.webkitURL;
var width="";
var height="";
$("#file").change(function (e) {
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
width=this.width;
height=this.height;
};
img.src = _URL.createObjectURL(file);
}
});
Now you can use height and width variable out side of your change event. now this both variables are global variable

Values returned from image.onload(function() are 0 or undefined?

I try to get height/width from some background images, but how to get these values into some variables?
var bgobj = jQuery(this); // assigning the object
var url = bgobj.css('background-image').replace(/url\(|\)$|"/ig, '');
var img = new Image();
img.src = url;
Option 1:
alert('img.width: ' + img.width); // alert: " img.width: 0 "
Probably, the image hasn't loaded. So I try onload:
Option 2:
jQuery(bgimg).on('load', function() {
height = jQuery(bgimg).height();
//alert('height ' + height); //'480px' which is correct!
});
No way to get the value out for further use!? So I try callback:
Option 3:
var imageSize = function(url, callback) {
var img = new Image();
img.onload = function(){
var response = {};
var img = new Image();
img.onload = function() {
var x = img.width;
var y = img.height;
var z = y/x;
response = {width:x,height:y};
if(callback) callback(response);
}
img.src = url;
}
img.onload();
}
var getSize = function(url, callback) {
imageSize(url, function(response) {
var dim = response;
})
callback(dim);
}
var h;
imageSize(img.src, function(response) {
h=response.height;
//alert(h); // 800px (OK))
})
//alert(h); //undefined
//alert(imageSize.height); //undefined
//alert(imageSize.h); //undefined
//alert(imageSize.response.h); //undefined
Still no way to get the value into an ordinary variable.
Where did I go wrong?

You've overcomplicated it, but option 3 is one way to do it.
var imageSize = function(url, callback) {
var img = new Image();
img.onload = function(){
if(callback) callback(img.width,img.height);
}
img.src = url;
}
$(function(){
var url = $('#foo').css('background-image').replace(/url\(|\)$|"/ig, '');
imageSize(url,function(w,h){
alert("width=" + w + ", height=" + h);
})
});
#foo{
background-image:url(http://lorempixel.com/100/100/)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">test</div>
The thing to remember is that the method imageSize is asynchronous, so you must pass it a callback which will be called when the image has loaded. You cant have another method where you treat it as a synchronous call, that just wont work.

Web workers and Canvas data

I have seen a lot of threads about web workers and <canvas> data passing, and I'm not sure if my scenario is implementable.
I want to create a small site for users to learn to code in Javascript. When users click a button, the code is run in a web worker. To help them, I have also created methods for "printing" (which basically just adds text to a <pre> element.
// get code from user and prepend helper "functions"
var userCode = editor.getValue();
var codeWithMessages = "\n\
function print(data) { postMessage(\"\"+data); } \n\
function println(data) { postMessage(\"\"+data+\'\\n\'); } \n\
function alert(data) { postMessage('ALERT'+data); } \n\
\n" + userCode;
var codeWithMessagesAndExit = codeWithMessages + "\npostMessage('exit()');";
var blob = new Blob([codeWithMessagesAndExit], {type: 'application/javascript'});
// Obtain a blob URL reference to our worker 'file'.
var blobURL = window.URL.createObjectURL(blob);
outer.worker = new Worker(blobURL);
...
// handle messages by "printing" to the run-output element, or display
// a success message when finishing
outer.worker.addEventListener('message', function (event) {
if (event.data == "exit()") {
outer.worker.terminate();
outer.worker = null;
outer.codeRunStatus = outer.CODE_RUN_SUCCESS;
outer.errorMessage = null;
outer.outputFromLatestRun = $("#run-output").text();
$("#run-output").append("<span class='code-run-success'>\nKörning klar</span>");
enableButtons();
}
else if (event.data.indexOf("ALERT") == 0) {
alert(event.data.substring(5));
}
else {
$("#run-output").append(event.data);
}
}, false);
// start the worker
outer.worker.postMessage();
Now I want to add a canvas to the page, so users could write code to draw on it.
var canvas = document.getElementById("user-canvas");
var ctx = canvas.getContext("2d");
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
// rest same as above
outer.worker.postMessage(imgData);
I don't know how to proceed from here. Ideally the users could write something like
myCanvas.fillStyle = "rgb(200,0,0)";
myCanvas.fillRect (10, 10, 55, 50);
and then have this processed by the event listener like I did with my print() functions. Is this possible?

DOM can't be accessed from a WebWorker.
The best way I can see is to re-define this object in the webworker, and define a protocol to transmit each call to a method. But it won't work when you need other objects like images.
Worker-side :
var CanvasRenderingContext2D = function() {
this.fillStyle = "black";
this.strokeStyle = "black";
...
this.lineWidth = 1.0;
};
["fillRect", "strokeRect", "beginPath", ... "rotate", "stroke"].forEach(function(methodName) {
CanvasRenderingContext2D.prototype[methodName] = function() {
postMessage({called: methodName, args: arguments, currentObjectAttributes: this});
};
});
...
var myCanvas = new CanvasRenderingContext2D();
myCanvas.fillStyle = "rgb(200,0,0)";
myCanvas.fillRect(10, 10, 55, 50);
Main-page side :
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var worker = new Worker( ... );
worker.onMessage = function(event) {
var data = event.data;
// Refreshing context attributes
var attributes = data.currentObjectAttributes;
for(var k in attributes) {
context[k] = attributes[k];
}
// Calling method
var method = context[data.called];
method.apply(context, data.args);
};
EDIT :
I tried to integrate it with your code (not tested). To integrate it, I had to change the structure of the messages sent by the worker.
// get code from user and prepend helper "functions"
var userCode = editor.getValue();
var codeWithMessages = '\n\
function print (data) { postMessage(["print", data.toString()]); } \n\
function println(data) { postMessage(["print", data.toString() + "\\n"]); } \n\
function alert (data) { postMessage(["alert", data.toString()]); } \n\
var CanvasRenderingContext2D = function() { \n\
this.fillStyle = "black"; \n\
this.strokeStyle = "black"; \n\
/* ... */ \n\
this.lineWidth = 1.0; \n\
}; \n\
["fillRect", "strokeRect", "beginPath", /* ... */ "rotate", "stroke"].forEach(function(methodName) { \n\
CanvasRenderingContext2D.prototype[methodName] = function() { \n\
postMessage(["canvas", {called: methodName, args: Array.prototype.slice.call(arguments), currentObjectAttributes: this}]); \n\
}; \n\
});\n' + userCode;
var codeWithMessagesAndExit = codeWithMessages + "\npostMessage(['exit']);";
var blob = new Blob([codeWithMessagesAndExit], {type: 'application/javascript'});
// Obtain a blob URL reference to our worker 'file'.
var blobURL = window.URL.createObjectURL(blob);
outer.worker = new Worker(blobURL);
...
// Define your canvas ...
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
// handle messages by "printing" to the run-output element, or display
// a success message when finishing
outer.worker.addEventListener('message', function (event) {
var method = event.data[0] || null;
var data = event.data[1] || null;
if(method == "canvas") {
// Refreshing context attributes
var attributes = data.currentObjectAttributes;
for(var k in attributes) {
context[k] = attributes[k];
}
// Calling method
var method = context[data.called];
method.apply(context, data.args);
} else if(method == "exit") {
outer.worker.terminate();
outer.worker = null;
outer.codeRunStatus = outer.CODE_RUN_SUCCESS;
outer.errorMessage = null;
outer.outputFromLatestRun = $("#run-output").text();
$("#run-output").append("<span class='code-run-success'>\nKörning klar</span>");
enableButtons();
} else if(method == "alert") {
alert(data);
} else if(method == "print") {
$("#run-output").append(data);
} else {
$("#run-output").append(event.data);
}
}, false);
// start the worker
outer.worker.postMessage();