对于图片宽高计算

q2045377

var t =this.getElementByXid('image3');   
alert(parseInt(t.width)

发现如果是本地图片的话会得出真实高度，，  但是是存储的图片，， 从数据库引用过来的  ，，得到的是0    ，，如果让t.style.width =  t.parentNode.style.width    会看见图片宽是100%   
alert(parseInt(t.height) 还是0  所以得到结论是  数据库引用的图片没有真实长高   求原因  求方法    望您本地重现下   求方法


求解决方法

liangyongfei

如果是attachmentSimple组件 上传的图片！可以获取到高度
http://docs.wex5.com/wex5-ui-question-list-2154/

参考它的代码！你需要new Image()
先获取image图片的对对象！然后才能得到图片的高度属性！
可以上网查下！

q2045377

liangyongfei 发表于 2017-6-20 15:32
如果是attachmentSimple组件 上传的图片！可以获取到高度
http://docs.wex5.com/wex5-ui-question-list-215 ...

好的  谢谢

q2045377

liangyongfei 发表于 2017-6-20 15:32
如果是attachmentSimple组件 上传的图片！可以获取到高度
http://docs.wex5.com/wex5-ui-question-list-215 ...

var t =this.getElementByXid('image3');
var img = new Image();
                   img.onload = function(){
                   img.attr({"src":t.attr("src")});
                   }       

src 怎么么赋值上哈

liangyongfei

q2045377 发表于 2017-6-20 16:15
var t =this.getElementByXid('image3');
var img = new Image();
                   img.onload = function(){

;     获取的img 标签图片可以正常显示吗？
如果图片已经放在dom节点上了！并且可以正常显示
直接通过jquery 就能获取到的！
$(this.getElementByXid('image3')).height();

如果只是知道图片的URL  ，图片还没显示就像获取高度，就需要js动态new 了！
http://blog.csdn.net/liuhuoxingkong/article/details/43971427

q2045377

liangyongfei 发表于 2017-6-20 16:23
;     获取的img 标签图片可以正常显示吗？
如果图片已经放在dom节点上了！并且可以正常显示
直接通过jqu ...

这个  赋值错误     关于  img.src   怎么把image3  的bind-attr-src得到的路径复制到 newimg上
alert(t.attr("src"))   undefied
var t =this.getElementByXid('image3');
           var img = new Image();
                   img.onload = function(){
                    img.src = t.attr("src");
                //   img.attr({"src":t.attr("src")});
                   }       
                              alert(img.src)       弹出空白  没值
    }

liangyongfei

q2045377 发表于 2017-6-20 16:29
这个  赋值错误     关于  img.src   怎么把image3  的bind-attr-src得到的路径复制到 newimg上
alert(t ...

bind-attr-src 绑定的是ＫＯ对象或者ｄａｔａ组件对象吗？
直接去获取KO 对象的值！或者 data组件字段的值！
直接能获取到这个URL就可以了啊！
然后参考：http://blog.csdn.net/liuhuoxingkong/article/details/43971427
根据URL就能知道图片高度！

不必非得通过dom节点去获取的！  是不是dom还没生成呢？

如果dom已经生成的话！直接通过dom节点就可以获取高度的！

q2045377

liangyongfei 发表于 2017-6-20 16:55
bind-attr-src 绑定的是ＫＯ对象或者ｄａｔａ组件对象吗？
直接去获取KO 对象的值！或者 data组件字段的 ...

dom节点生成是什么时候呢    我在model onload事件中写     var t =this.getElementByXid('image3');
        alert(t.width)   获取不到

在按钮点击事件中应该就是 节点已经生成了   var t =this.getElementByXid('image3');
        alert(t.width)    能获取到     

那我应该在哪个事件中写去改变图片宽高呢    是只能用new image（）方法吗

bind-atttr-src 是data的值

liangyongfei

q2045377 发表于 2017-6-20 17:04
dom节点生成是什么时候呢    我在model onload事件中写     var t =this.getElementByXid('image3');
     ...

既然点击事件中 能获取到！
那就是
model onload事件执行的时候，图片还没初始化呢！

你可以使用这种方法
http://docs.wex5.com/wex5-ui-question-list-2104
等待初始化执行完后再调用js代码！！


或者onLoad中延迟 后 执行

q2045377

liangyongfei 发表于 2017-6-20 17:17
既然点击事件中 能获取到！
那就是
model onload事件执行的时候，图片还没初始化呢！

网上找到方法   求问   如果是多张图片   在 怎么用for循环处理方法怎么处理哈   麻烦了
        Model.prototype.modelLoad = function(event){
        var data= this.comp('data1')
        var image =data.val('image1')
                var src = null;
                var t =this.getElementByXid('image3');
         function imgLoad(img, callback) {
         var timer = setInterval(function() {
         if (img.complete) {
         callback(img)
       clearInterval(timer)
          }
         }, 50)
          }
        imgLoad(t, function() {
         var width = $(t).width();////得到图片的宽度
         var height = $(t).height();//得到图片的高度
         var Maxwidth = $(window).width();//获得最大宽度
        var Maxheight = $(window).height();///获得最大高度
        var margnheight;
        var newheight;
        if (width >= Maxwidth){
         $(t).css("width", Maxwidth);
         newheight = height / (width / Maxwidth);
         $(t).css("height", newheight);
        if(newheight<=Maxheight){
        margnheight = (Maxheight - newheight) / 2;
        $(t).css("margin-top", margnheight);
        }
        }else{
       if(height<=Maxheight){
       margnheight = (Maxheight - height) / 2;
       $(t).css("margin-top", margnheight);   
       }}
  })
}