An image element that understands what is in the image, powered by ML.

Include compretend on your web page.

<script src="https://cdn.jsdelivr.net/npm/compretend-img/dist/compretend-img.min.js"></script>

Now you can add compretend elements to your page.

<compretend-img src="http://site.com/image.png" crop="faces">
</compretend-img>

The above example will place an image on the page centered around the faces detected in the image.

Image element that understands what is in the image.

Settings can be set as either element attributes or as element properties.

let elem = document.createElement('compretend-img')
elem.crop = 'faces'
elem.width = 320
// OR
document.body.innerHTML += `
  <compretend-img src="https://imageurl" crop="faces" width=100>
  </compretend-img>
`

The following properties are available.

• src: URL to remote image. Can be on any publicly available server.
• data: ArrayBuffer or Blob representing image data.
• crop: String for detection method. Only "faces" supported currently.
  • Detected attributes in the image will be centered within the constraints set of width/height. If width/height are not set the image is cropped around the detected elements.
• width: Image element width.
• height: Image element height.
• scaled: Scale image down to the specific dimensions (height and width). Defaults to false.
• margin: Ads margin to a cropped and scaled image.