javascript Raphael.js - 具有原始宽度和高度大小的图像？

Raphael.js - image with it's original width and height size?

提问by Edward

Hi RaphaelJS users =) ,

嗨，RaphaelJS 用户 =) ，

I have maybe a dumb-ish question, but I can't seem to find the answer, the thing is, I'm trying to load/create an image with Raphael, that's fine, like this:

我可能有一个愚蠢的问题，但我似乎找不到答案，问题是，我正在尝试使用 Raphael 加载/创建图像，这很好，如下所示：

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

But as you can see, it always seems like you have to give the "width" and "height" properties, I already checked the documentation, but it's always short and not that's detailed, and I tried giving null parameters or empty parameters, but it doesn't work...

但是正如您所看到的，似乎您总是必须提供“宽度”和“高度”属性，我已经查看了文档，但它总是很短而且没有那么详细，我尝试提供空参数或空参数，但是它不起作用...

So I'm wondering if there is actually a direct way in raphael to do this, or....do I have to always get those values before???

所以我想知道在 raphael 中是否真的有直接的方法来做到这一点，或者....我之前必须总是得到这些值吗？？？

I mean, something like this?:

我的意思是，像这样的事情？：

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

And so that way I load with the original size of the image and that kinda solves my problem, but....isn't there way inside Raphael to do this???

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

回答by Edward

For now...I guess I'll have to answer my own question with my own answer, cause there seems to be no other way that I've found or that someone has told me =P

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

回答by Huniku

Building off of @drzaus's awesome answer, I had some issues where if the image I was loading into Raphael was not already in the cache, the height and width would be set to 0. To fix this:

建立在@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);

This allows the image to load before before querying it for width/height, and also supports the instance where the image is already in the cache and the onload event is not fired. To use this, simply:

这允许图像在查询宽度/高度之前加载，并且还支持图像已经在缓存中并且不触发 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
});

回答by drzaus

Had same problem, thanks for the tip -- here's a plugin to replace the existing image function with one that respects dimensions: http://jsfiddle.net/drzaus/dhkh7/

有同样的问题，谢谢你的提示——这里有一个插件，用尊重尺寸的函数替换现有的图像函数：http: //jsfiddle.net/drzaus/dhkh7/

To be safer, should probably not overwrite the original image function just in case it ever changes, but you get the idea.

为了更安全，可能不应该覆盖原始图像函数以防万一它发生变化，但你明白了。

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

And usage:

和用法：

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

回答by sjsc

Edward's comment worked for me but I had to place it in an interval function and wait until the width and height are defined before adding the image (otherwise I got a 0x0 image). Here is the code I used:

爱德华的评论对我有用，但我必须将它放在一个间隔函数中，并等到宽度和高度在添加图像之前定义（否则我会得到一个 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()