AB#1175 Crop entity avatars using pure CSS

NCI-Agency · Jul 11, 2024 · 5576238 · 5576238
1 parent 6cc0256
commit 5576238
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 37 deletions.
diff --git a/client/src/components/avatar/EntityAvatarDisplay.js b/client/src/components/avatar/EntityAvatarDisplay.js
@@ -1,55 +1,52 @@
 import styled from "@emotion/styled"
 import PropTypes from "prop-types"
-import React, { useEffect, useRef } from "react"
+import React from "react"
 
 export const EntityAvatarDisplay = ({ avatar, width, height, style }) => {
-  const canvasRef = useRef()
-  useEffect(() => {
-    if (avatar?.applyCrop) {
-      const canvas = canvasRef.current
-      const context = canvas.getContext("2d")
-      context.clearRect(0, 0, canvas.width, canvas.height)
-      const image = new Image()
-      image.src = `/api/attachment/view/${avatar.attachmentUuid}`
-      image.onload = function() {
-        context.drawImage(
-          image,
-          avatar.cropLeft,
-          avatar.cropTop,
-          avatar.cropWidth,
-          avatar.cropHeight,
-          0,
-          0,
-          width,
-          height
-        )
-      }
-    }
-  }, [avatar, width, height])
-
   if (!avatar) {
     return null
   }
 
+  const [scaleX, scaleY] = avatar.applyCrop
+    ? [width / avatar.cropWidth, height / avatar.cropHeight]
+    : [1, 1]
+  const [offsetX, offsetY] = avatar.applyCrop
+    ? [-avatar.cropLeft * scaleX, -avatar.cropTop * scaleY]
+    : [0, 0]
+  const [imageWidth, imageHeight] = avatar.applyCrop
+    ? [undefined, undefined]
+    : [width, height]
   return (
-    <EntityAvatarStyledDiv style={style}>
-      {avatar.applyCrop ? (
-        <canvas ref={canvasRef} width={width} height={height} />
-      ) : (
-        <img
-          src={`/api/attachment/view/${avatar.attachmentUuid}`}
-          height={height}
-          width={width}
-          alt="Avatar"
-        />
-      )}
+    <EntityAvatarStyledDiv width={width} height={height} style={style}>
+      <EntityAvatarStyledImg
+        src={`/api/attachment/view/${avatar.attachmentUuid}`}
+        left={offsetX}
+        top={offsetY}
+        width={imageWidth}
+        height={imageHeight}
+        transform={`scale(${scaleX}, ${scaleY})`}
+        alt="Avatar"
+      />
     </EntityAvatarStyledDiv>
   )
 }
 const EntityAvatarStyledDiv = styled.div`
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;
+  position: relative;
+  overflow: hidden;
+  width: ${props => props.width}px;
+  height: ${props => props.height}px;
+`
+const EntityAvatarStyledImg = styled.img`
+  position: absolute;
+  top: ${props => props.top}px;
+  left: ${props => props.left}px;
+  width: ${props => props.width}px;
+  height: ${props => props.height}px;
+  transform: ${props => props.transform};
+  transform-origin: top left;
 `
 
 EntityAvatarDisplay.propTypes = {

diff --git a/client/tests/webdriver/pages/showOrganization.page.js b/client/tests/webdriver/pages/showOrganization.page.js
@@ -210,7 +210,7 @@ class ShowOrganization extends Page {
   }
 
   async getEntityAvatar() {
-    return browser.$("fieldset div.row div.text-center canvas")
+    return browser.$("fieldset div.row div.text-center img")
   }
 }