Me enfrento a este problema MÁS EXTRAÑO en mi sitio web. El método que se proporciona a continuación toma una cadena base64 y los valores de recorte, zoom y rotación y devuelve una cadena base64 modificada. Este método funciona absolutamente bien en todos los dispositivos y escritorios Android. Pero cuando se usa un iPhone, este método devuelve una cadena base64 que, cuando se convierte, es una imagen negra simple. No tengo ni idea de por qué se comporta así en todos los iPhones.

Información adicional: esto solo sucede con las imágenes HEIF que se convierten automáticamente a jpeg cuando un usuario las selecciona de la galería del iPhone. Para otros formatos como jpg y png, el método funciona bien incluso en iPhone.

Aquí está el método de cultivo

 async function getCroppedImg(imageSrc, pixelCrop, rotation) { console.log('imagesrc : ', imageSrc) const image = await createImage(imageSrc); const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); const maxSize = Math.max(image.width, image.height); const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2)); canvas.width = safeArea; canvas.height = safeArea; ctx.translate(safeArea / 2, safeArea / 2); ctx.rotate(getRadianAngle(rotation)); ctx.translate(-safeArea / 2, -safeArea / 2); ctx.drawImage( image, safeArea / 2 - image.width * 0.5, safeArea / 2 - image.height * 0.5 ); const data = ctx.getImageData(0, 0, safeArea, safeArea); canvas.width = pixelCrop.width; canvas.height = pixelCrop.height; ctx.putImageData( data, 0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x, 0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y ); // As Base64 string return canvas.toDataURL("image/jpeg"); }

 const createImage = (url) => new Promise((resolve, reject) => { const image = new Image(); image.addEventListener("load", () => resolve(image)); image.addEventListener("error", (error) => reject(error)); image.setAttribute("crossOrigin", "anonymous"); image.src = url; }); function getRadianAngle(degreeValue) { return (degreeValue * Math.PI) / 180; }