Use Onload on image tag in ember

问题

I have a template in which photos are being displayed in a frame ( each frame is different for different images) .I have written a function which uses the images original height and width and gives me customized width and height for that particular frame inorder to restore the aspect ratio.Now I have called that function through onload as images loads on that particular moment.

My feed.hbs( template)

<img src = "{{photo.0.photo_url}}" onload = "OnImageLoad(event);" {{action "imgOverlay0" photo}}/>

Function

function OnImageLoad(evt) {

    var img = evt.currentTarget;

    // what's the size of this image and it's parent
    var w = $(img).width();
    var h = $(img).height();
    var tw = $(img).parent().width();
    var th = $(img).parent().height();

    // compute the new size and offsets
    var result = scaling(w, h, tw, th,false);

    // adjust the image coordinates and size
    img.width = result.width;
    img.height = result.height;
    $(img).css("margin-left", result.targetleft);
    $(img).css("margin-top", result.targettop);
    // console.log("result",result)
    return result;
}

function scaling (w, h, tw, th,false){
   //manipulation with data 
}

But it will not be included in the build of ember as I have kept the function file in bower_compontent.How do I include it in my ember app ?

回答1:

It will be better to put this javascript file in vendor directory because normally bower_components is included in .gitignore.

Say you put this code in vendor/file-onload.js.

Then do a import in ember-cli-build.js

app.import('vendor/file-onload.js');

It will be even easier if you put these functions in corresponding feed controller.

回答2:

Instead of creating a bower component, I'd create a few ember components: one that triggers an action when the image is loaded, and another that handles scaling.

app/components/x-image/component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'img',

  didInsertElement() {
    this._super(...arguments);

    this.$()[0].onload = () => {
      this.sendAction('imageLoaded');
    };
  },
});

app/components/scaled-image/component.js

import Ember from 'ember';

export default Ember.Component.extend({
  setImageDimensions() {
    const img = this.$('img');

    // what's the size of this image and it's parent
    const w = img.width();
    const h = img.height();
    const tw = img.parent().width();
    const th = img.parent().height();

    // compute the new size and offsets
    const result = this.scaling(w, h, tw, th, false);

    // adjust the image coordinates and size
    img.width = result.width;
    img.height = result.height;
    img.css("margin-left", result.targetleft);
    img.css("margin-top", result.targettop);
    // console.log("result",result)
  },

  scaling(w, h, tw, th,false) {
    //manipulation with data 
  },

  actions: {
    imageLoaded() {
      this.setImageDimensions();
    }
  }
});

app/components/scaled-image/template.hbs

{{x-image
  src=src
  imageLoaded=(action 'imageLoaded')
}}

In-use in a template

{{scaled-image
  src=photo.0.photo_url
  action=(action "imgOverlay0" photo)
}}

来源：https://stackoverflow.com/questions/35058754/use-onload-on-image-tag-in-ember

标签

javascript

ember.js

ecmascript-6