so i am using the react-image-crop with kotlin js, i have it working on a vanilla implementation without any css transformation...
i am having issues when it has been modified by css
i am using the crop preview from the example (the best i could convert it to kotlin-react)
fun cropPreview( image: HTMLImageElement, canvas: HTMLCanvasElement, crop: PixelCrop, scale: Double = 1.0, rotate: Double = 0.0, ) { var _scale = scale val ctx = canvas.getContext("2d") as? CanvasRenderingContext2D ?: throw Error("No 2d context") val scaleX:Double = (image.naturalWidth / image.width).toDouble() val scaleY:Double = (image.naturalHeight / image.height).toDouble() val pixelRatio = window.devicePixelRatio
canvas.width = floor(crop.width * scaleX * pixelRatio).toInt()
canvas.height = floor(crop.height * scaleY * pixelRatio).toInt()
ctx.scale(pixelRatio, pixelRatio)
ctx.imageSmoothingQuality = ImageSmoothingQuality.HIGH
val cropX = crop.x * scaleX
val cropY = crop.y * scaleY
val rotateRads = rotate * TO_RADIANS
val centerX:Double = (image.naturalWidth / 2).toDouble()
val centerY:Double = (image.naturalHeight / 2).toDouble()
ctx.save()
ctx.translate(-cropX, -cropY)
ctx.translate(centerX, centerY)
ctx.rotate(rotateRads)
ctx.scale(_scale, _scale)
ctx.translate(-centerX, -centerY)
ctx.drawImage(
image,
0.0,
0.0,
image.naturalWidth.toDouble(),
image.naturalHeight.toDouble(),
0.0,
0.0,
image.naturalWidth.toDouble(),
image.naturalHeight.toDouble(),
)
ctx.restore()
// console.log("try me", canvas.toDataURL("image/jpeg"))
}
the scale value i am sending in is not from a user controlled input though.. i am taking the desired width (post transform) and dividing that by the natural width (non transformed)
(700.0 / width).coerceAtMost(1.0)
but when i use that value the preview is off.
Is scale not used the way i think it is? I know i am probably overlooking something basic.
All help is appreciated
Unrelated to this question but will help folks having issues with the library....
IF YOU ARE USING THIS LIBRARY AND HAVING ISSUES, i cannot recommend stripping out all css. I was using this in a bootstrap container and it was causing issues...
