How to implement SVG's preserveAspectRatio="xMinYMin slice" for canvas drawImage method.

Question

Is there a workaround for implement SVG's preserveAspectRatio="xMinYMin slice" for drawImage() method in canvas?

you mean when `img` in `drawImage(img, x, y)` refers to an svg doc or just implement the same functionality as this attribute for any image ? — Kaiido, Dec 23 '15 at 05:21
I want to preserve aspect ratio of images inside canvas using drawImage() method like it's done in svg's preserveAspectRatio="xMinYMin slice". — Randika, Dec 23 '15 at 05:34

score 2 · Accepted Answer · edited May 23 '17 at 11:59

Ken's answer in the marked as duplicate answer indeed does the same operation as xMinYMin slice if you call it like drawImageProp(ctx, img, 0, 0, canvas.width, canvas.height, 0, 0).

But for the ones who want the full implementation of the svg's preserveAspectRatio attribute, here is one :

It does return an object with sx,sy,sw,sh,dx,dy,dw,dh as requested by the drawImage() method.

 var preserveAspectRatio = function(source, destination, userString) {

   var srcWidth = source.width,
     srcHeight = source.height,
     destinationW = destination.width,
     destinationH = destination.height;

   // we should keep the whole source
   var aRMeet = function(args) {

     var srcRatio = (srcHeight / srcWidth),
       destRatio = (destinationH / destinationW),

       resultWidth = destRatio > srcRatio ? destinationW : destinationH / srcRatio,
       resultHeight = destRatio > srcRatio ? destinationW * srcRatio : destinationH;

     var getPos = function(arg, res, dest) {

       var max = Math.max(res, dest),
         min = Math.min(res, dest);

       switch (arg) {
         case 'Min': return 0;
         case 'Mid': return (max - min) / 2;
         case 'Max': return max - min;
         default:    return 'invalid';
       }
     };

     var obj = {
       img: returnedImg,
       sx: 0,
       sy: 0,
       swidth: srcWidth,
       sheight: srcHeight,
       dx: getPos(args[0], resultWidth, destinationW),
       dy: getPos(args[1], resultHeight, destinationH),
       dwidth: resultWidth,
       dheight: resultHeight
     };

     if (obj[5] === 'invalid' || obj[6] === 'invalid') {
       return default_obj;
     }

     return obj;
   };

   // we should slice the larger part
   var aRSlice = function(args) {

     var resultWidth, resultHeight;

     var a = function() {
       resultWidth = destinationW;
       resultHeight = srcHeight * destinationW / srcWidth;
     };

     var b = function() {
       resultWidth = srcWidth * destinationH / srcHeight;
       resultHeight = destinationH;
     };

     if (destinationW > destinationH) {
       a();
       if (destinationH > resultHeight) {
         b();
       }
     } else if (destinationW === destinationH) {
       if (srcWidth > srcHeight) {
         b();
       } else {
         a();
       }
     } else {
       b();
       if (destinationW > resultWidth) {
         a();
       }
     }

     var getPos = function(arg, res, dest, src) {
       switch (arg) {
         case 'Min': return 0;
         case 'Mid': return (res - dest) / 2 * src / res;
         case 'Max': return (res - dest) * src / res;
         default: return 'invalid';
       }
     };

     var x = getPos(args[0], resultWidth, destinationW, srcWidth);
     var y = getPos(args[1], resultHeight, destinationH, srcHeight);

     var obj = {
       img: returnedImg,
       sx: x,
       sy: y,
       swidth: srcWidth - x,
       sheight: srcHeight - y,
       dx: 0,
       dy: 0,
       dwidth: resultWidth - (x * (resultWidth / srcWidth)),
       dheight: resultHeight - (y * (resultHeight / srcHeight)),
     };

     if (obj[1] === 'invalid' || obj[2] === 'invalid') {
       return default_obj;
     }

     return obj;
   };

   // check if the object passed was drawable over a canvas
   var returnedImg = source.nodeName === 'IMG' || source.nodeName === 'VIDEO' || source.nodeName === 'CANVAS' ? source : null;

   // if an invalid string or none is set as the preserveAspectRatio, this should be considered as "xMidYMid meet"
   var default_obj = aRMeet(['Mid', 'Mid']);

   if (!userString) {
     return default_obj;
   } else {

     var args = userString.trim().split(' '),
       minMidMax = args[0].replace('x', '').split('Y');

     switch (args[args.length - 1]) {
       case "meet":  return aRMeet(minMidMax);
       case "slice": return aRSlice(minMidMax);
       default:      return default_obj;
     }
   }
 };

  //
  //  Snippet code 
  //_______________

 var images = [new Image(), new Image(), new Image()];
 var img = images[0];
 var selects = document.querySelectorAll('select');

 var ctxL = outputLandscape.getContext('2d');
 var ctxP = outputPortrait.getContext('2d');
 var ctxS = outputSquare.getContext('2d');

 var update = function() {
   ctxL.clearRect(0, 0, outputLandscape.width, outputLandscape.height);
   ctxP.clearRect(0, 0, outputPortrait.width, outputPortrait.height);
   ctxS.clearRect(0, 0, outputSquare.width, outputSquare.height);

   var aspectRatioStr = 'x' + selects[0].value + 'Y' + selects[1].value + ' ' + selects[2].value;

   var p = preserveAspectRatio(img, outputPortrait, aspectRatioStr);
   ctxP.drawImage(p.img, p.sx, p.sy, p.swidth, p.sheight, p.dx, p.dy, p.dwidth, p.dheight);

   var l = preserveAspectRatio(img, outputLandscape, aspectRatioStr);
   ctxL.drawImage(l.img, l.sx, l.sy, l.swidth, l.sheight, l.dx, l.dy, l.dwidth, l.dheight);

   var s = preserveAspectRatio(img, outputSquare, aspectRatioStr);
   ctxS.drawImage(s.img, s.sx, s.sy, s.swidth, s.sheight, s.dx, s.dy, s.dwidth, s.dheight);

   svgImagePortrait.setAttribute('preserveAspectRatio', aspectRatioStr);
   svgImageLandscape.setAttribute('preserveAspectRatio', aspectRatioStr);
   svgImageSquare.setAttribute('preserveAspectRatio', aspectRatioStr);
 };

 for (var i = 0; i < selects.length - 1; i++) {
   selects[i].onchange = update;
 }
 selects[3].onchange = function() {
   img = images[+this.value];
   update();
   svgImagePortrait.setAttributeNS('http://www.w3.org/1999/xlink', 'href', img.src);
   svgImageLandscape.setAttributeNS('http://www.w3.org/1999/xlink', 'href', img.src);
   svgImageSquare.setAttributeNS('http://www.w3.org/1999/xlink', 'href', img.src);

 }

 img.onload = function() {
   svgImagePortrait.setAttributeNS('http://www.w3.org/1999/xlink', 'href', this.src);
   svgImageLandscape.setAttributeNS('http://www.w3.org/1999/xlink', 'href', this.src);
   svgImageSquare.setAttributeNS('http://www.w3.org/1999/xlink', 'href', this.src);

   update();
 };


 images[0].src = "http://lorempixel.com/100/200";
 images[1].src = "http://lorempixel.com/200/100";
 images[2].src = "http://lorempixel.com/200/200";

