Raphael.js - 元の幅と高さの画像ですか？

Question

こんにちは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); 

そして私は、画像の元のサイズをロードし、それはちょっと....私の問題を解決するが、その方法は、方法がありませんの？：これを行うにはラファエルの内部???今の

Answer 1

...私は、私は自分の答えを自分の質問に答える必要がありますねそこに私が見つけた他の方法をしないように見えるか、誰かが=

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

を私に言ったことが原因

Answer 2

は、先端に感謝を同じ問題を抱えていた - ここに寸法を尊重するものと既存のイメージ機能を置き換えるためのプラグインです：安全であるとhttp://jsfiddle.net/drzaus/dhkh7/

は、おそらくこれまでに念のためにそれを元の画像機能を上書きしてはなりません変更が、あなたは考えを得る。

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

と使用方法：@のdrzausの素晴らしい答えのオフ

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

Answer 3

ビル、私はラファエルにロードされたイメージが既にキャッシュになかった場合はいくつかの問題、高さと幅を考えていましたこの問題を解決するには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); 

これは、画像の幅/高さのためにそれを照会する前に前にロードすることができ、また、画像がすでにキャッシュ内にあるインスタンスとONLをサポートしていますoadイベントは起動されません。これを使用するには、単に：

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

Answer 4

エドワードさんのコメントは私のために働いたが、私はインターバル機能に配置し、幅と高さが（そうでない場合、私は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()