Package Exports

crop-img

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (crop-img) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

crop-img

Creates a crop region with the given dimensions and alignment to be used with HTML canvas drawImage, similar to background-size: cover / object-fit: cover.

Install

npm install crop-img

Use

import crop from 'crop-img';

const width = window.innerWidth;
const height = window.innerHeight;

const context = document.createElement('canvas').getContext('2d');
context.canvas.width = width;
context.canvas.height = height;
document.body.appendChild(context.canvas);

const img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'https://source.unsplash.com/random/1600x900';
img.onload = onload;

function onload() {
  // returns and object with x, y, width and height properties
  const rect = crop(img, { width, height, align: [0, 0]});
  context.drawImage(img, rect.x, rect.y, rect.width, rect.height);
}