Here's the class and object:
class BDImage
{
constructor(path)
{
this.img = new Image();
this.img.src = path;
}
}
var myImage = new BDImage("path/to/image.png");
I want to access/use myImage's img member without typing myImage.img all the time. Instead just myImage and then I'm actually referring to myImage.img.
How?
extends ;)
class BDImage extends Image
{
constructor(path)
{
super()
this.src = path
}
}
var myImage = new BDImage("path/to/image.png");
console.log(myImage, myImage.src);
Object.defineProperty
class BDImage
{
constructor(path)
{
this.image = new Image()
this.image.src = path
Object.defineProperty(this, 'src', {
get(){
return this.image.src;
},
set(path){
this.image.src = path
}
})
}
}
myImage = new BDImage("path/to/image.png");
console.log(myImage, myImage.src);
myImage.image.src = "path/to/image2.png"
console.log(myImage, myImage.src);
myImage.src = "path/to/image3.png"
console.log(myImage, myImage.src);
Just cache the reference in a variable:
class BDImage
{
constructor(path)
{
this.img = new Image();
this.img.src = path;
}
}
var myImage = new BDImage("path/to/image.png");
var imgProp = myImage.img; // Now imgProp points to myImage.img
console.log(imgProp.src);
It looks like you need some Functional programming !
function BDImage(path) {
const img = new Image();
img.src = path;
return img;
};
const myImage = BDImage("path/img.png");
Hope it helps !
Related
Hello me need get variable from function
me return in answer undefined
function etr() {
var img = new Image();
img.onload = paramsImg;
img.src = picFile.result;
function paramsImg() {
return img.height;
};
};
var vvvr = etr();
alert(vvvr);
function etr() {
var img = new Image();
img.onload = paramsImg;
img.src = picFile.result;
function paramsImg() {
return img.height;
};
};
In your function, you mentioned paramsImg before its even loaded, so its not visible to img.onload.
paramsImg is declared simply as function, its not have scope outside the object. You need to use this keyword or mention fn with prototype.
function etr(picFile){
this.paramsImg = function(){
return img.height;
};
var img = new Image();
img.onload = this.paramsImg;
img.src = picFile.result;
}
picfile = {
result: 10
}
var vvvr = new etr(picfile);
alert(vvvr.paramsImg());
Your function etr doesn't return anything. I see that you are trying to return from an event handler for onload, but that only returns from the paramsImg function and not from etr (which has already returned before the image loads). You should wither make etr accept a callback function or return a Promise so that you can alert the images height after the image has loaded. Here is an example with a Promise:
function etr() {
return new Promise( ( resolve, reject ) => {
var img = new Image();
img.onload = _ => resolve(img.height);
img.onerror = reject;
img.src = picFile.result;
} );
};
var picFile = { result: 'https://dummyimage.com/600x1234/000/fff' };
(async function ( ) {
var vvvr = await etr();
alert(vvvr);
})( );
I have a class that I've created, called Sprite:
var Sprite = function Sprite()
{
that = this;
that.xPos = 0;
that.yPos = 0;
…
that.image = null;
this.render =function()
{
…
}
this.setImage(filename)
{
that.image = new Image();
that.image.src = filename;
}
}
And then I create an array of objects:
var names=[
{filename:"a1.png"},
{filename:"a2.png"},
{filename:"a3.png"},
{filename:"a4.png"}
];
var objs = [];
for(var l=0;l<names.length;l++)
{
objs.push({});
objs[l] = new Sprite();
…
setImage(names[l]);
}
Every object in my array point to the same image (with the same image file.)
Can anybody tell me what I'm doing wrong here?
Is there a better way I can do this?
Thanks.
your setImage(names[l]); in the loop seems to be overwriting hence you get same image, try doing something like:
var Sprite = function Sprite() {
that = this;
that.xPos = 0;
that.yPos = 0;
that.image = null;
this.setImage = function(filename) {
that.image = new Image();
that.image.src = filename;
};
}
var names=[
{'filename':"a1.png"},
{'filename':"a2.png"},
{'filename':"a3.png"},
{'filename':"a4.png"}
];
var objs = [];
for(var l=0;l<names.length;l++) {
var sp = new Sprite();
//set image for the new sprite object
sp.setImage(names[l].filename);
objs.push(sp); //push sp object to objs array
}
console.log( objs );
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 7 years ago.
function InfoImage(path,title){
this.path = path;
this.title = title;
this.color = undefined;
this.maxPixels = undefined;
this.init = function(){
var canvas = document.querySelector("canvas");
var img_Color = new Image_Processing_Color(canvas);
var img = new Image();
img.onload = function () {
img_Color.init(img);
this.color = img_Color.getDominantColor(); //this doesnt work
this.maxPixels = img_Color.getDominantColorPixels();
};
img.src = path;
};
this.init();
}
With this example, how can i save those variables as InfoImage variable? I know that using this there will affect Image and not InfoImage...
If I'm understanding you right, the usual answer is to use a variable to refer to this, which init then closes over:
function InfoImage(path,title){
this.path = path;
this.title = title;
this.color = undefined;
this.maxPixels = undefined;
this.init = function(){
var canvas = document.querySelector("canvas");
var img_Color = new Image_Processing_Color(canvas);
var img = new Image();
var infoimg = this; // <===
img.onload = function () {
img_Color.init(img);
infoimg.color = img_Color.getDominantColor(); // <===
infoimg.maxPixels = img_Color.getDominantColorPixels(); // <===
};
img.src = path;
};
}
You can also use Function#bind:
function InfoImage(path,title){
this.path = path;
this.title = title;
this.color = undefined;
this.maxPixels = undefined;
this.init = function(){
var canvas = document.querySelector("canvas");
var img_Color = new Image_Processing_Color(canvas);
var img = new Image();
img.onload = function () {
img_Color.init(img);
this.color = img_Color.getDominantColor();
this.maxPixels = img_Color.getDominantColorPixels();
}.bind(this); // <===
img.src = path;
};
}
With ES6, the next version of JavaScript, you'll be able to use an arrow function, because unlike normal functions, arrow functions inherit their this value from the context in which they're defined:
function InfoImage(path,title){
this.path = path;
this.title = title;
this.color = undefined;
this.maxPixels = undefined;
this.init = function(){
var canvas = document.querySelector("canvas");
var img_Color = new Image_Processing_Color(canvas);
var img = new Image();
img.onload = () => { // <===
img_Color.init(img);
this.color = img_Color.getDominantColor();
this.maxPixels = img_Color.getDominantColorPixels();
};
img.src = path;
};
}
You need the this and that pattern:
function InfoImage(path, title) {
var _this = this;
this.init = function(){
var img = new Image();
img.onload = function () {
_this.color = img_Color.getDominantColor();
};
};
};
function InfoImage(path,title){
var self = this;
this.path = path;
this.title = title;
this.color = undefined;
this.maxPixels = undefined;
this.init = function(){
var canvas = document.querySelector("canvas");
var img_Color = new Image_Processing_Color(canvas);
var img = new Image();
img.onload = function () {
img_Color.init(img);
self.color = img_Color.getDominantColor(); //this doesnt work
self.maxPixels = img_Color.getDominantColorPixels();
};
img.src = path;
};
this.init();
}
It's that easy. this is a keyword and depends on the function's binded calling context, but it can be stored to a variable just like anything else in JavaScript.
This is a jquery plugin that i've found, that creates an img element and appends it to a parent element.
$.fn.loadImg = function(src, f){ return this.each(function(){ var i = new Image(); i.src = src; i.onload = f; this.appendChild(i);}); }
How can i add paramaters attrName, attrVal to the function that would assign whatever attributes to the image before appending it?
This should work:
$.fn.loadImg = function(src, f, attrName, attrVal) {
return this.each(
function() {
var i = new Image();
i.src = src;
i.onload = f;
i[attrName] = attrVal;
// alternatively:
// i.setAttribute(attrName, attrVal);
this.appendChild(i);
}
);
}
The code below allows the user to hover over 1 object and it not only replaces the object but also shows an additional object between the buttons.
It works great in Firefox, but does not in Internet Explorer.
HELP
webpage:
http://www.isp.ucar.edu/
Thx,
Terri
if ( < document.images) {
img1on = new Image();
img1on.src = "images/buttons/button-beachon-on.gif";
img1off = new Image();
img1off.src = "images/buttons/button-beachon.gif";
img2on = new Image();
img2on.src = "images/buttons/button-bgs-on.gif";
img2off = new Image();
img2off.src = "images/buttons/button-bgs.gif";
img3on = new Image();
img3on.src = "images/buttons/button-iam-on.gif";
img3off = new Image();
img3off.src = "images/buttons/button-iam.gif";
img4on = new Image();
img4on.src = "images/buttons/button-nvia-on.gif";
img4off = new Image();
img4off.src = "images/buttons/button-nvia.gif";
img5on = new Image();
img5on.src = "images/buttons/button-utls-on.gif";
img5off = new Image();
img5off.src = "images/buttons/button-utls.gif";
img6on = new Image();
img6on.src = "images/buttons/button-water-on.gif";
img6off = new Image();
img6off.src = "images/buttons/button-water.gif";
img7on = new Image();
img7on.src = "images/buttons/button-exploratory-on.gif";
img7off = new Image();
img7off.src = "images/buttons/button-exploratory.gif";
// second image that does not appear in original button space
img1ad = new Image();
img1ad.src = "images/buttons/beachon-overview-sm.gif";
img2ad = new Image();
img2ad.src = "images/buttons/bgs-overview-sm.gif";
img3ad = new Image();
img3ad.src = "images/buttons/iam-overview-sm.gif";
img4ad = new Image();
img4ad.src = "images/buttons/nvia-overview-sm.gif";
img5ad = new Image();
img5ad.src = "images/buttons/utls-overview-sm.gif";
img6ad = new Image();
img6ad.src = "images/buttons/water-overview-sm.gif";
img7ad = new Image();
img7ad.src = "images/buttons/exploratory-overview-sm.gif";
}
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");
document["holder"].src = eval(imgName + "ad.src");
}
}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");
document["holder"].src = "images/buttons/isp-overview-sm.gif";
}
}
First of all, eval in these functions are totally uncalled for
function imgOn(imgName) {
if ( < document.images) {
document[imgName].src = eval(imgName + "on.src");
document["holder"].src = eval(imgName + "ad.src");
}
}
function imgOff(imgName) {
if ( < document.images) {
document[imgName].src = eval(imgName + "off.src");
document["holder"].src = "images/buttons/isp-overview-sm.gif";
}
}
They should read
function imgOn(imgName) {
document.getElementById(imgName).src = window[imgName + "on"].src;
document.getElementById("holder").src = window[imgName + "ad"].src;
}
function imgOff(imgName) {
document.getELementById(imgName).src = window[imgName + "off"].src;
document.getElementById("holder").src = "images/buttons/isp-overview-sm.gif";
}
And instead of multiple img1on = new Image(); followed by calls to window[foo] you should do this
var myImages = {};
myImages["img1on" = new Image();
Then you can later on do
var foo = myImages[imgName + "on"].src;
to get the src.