How to implement SVG’s preserveAspectRatio=”xMinYMin slice” for canvas drawImage method.

by

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>

More Related Contents:

  1. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  2. How to clear the canvas for redrawing
  3. Real mouse position in canvas
  4. how to draw smooth curve through N points using javascript HTML5 canvas?
  5. HTML5 Canvas Resize (Downscale) Image High Quality?
  6. CanvasContext2D drawImage() issue [onload and CORS]
  7. Why is requestAnimationFrame better than setInterval or setTimeout
  8. HTML5 Canvas vs. SVG vs. div
  9. How to draw an inline svg (in DOM) to a canvas?
  10. Firefox error rendering an SVG image to HTML5 canvas with drawImage
  11. HTML5 Canvas camera/viewport – how to actually do it?
  12. I want to do animation of an object along a particular path
  13. How can I stop the alpha-premultiplication with canvas imageData?
  14. Draw border around nontransparent part of image on canvas
  15. addEventListener for keydown on Canvas
  16. Load image from url and draw to HTML5 Canvas
  17. Canvas image masking / overlapping
  18. How can I animate a progressive drawing of svg path?
  19. Save canvas as jpg to desktop [duplicate]
  20. Saving canvas to image via canvas.toDataURL results in black rectangle
  21. Resize a Base-64 image in JavaScript without using canvas
  22. canvas getContext(“2d”) returns null
  23. clearing circular regions from HTML5 Canvas
  24. Rasterizing an in-document SVG to Canvas
  25. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  26. How to detect shape on a transparent canvas?
  27. HTML5 Canvas API – formatting individual words with italics
  28. Scaling an image to fit on canvas
  29. True Isometric Projection with HTML5 Canvas
  30. HTML5 Canvas: Get Event when drawing is finished

Leave a Comment