Traté de cargar la imagen por url en el lienzo. Y cambio el tamaño del lienzo al tamaño de la imagen. andf Traté de rotar la imagen, pero si lo ejecuté, se recorta una parte de la imagen. Por favor, encuentre los errores en mi código.
if (submitBtn) { submitBtn.addEventListener('click', handleSubmitBtnClick); } function handleSubmitBtnClick() { let imgURLValue = inputImageURL.value; backgroundImage.src = `${imgURLValue}`; backgroundImage.crossOrigin = 'Anonymous'; backgroundImage.onload = function () { canvas.width = backgroundImage.width; canvas.height = backgroundImage.height; ctx.drawImage( backgroundImage, 0, 0, backgroundImage.width, backgroundImage.height ); }; } if (rotateBtn) { rotateBtn.addEventListener('click', handleRotateBtn); } function handleRotateBtn() { degree += 90; if (degree >= 360) { degree = 0; } if (degree === 0 || degree === 180) { canvas.width = backgroundImage.width; canvas.height = backgroundImage.height; } else { canvas.width = backgroundImage.height; canvas.height = backgroundImage.width; } ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(backgroundImage.width / 2, backgroundImage.height / 2); ctx.rotate((degree * Math.PI) / 180); ctx.drawImage( backgroundImage, 0, 0, backgroundImage.width, backgroundImage.height, -backgroundImage.width / 2, -backgroundImage.height / 2, backgroundImage.width, backgroundImage.height ); ctx.restore(); }[ingrese la descripción de la imagen aquí][1]
Si giro la imagen, la imagen se carga así... [1]: https://i.stack.imgur.com/drNaG.png
El origen de su rotación debe ser el centro del lienzo, de modo que use los valores actualizados de ancho y alto.
Al usar el centro original de la imagen, su dibujo se compensará.
const rotateBtn = document.querySelector("button"); const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const backgroundImage = new Image(); backgroundImage.src = "https://picsum.photos/150/300"; backgroundImage.decode().then(() => { rotateBtn.disabled = false; handleRotateBtn(); }); let degree = -90; if (rotateBtn) { rotateBtn.addEventListener('click', handleRotateBtn); } function handleRotateBtn() { degree += 90; if (degree >= 360) { degree = 0; } if (degree === 0 || degree === 180) { canvas.width = backgroundImage.width; canvas.height = backgroundImage.height; } else { canvas.width = backgroundImage.height; canvas.height = backgroundImage.width; } ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); // use the updated center as origin ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate((degree * Math.PI) / 180); // I simplified this call but it does the same as yours ctx.drawImage( backgroundImage, -backgroundImage.width / 2, -backgroundImage.height / 2 ); ctx.restore(); } canvas { background: ivory } <button disabled>rotate</button><br> <canvas></canvas>