@zoom-image/core
Version:
A core implementation of zoom image
1 lines • 3.38 kB
Source Map (JSON)
{"version":3,"sources":["../src/cropImage.ts"],"names":[],"mappings":";AAQO,IAAM,YAAY,OAAO,EAAE,OAAO,WAAW,WAAW,aAAa,WAAW,EAAE,MAAoB;AAC3G,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,QAAQ,MAAM,gBAAgB,MAAM,cAAc;AACxD,QAAM,qBAAqB,WAAW;AACtC,QAAM,oBAAoB,MAAM,cAAc;AAC9C,QAAM,qBAAqB,MAAM,eAAe;AAChD,SAAO,QAAQ;AACf,SAAO,SAAS;AAChB,QAAM,gBAAgB,OAAO,WAAW,IAAI;AAE5C,QAAM,KAAK,KAAK,IAAI,GAAG,KAAK,IAAI,SAAS,IAAI,KAAK;AAClD,QAAM,KAAK,KAAK,IAAI,GAAG,KAAK,IAAI,SAAS,IAAI,KAAK;AAElD,gBAAc;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,gBAAgB,IAAI,MAAM;AAChC,gBAAc,MAAM,OAAO,UAAU;AAErC,QAAM,IAAI,QAAQ,CAAC,YAAY,WAAW,SAAS,CAAC,CAAC;AAErD,QAAM,gBAAgB,SAAS,cAAc,QAAQ;AACrD,QAAM,uBAAuB,cAAc,WAAW,IAAI;AAE1D,MAAI,uBAAuB,MAAM,uBAAuB,KAAK;AAC3D,kBAAc,QAAQ,cAAc;AACpC,kBAAc,SAAS,cAAc;AAAA,EACvC,OAAO;AACL,kBAAc,QAAQ,cAAc;AACpC,kBAAc,SAAS,cAAc;AAAA,EACvC;AAEA,uBAAqB,UAAU,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;AAChE,MAAI,uBAAuB,MAAM,uBAAuB,KAAK;AAC3D,yBAAqB,UAAU,cAAc,SAAS,GAAG,cAAc,QAAQ,CAAC;AAAA,EAClF,OAAO;AACL,yBAAqB,UAAU,cAAc,QAAQ,GAAG,cAAc,SAAS,CAAC;AAAA,EAClF;AACA,uBAAqB,OAAQ,qBAAqB,KAAK,KAAM,GAAG;AAChE,uBAAqB,UAAU,eAAe,CAAC,cAAc,QAAQ,GAAG,CAAC,cAAc,SAAS,CAAC;AAEjG,SAAO,cAAc,UAAU;AACjC","sourcesContent":["type CropImageArg = {\n currentZoom: number\n image: HTMLImageElement\n positionX: number\n positionY: number\n rotation?: number\n}\n\nexport const cropImage = async ({ image, positionX, positionY, currentZoom, rotation = 0 }: CropImageArg) => {\n const canvas = document.createElement(\"canvas\")\n const scale = image.naturalWidth / (image.clientWidth * currentZoom)\n const normalizedRotation = rotation % 360\n const croppedImageWidth = image.clientWidth * scale\n const croppedImageHeight = image.clientHeight * scale\n canvas.width = croppedImageWidth\n canvas.height = croppedImageHeight\n const canvasContext = canvas.getContext(\"2d\") as CanvasRenderingContext2D\n\n const sx = Math.max(0, Math.abs(positionX) * scale)\n const sy = Math.max(0, Math.abs(positionY) * scale)\n\n canvasContext.drawImage(\n image,\n sx,\n sy,\n croppedImageWidth,\n croppedImageHeight,\n 0,\n 0,\n croppedImageWidth,\n croppedImageHeight,\n )\n\n const originalImage = new Image()\n originalImage.src = canvas.toDataURL()\n\n await new Promise((resolve) => setTimeout(resolve, 0))\n\n const rotatedCanvas = document.createElement(\"canvas\") as HTMLCanvasElement\n const rotatedCanvasContext = rotatedCanvas.getContext(\"2d\") as CanvasRenderingContext2D\n\n if (normalizedRotation === 90 || normalizedRotation === 270) {\n rotatedCanvas.width = originalImage.naturalHeight\n rotatedCanvas.height = originalImage.naturalWidth\n } else {\n rotatedCanvas.width = originalImage.naturalWidth\n rotatedCanvas.height = originalImage.naturalHeight\n }\n\n rotatedCanvasContext.clearRect(0, 0, canvas.width, canvas.height)\n if (normalizedRotation === 90 || normalizedRotation === 270) {\n rotatedCanvasContext.translate(originalImage.height / 2, originalImage.width / 2)\n } else {\n rotatedCanvasContext.translate(originalImage.width / 2, originalImage.height / 2)\n }\n rotatedCanvasContext.rotate((normalizedRotation * Math.PI) / 180)\n rotatedCanvasContext.drawImage(originalImage, -originalImage.width / 2, -originalImage.height / 2)\n\n return rotatedCanvas.toDataURL()\n}\n"]}