Блог

Я хочу иметь возможность масштабировать и обрезать изображение, как в react-easy-crop, но с помощью react-image-crop

до сих пор это отключает меня, но когда я увеличиваю масштаб, используя масштаб ReactCrop = prop

Не принимает это во внимание при отсечении

Мне нужно увеличить масштаб фотографии и обрезать ее с помощью холста это мой код холста, с помощью которого я обрезаю фотографию

      const canvas = document.createElement('canvas')

  const scaleX: number = image.naturalWidth / image.width
  const scaleY: number = image.naturalHeight / image.height

  canvas.width = crop.width
  canvas.height = crop.height

  const ctx = canvas.getContext('2d')

  // New lines to be added
  const pixelRatio = window.devicePixelRatio

  canvas.width = crop.width * pixelRatio
  canvas.height = crop.height * pixelRatio

  if (ctx !== null) {
    ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0)
    ctx.imageSmoothingQuality = 'high'

    ctx.drawImage(
      image,
      crop.x * scaleX,
      crop.y * scaleY,
      crop.width * scaleX,
      crop.height * scaleY,
      0,
      0,
      crop.width,
      crop.height
    )
  }

  // As Base64 string
  // const base64Image = canvas.toDataURL("image/jpeg");
  // return base64Image;

  // As a blob
  return new Promise((resolve, reject) => {
    canvas.toBlob(
      (blob: any) => {
        if (blob) {
          blob.name = fileName
          const newImg = URL.createObjectURL(blob)
          resolve(newImg)
        }
        return
      },
      'image/png',
      1
    )
  })