html,body,canvas {
  margin: 0;
  display: block;
  font-size: .9em;
}
svg,canvas {
  display: inline-block;
}
canvas {
  border: 1px solid green;
}
svg {
  border: 1px solid blue;
}

x
<select name="x">
  <option value="Min">Min</option>
  <option value="Mid">Mid</option>
  <option value="Max">Max</option>
</select>
Y
<select name="Y">
  <option value="Min">Min</option>
  <option value="Mid">Mid</option>
  <option value="Max">Max</option>
</select>

<select name="slice_meet">
  <option value="slice">slice</option>
  <option value="meet">meet</option>
</select>
image format :
<select name="format">
  <option value="0">portrait</option>
  <option value="1">landscape</option>
  <option value="2">square</option>
</select>
<br>

<canvas id="outputLandscape" width="280" height="200"></canvas>
<svg width="280" height="200" viewBox="0 0 280 200">
  <image id="svgImageLandscape" x="0" y="0" width="100%" height="100%"></image>
</svg>
<br>
<canvas id="outputPortrait" width="200" height="280"></canvas>
<svg width="200" height="280" viewBox="0 0 200 280">
  <image id="svgImagePortrait" x="0" y="0" width="100%" height="100%"></image>
</svg>
<br>
<canvas id="outputSquare" width="200" height="200"></canvas>
<svg width="200" height="200" viewBox="0 0 200 200">
  <image id="svgImageSquare" x="0" y="0" width="100%" height="100%"></image>
</svg>

I will also try this.Thank you for the answer. – Randika Dec 23 '15 at 06:25 — Randika, Dec 23 '15 at 06:25

How to implement SVG's preserveAspectRatio="xMinYMin slice" for canvas drawImage method.

1 Answers1

Linked