ps导出图片尺寸变了如何办

第一段

要解决导出图片尺寸变小的问题，首先需要了解图片导出的方式。

通常情况下，我们可以使用以下方式导出图片：

  
// 方法一：通过base64方式导出图片
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const img = new Image()
img.onload = function () {
  canvas.width = img.width
  canvas.height = img.height
  ctx.drawImage(img, 0, 0, img.width, img.height)
  const base64 = canvas.toDataURL('image/png')
  const a = document.createElement('a')
  a.href = base64
  a.download = 'image.png'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}
img.src = 'image.jpg'

// 方法二：直接使用canvas方式导出图片
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const img = new Image()
img.onload = function () {
  canvas.width = img.width
  canvas.height = img.height
  ctx.drawImage(img, 0, 0, img.width, img.height)
  const url = canvas.toDataURL('image/png')
  const a = document.createElement('a')
  a.href = url
  a.download = 'image.png'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}
img.src = 'image.jpg'
  

第二段

在我们了解了图片导出的方式后，接下来我们就可以来解决图片尺寸变小的问题了。

一般情况下，导出的图片尺寸变小的主要原因是画布的尺寸比图片的尺寸小。因此，在使用canvas导出图片时，我们可以手动指定画布的尺寸与图片的尺寸一致，这样导出的图片就与原图尺寸一致了。

  
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const img = new Image()
img.onload = function () {
  canvas.width = img.width
  canvas.height = img.height
  ctx.drawImage(img, 0, 0, img.width, img.height)
  const url = canvas.toDataURL('image/png')
  const a = document.createElement('a')
  a.href = url
  a.download = 'image.png'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}
img.src = 'image.jpg'
  

第三段

除了手动设置画布尺寸，我们还可以根据图片大小动态计算画布宽高。这样就可以通过代码自动获取图片的尺寸，并将其应用到画布中。

  
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const img = new Image()
img.onload = function () {
  const width = img.width
  const height = img.height
  canvas.width = width
  canvas.height = height
  ctx.drawImage(img, 0, 0, width, height)
  const url = canvas.toDataURL('image/png')
  const a = document.createElement('a')
  a.href = url
  a.download = 'image.png'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}
img.src = 'image.jpg'
  

第四段

最后，我们需要注意的是，当图片过大时，手动设置画布大小可能会导致导出的图片过大，因此需要结合实际情况来选择图片导出方式。

  
const img = new Image()
img.onload = function () {
  const width = img.width
  const height = img.height
  if (width > 2000 || height > 2000) {
    // 图片过大，使用base64方式导出
    const base64 = img.src
    const a = document.createElement('a')
    a.href = base64
    a.download = 'image.png'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
  } else {
    // 使用canvas方式导出
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    canvas.width = width
    canvas.height = height
    ctx.drawImage(img, 0, 0, width, height)
    const url = canvas.toDataURL('image/png')
    const a = document.createElement('a')
    a.href = url
    a.download = 'image.png'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
  }
}
img.src = 'image.jpg'