Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Had same problem, thanks for the tip -- here's a plugin to replace the existing image function with one that respects dimensions: <a href="http://jsfiddle.net/drzaus/dhkh7/" rel="nofollow">http://jsfiddle.net/drzaus/dhkh7/</a></p> <p>To be safer, should probably not overwrite the original image function just in case it ever changes, but you get the idea.</p> <pre><code>;(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); </code></pre> <p>And usage:</p> <pre><code>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'); }; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload