???? ?? ?????? ??? ??(????)

Reduxrespot:

?????? ???? ??? ? html5 ??? ??? ???? ??? ??? ?? ??? ?? ?????. ? ?? ?? ?? ?? ??? ?????? ??? ????? ??? ??? ??? ?? ??? ??? ??????.

?? ??

?? ?? ?????

? ???? ?? ??? ??? ?? ??? ?????. ??? ?? ?? ?????? ?????. ??? ??? ????.

1. drawImage() ???? ???? ?? ???? ??? ??? ???? ????.
2. ??? ???? ???? ???? getImageData()? ?????.
3. putImageData()? ???? ??? ???? ? ???? ????.

?? ?? ??? ??:

const originalImage = new Image();
originalImage.onload = () => {
  const originalCanvas = document.createElement('canvas');
  originalCanvas.width = desiredWidth;
  originalCanvas.height = desiredHeight;
  const originalCtx = originalCanvas.getContext('2d');
  originalCtx.drawImage(originalImage, 0, 0, desiredWidth, desiredHeight);

  const scaledData = originalCtx.getImageData(0, 0, desiredWidth, desiredHeight);
  const scaledCanvas = document.createElement('canvas');
  scaledCanvas.width = desiredWidth;
  scaledCanvas.height = desiredHeight;
  const scaledCtx = scaledCanvas.getContext('2d');
  scaledCtx.putImageData(scaledData, 0, 0);
};

??? ?????

? ?? ??????? ??? ???? ?? ?? , ??? ?????? ??? ? ????. ?? ? ?? ??? ???? ?? ?? ?????? ????? ?????? ?????.

??? 2?? ?????? ?? ????.

const originalImage = new Image();
originalImage.onload = () => {
  // 第一步：縮小 50%
  const firstCanvas = document.createElement('canvas');
  firstCanvas.width = originalImage.width / 2;
  firstCanvas.height = originalImage.height / 2;
  const firstCtx = firstCanvas.getContext('2d');
  firstCtx.drawImage(originalImage, 0, 0, firstCanvas.width, firstCanvas.height);

  // 第二步：縮小 50%
  const secondCanvas = document.createElement('canvas');
  secondCanvas.width = firstCanvas.width / 2;
  secondCanvas.height = firstCanvas.height / 2;
  const secondCtx = secondCanvas.getContext('2d');
  secondCtx.drawImage(firstCanvas, 0, 0, secondCanvas.width, secondCanvas.height);

  const finalImage = new Image();
  finalImage.src = secondCanvas.toDataURL();
};

?? ??

??? ??????? ?? ???? ??? ? ????. ? ??? ????? ?? ??? ??? ? ????.

• ??? ???: ???? ?? ?? ?? ??? ??? ???? ??? ????? ??? ? ????.
• ? ?? ??? ?? ???? ??: ?? ?? ??? ?? ??? ??? ??? ?? ???? ? ?? ??? ??? ? ????.
• ? ?? ??? ????? ??: ?? ?? 2?? ????? ?? ? ???? ??? 50? ??? 3?? ?????? ?????. ? ???? ??? 33%? ?????. % .

? ??? HTML5 Canvas? ???? ?????? ??? ??? ??? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!