Javascript Raphael.js-图像与它'；原来的宽度和高度尺寸是多少？

嗨，RaphaelJS用户=）

我可能有一个愚蠢的问题，但我似乎找不到答案，问题是，我正在尝试加载/创建一个拉斐尔的图像，这很好，像这样：

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

但是正如你所看到的，似乎你总是必须给出“宽度”和“高度”属性，我已经检查了文档，但它总是很短，不太详细，我试着给出空参数或空参数，但它不起作用

所以我想知道拉斐尔是否真的有一种直接的方法来做到这一点，或者……我是否必须在之前得到这些值？？

我是说，像这样的事

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);

---

这样我就可以加载图像的原始大小，这就解决了我的问题，但是……拉斐尔内部难道没有办法做到这一点吗？

现在……我想我必须用我自己的答案来回答我自己的问题，因为我似乎没有找到其他方法，或者有人告诉我=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);

---

也有同样的问题，谢谢你的提示——这里有一个插件，可以用一个尊重维度的插件替换现有的图像函数：

为了安全起见，您可能不应该仅仅为了防止原始图像函数发生更改而覆盖它，但您已经明白了这一点

;(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

var originalRaphaelImageFn = Raphael.fn.image;
Raphael.fn.image = function(url, x, y, w, h) {
    // fix the image dimensions to match original scale unless otherwise provided
    if( !w || !h ) {
        var img = new Image();
        img.src = url;
        if( !w ) w = img.width;
        if( !h ) h = img.height;
    }
    return originalRaphaelImageFn.call(this, url, x, y, w, h);
};
})(Raphael);

使用方法：

window.onload = function() {
  var paper = new Raphael('canvas', '100%', '100%');

  // specify dimensions as before
  paper.image('http://www.stockfreeimages.com/Swiss-panorama-thumb6499792.jpg', 10, 10, 100, 50).attr('stroke', '#000');

  // original ratio
  paper.image('http://www.stockfreeimages.com/Swiss-panorama-thumb6499792.jpg', 10, 100).attr('stroke', '#f00');

  // specify width, height taken from original
  paper.image('http://www.stockfreeimages.com/Swiss-panorama-thumb6499792.jpg', 10, 200, 100).attr('stroke', '#0f0');

  // specify height, width taken from original
  paper.image('http://www.stockfreeimages.com/Swiss-panorama-thumb6499792.jpg', 10, 300, false, 100).attr('stroke', '#00f');
};

---

基于@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
});

---

Edward的评论对我来说很有用，但我必须将其放在一个区间函数中，并在添加图像之前等待宽度和高度的定义（否则我会得到一个0x0图像）。以下是我使用的代码：

var imgURL = "/img/img1.jpg"
var myImg = new Image();
myImg.src = imgURL;

function loadImagAfterWidthAndHeightAreDefined(){
  width = myImg.width;
  height = myImg.height;

  if(myImg.width > 0 && myImg.height > 0){
    image_1 = paper.image(imgURL, 0, 0, width, height);
  }
  else{
    setTimeout(function(){
      loadImagAfterWidthAndHeightAreDefined();
    },250);
  }
}
loadImagAfterWidthAndHeightAreDefined()

---

是什么阻止了你按照你的建议实施它？更清楚一点-你想实现什么？@EliranMalka，嗯，没有什么能阻止我，我按照我说的方式实现了它，但是，我的问题是。。。如果Raphael没有执行所有这些代码，而是有一个参数/参数/属性来创建具有原始尺寸的图像，我说清楚了吗？或者我错过了什么=Pso你找到解决方案了吗？我也在找it@oyatek嗨，很抱歉，但是没有，没有直接的解决方案，我使用的是我已经发布的解决方案（使用JS查找宽度和高度并在参数中使用这些变量的解决方案），但是现在我的想法是，没有实际的参数可以在纸上自动获取。image creation=p谢谢你的回答。。我也在看同样的内容，发现自己也在用你的方式，现在你有点确认了它还不错=）使用$（document.ready（function（）{}）不是更好吗；来自jQuery？然后，您不应该需要setTimeout（）函数。