javascript - 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?

Answer 1

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>