Raphael.js - 带有原始宽度和高度尺寸的图像？

Question

嗨RaphaelJS用户=),

我可能有一个愚蠢的问题,但我似乎无法找到答案,事实是,我正在尝试用Raphael加载/创建一个图像,这很好,就像这样:

var image_1 = paper.image('/img/img1.jpg', 0, 0, 100, 100);

但正如你所看到的,似乎你必须给出"宽度"和"高度"属性,我已经检查了文档,但它总是很短而且不是那么详细,我尝试给出空参数或空参数,但是它不起作用......

所以我想知道raphael实际上是否有直接的方式来做这个,或者...... 我必须总是在之前获得这些值吗？

我的意思是,这样的事情？:

var imgURL = "../img/img1.jpg"

var myImg = new Image();
myImg.src = imgURL;

var width = myImg.width;
var height = myImg.height;

   //create the image with the obtained width and height:
    var image_1 = paper.image('/img/img1.jpg', 0, 0, width, height);

因此,我加载图像的原始大小,这有点解决了我的问题,但....拉斐尔内部没有办法做到这一点???

Answer 1

现在......我想我必须用我自己的答案回答我自己的问题,因为似乎没有其他方式我找到或有人告诉我= P

var imgURL = "../img/img1.jpg"

var myImg = new Image();
myImg.src = imgURL;

var width = myImg.width;
var height = myImg.height;

   //create the image with the obtained width and height:
    var image_1 = paper.image('/img/img1.jpg', 0, 0, width, height);

Answer 2

基于@ drzaus的精彩答案,我遇到了一些问题,如果我加载到Raphael中的图像尚未在缓存中,则高度和宽度将设置为0.要解决此问题:

(function(Raphael){
/// Plugin - replaces original RaphaelJS .image constructor
/// with one that respects original dimensions.
/// Optional overrides for each dimension.
/// @drzaus @zaus
/// based on http://stackoverflow.com/questions/10802702/raphael-js-image-with-its-original-width-and-height-size
/// modified 13/08/2013 by @Huniku to support asynchronous loads

var originalRaphaelImageFn = Raphael.fn.image;

Raphael.fn.imageAsync = function(url, x, y, w, h) {
    var dfd = new jQuery.Deferred();
    var done = false;
    var paper = this;
    // fix the image dimensions to match original scale unless otherwise provided
    if( !w || !h ) {
        //Create the new image and set the onload event to call
        //the original paper.image function with the desired dimensions
        var img = new Image();
        img.onload = function() {
            if(done)
                return;
            if( !w ) w = img.width;
            if( !h ) h = img.height;
            dfd.resolve(originalRaphaelImageFn.call(paper, url, x, y, w, h));
        };
        //Begin loading of the image
        img.src = url;

        //If the images is already loaded (i.e. it was in the local cache)
        //img.onload will not fire, so call paper.image here.
        //Set done to ensure img.onload does not fire.
        if(img.width != 0) {
            if( !w ) w = img.width;
            if( !h ) h = img.height;
            done = true;
            dfd.resolve(originalRaphaelImageFn.call(paper, url, x, y, w, h));
        }
    }
    else
        dfd.resolve(originalRaphaelImageFn.call(paper, url, x, y, w, h));
    return dfd.promise();
};
})(Raphael);

这允许图像在查询宽度/高度之前加载,并且还支持图像已经在缓存中并且不触发onload事件的实例.要使用它,只需:

var dfd = paper.imageAsync("images/hello.png",0,0,false,false);
dfd.done(function( result ) {  //result is a Raphael element
    console.log('done');
    //do something with result
});