Bagaimana Anda memuat gambar ke dalam javascript?

JavaScript Muat Gambar adalah pustaka untuk memuat gambar yang disediakan sebagai objek

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

Ini juga menyediakan metode untuk mem-parsing metadata gambar untuk mengekstrak tag IPTC dan Exif serta gambar mini tersemat, untuk menimpa nilai Exif Orientation dan mengembalikan header gambar lengkap setelah mengubah ukuran

Mempersiapkan

Instal melalui NPM

npm install blueimp-load-image

Ini akan menginstal file JavaScript di dalam

document.getElementById('file-input').onchange = function () {
  loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
    document.body.appendChild(data.image)
  })
}

Selanjutnya, sertakan skrip Gambar Muat JavaScript yang digabungkan dan diperkecil di markup HTML Anda

<script src="js/load-image.all.min.js"></script>

Atau sebagai alternatif, pilih komponen mana yang ingin Anda sertakan

<!-- required for all operations -->
<script src="js/load-image.js"></script>

<!-- required for scaling, cropping and as dependency for rotation -->
<script src="js/load-image-scale.js"></script>

<!-- required to parse meta data and to restore the complete image head -->
<script src="js/load-image-meta.js"></script>

<!-- required to parse meta data from images loaded via URL -->
<script src="js/load-image-fetch.js"></script>

<!-- required for rotation and cross-browser image orientation -->
<script src="js/load-image-orientation.js"></script>

<!-- required to parse Exif tags and cross-browser image orientation -->
<script src="js/load-image-exif.js"></script>

<!-- required to display text mappings for Exif tags -->
<script src="js/load-image-exif-map.js"></script>

<!-- required to parse IPTC tags -->
<script src="js/load-image-iptc.js"></script>

<!-- required to display text mappings for IPTC tags -->
<script src="js/load-image-iptc-map.js"></script>

Penggunaan

Memuat gambar

Dalam kode aplikasi Anda, gunakan fungsi

document.getElementById('file-input').onchange = function () {
  loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
    document.body.appendChild(data.image)
  })
}

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

Atau gunakan API berbasis seperti ini (polyfill untuk browser lama)

document.getElementById('file-input').onchange = function () {
  loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
    document.body.appendChild(data.image)
  })
}

Dengan async/menunggu (membutuhkan browser modern atau transpiler kode seperti Babel atau TypeScript)

document.getElementById('file-input').onchange = async function () {
  let data = await loadImage(this.files[0], { maxWidth: 600 })
  document.body.appendChild(data.image)
}

Penskalaan gambar

Dimungkinkan juga untuk menggunakan fungsionalitas penskalaan gambar secara langsung dengan gambar yang sudah ada

var scaledImage = loadImage.scale(
  img, // img or canvas element
  { maxWidth: 600 }
)

Persyaratan

Pustaka JavaScript Load Image tidak memiliki dependensi, tetapi mendapat manfaat dari dua polyfill berikut

• blueimp-canvas-to-blob untuk browser tanpa HTMLCanvasElement asli. dukungan toBlob, untuk membuat

  document.getElementById('file-input').onchange = function () {
    loadImage(
      this.files[0],
      function (img) {
        document.body.appendChild(img)
      },
      { maxWidth: 600 } // Options
    )
  }

  6 objek dari

  document.getElementById('file-input').onchange = function () {
    loadImage(
      this.files[0],
      function (img) {
        document.body.appendChild(img)
      },
      { maxWidth: 600 } // Options
    )
  }

  9 elemen
• janji-polyfill untuk dapat menggunakan API

  document.getElementById('file-input').onchange = function () {
    loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
      document.body.appendChild(data.image)
    })
  }

  4 berbasis Janji di Browser tanpa dukungan asli

  document.getElementById('file-input').onchange = function () {
    loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
      document.body.appendChild(data.image)
    })
  }

  5

Dukungan peramban

Browser yang mengimplementasikan API berikut mendukung semua opsi

• Memuat gambar dari objek File dan Blob
  • URL. createObjectURL atau FileReader. bacaAsDataURL
• Mem-parsing data meta
  • FileReader. readAsArrayBuffer
  • Gumpal. mengiris
  • DataView (tidak diperlukan dukungan BigInt)
• Mem-parsing data meta dari gambar yang dimuat melalui URL
  • mengambil Respon. gumpalan atau
• API berbasis janji
  • Janji

Ini termasuk (tetapi tidak terbatas pada) browser berikut

• Chrome 32+
• Firefox 29+
• Safari 8+
• Chrome Seluler 42+ (Android)
• Seluler Firefox 50+ (Android)
• Safari Seluler 8+ (iOS)
• Tepi 74+
• Tepi Warisan 12+
• Internet Explorer 10+

  document.getElementById('file-input').onchange = function () {
    loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
      document.body.appendChild(data.image)
    })
  }

  _6

document.getElementById('file-input').onchange = function () {
  loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
    document.body.appendChild(data.image)
  })
}

document.getElementById('file-input').onchange = function () {
  loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
    document.body.appendChild(data.image)
  })
}

Memuat gambar dari URL dan menerapkan transformasi (penskalaan, pemangkasan, dan rotasi - kecuali

document.getElementById('file-input').onchange = function () {
  loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
    document.body.appendChild(data.image)
  })
}

Memuat gambar dari URL dan menskalakan ukurannya didukung oleh semua browser yang mengimplementasikan elemen img dan telah berhasil diuji dengan mesin browser setua Internet Explorer 5 (melalui mode emulasi IE11)

Fungsi

document.getElementById('file-input').onchange = function () {
  loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
    document.body.appendChild(data.image)
  })
}

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

API

Telepon balik

Tanda tangan fungsi

Fungsi

document.getElementById('file-input').onchange = function () {
  loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
    document.body.appendChild(data.image)
  })
}

Jika File atau Blob diteruskan sebagai parameter, ia mengembalikan elemen HTML

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

document.getElementById('file-input').onchange = async function () {
  let data = await loadImage(this.files[0], { maxWidth: 600 })
  document.body.appendChild(data.image)
}

document.getElementById('file-input').onchange = async function () {
  let data = await loadImage(this.files[0], { maxWidth: 600 })
  document.body.appendChild(data.image)
}

Itu selalu mengembalikan elemen img HTML saat mengirimkan URL gambar

var loadingImage = loadImage(
  'https://example.org/image.png',
  function (img) {
    document.body.appendChild(img)
  },
  { maxWidth: 600 }
)

Batalkan pemuatan gambar

Beberapa browser (mis. g. Chrome) akan membatalkan proses pemuatan gambar jika properti

document.getElementById('file-input').onchange = async function () {
  let data = await loadImage(this.files[0], { maxWidth: 600 })
  document.body.appendChild(data.image)
}

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

document.getElementById('file-input').onchange = async function () {
  let data = await loadImage(this.files[0], { maxWidth: 600 })
  document.body.appendChild(data.image)
}

Untuk menonaktifkan penanganan panggilan balik, kita juga dapat membatalkan penangan kejadian gambar dan untuk kompatibilitas browser maksimum, batalkan proses pembacaan file jika objek yang dikembalikan adalah instance FileReader

var loadingImage = loadImage(
  'https://example.org/image.png',
  function (img) {
    document.body.appendChild(img)
  },
  { maxWidth: 600 }
)

if (loadingImage) {
  // Unset event handling for the loading image:
  loadingImage.onload = loadingImage.onerror = null

  // Cancel image loading process:
  if (loadingImage.abort) {
    // FileReader instance, stop the file reading process:
    loadingImage.abort()
  } else {
    // HTMLImageElement element, cancel the original image request by changing
    // the target source to the data URL of a 1x1 pixel transparent image GIF:
    loadingImage.src =
      'data:image/gif;base64,' +
      'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  }
}

Tolong dicatat
Elemen

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

document.getElementById('file-input').onchange = async function () {
  let data = await loadImage(this.files[0], { maxWidth: 600 })
  document.body.appendChild(data.image)
}

Argumen panggilan balik

Untuk API gaya panggilan balik, argumen kedua untuk

document.getElementById('file-input').onchange = function () {
  loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
    document.body.appendChild(data.image)
  })
}

var scaledImage = loadImage.scale(
  img, // img or canvas element
  { maxWidth: 600 }
)

Fungsi callback melewati dua argumen

1. Elemen img HTML atau elemen kanvas, atau objek Acara bertipe

   var scaledImage = loadImage.scale(
     img, // img or canvas element
     { maxWidth: 600 }
   )

   4
2. Objek dengan dimensi gambar asli sebagai properti dan berpotensi tambahan

loadImage(
  fileOrBlobOrUrl,
  function (img, data) {
    document.body.appendChild(img)
    console.log('Original image width: ', data.originalWidth)
    console.log('Original image height: ', data.originalHeight)
  },
  { maxWidth: 600, meta: true }
)

Tolong dicatat
Dimensi gambar asli mencerminkan lebar dan tinggi alami dari gambar yang dimuat sebelum menerapkan transformasi apa pun
Untuk nilai yang konsisten di seluruh browser, penguraian harus diaktifkan melalui

var scaledImage = loadImage.scale(
  img, // img or canvas element
  { maxWidth: 600 }
)

document.getElementById('file-input').onchange = function () {
  loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
    document.body.appendChild(data.image)
  })
}

Penanganan kesalahan

Contoh kode yang mengimplementasikan penanganan kesalahan

<script src="js/load-image.all.min.js"></script>

Janji

Jika fungsi

document.getElementById('file-input').onchange = function () {
  loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
    document.body.appendChild(data.image)
  })
}

var scaledImage = loadImage.scale(
  img, // img or canvas element
  { maxWidth: 600 }
)

document.getElementById('file-input').onchange = function () {
  loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
    document.body.appendChild(data.image)
  })
}

<script src="js/load-image.all.min.js"></script>

document.getElementById('file-input').onchange = function () {
  loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
    document.body.appendChild(data.image)
  })
}

• var loadingImage = loadImage(
    'https://example.org/image.png',
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 }
  )

  1. Elemen img atau kanvas HTML

• var loadingImage = loadImage(
    'https://example.org/image.png',
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 }
  )

  2. Lebar asli gambar

• var loadingImage = loadImage(
    'https://example.org/image.png',
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 }
  )

  3. Tinggi asli gambar

Harap baca juga catatan tentang normalisasi dimensi gambar asli di bagian tersebut

Jika telah diuraikan, properti tambahan mungkin ada pada objek

Jika pemuatan gambar gagal,

document.getElementById('file-input').onchange = function () {
  loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
    document.body.appendChild(data.image)
  })
}

var scaledImage = loadImage.scale(
  img, // img or canvas element
  { maxWidth: 600 }
)

Pilihan

Argumen opsi opsional untuk

document.getElementById('file-input').onchange = function () {
  loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
    document.body.appendChild(data.image)
  })
}

Itu dapat digunakan dengan cara berikut dengan gaya panggilan balik

<script src="js/load-image.all.min.js"></script>

Atau cara berikut dengan API berbasis

document.getElementById('file-input').onchange = function () {
  loadImage(this.files[0], { maxWidth: 600 }).then(function (data) {
    document.body.appendChild(data.image)
  })
}

<script src="js/load-image.all.min.js"></script>

Semua pengaturan bersifat opsional. Secara default, gambar dikembalikan sebagai elemen HTML

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

maxWidth

Menentukan lebar maksimum elemen

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

tinggi maksimal

Menentukan tinggi maksimum elemen

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

minLebar

Menentukan lebar minimum elemen

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

minHeight

Menentukan tinggi minimum elemen

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

sourceWidth

Lebar sub-persegi panjang gambar sumber yang akan digambar ke kanvas tujuan
Default ke lebar gambar sumber dan membutuhkan

var loadingImage = loadImage(
  'https://example.org/image.png',
  function (img) {
    document.body.appendChild(img)
  },
  { maxWidth: 600 }
)

if (loadingImage) {
  // Unset event handling for the loading image:
  loadingImage.onload = loadingImage.onerror = null

  // Cancel image loading process:
  if (loadingImage.abort) {
    // FileReader instance, stop the file reading process:
    loadingImage.abort()
  } else {
    // HTMLImageElement element, cancel the original image request by changing
    // the target source to the data URL of a 1x1 pixel transparent image GIF:
    loadingImage.src =
      'data:image/gif;base64,' +
      'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  }
}

sourceHeight

Ketinggian sub-persegi panjang gambar sumber yang akan digambar ke kanvas tujuan
Default ke tinggi gambar sumber dan membutuhkan

var loadingImage = loadImage(
  'https://example.org/image.png',
  function (img) {
    document.body.appendChild(img)
  },
  { maxWidth: 600 }
)

if (loadingImage) {
  // Unset event handling for the loading image:
  loadingImage.onload = loadingImage.onerror = null

  // Cancel image loading process:
  if (loadingImage.abort) {
    // FileReader instance, stop the file reading process:
    loadingImage.abort()
  } else {
    // HTMLImageElement element, cancel the original image request by changing
    // the target source to the data URL of a 1x1 pixel transparent image GIF:
    loadingImage.src =
      'data:image/gif;base64,' +
      'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  }
}

atas

Margin atas sub-persegi panjang gambar sumber
Default ke

var loadingImage = loadImage(
  'https://example.org/image.png',
  function (img) {
    document.body.appendChild(img)
  },
  { maxWidth: 600 }
)

if (loadingImage) {
  // Unset event handling for the loading image:
  loadingImage.onload = loadingImage.onerror = null

  // Cancel image loading process:
  if (loadingImage.abort) {
    // FileReader instance, stop the file reading process:
    loadingImage.abort()
  } else {
    // HTMLImageElement element, cancel the original image request by changing
    // the target source to the data URL of a 1x1 pixel transparent image GIF:
    loadingImage.src =
      'data:image/gif;base64,' +
      'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  }
}

var loadingImage = loadImage(
  'https://example.org/image.png',
  function (img) {
    document.body.appendChild(img)
  },
  { maxWidth: 600 }
)

if (loadingImage) {
  // Unset event handling for the loading image:
  loadingImage.onload = loadingImage.onerror = null

  // Cancel image loading process:
  if (loadingImage.abort) {
    // FileReader instance, stop the file reading process:
    loadingImage.abort()
  } else {
    // HTMLImageElement element, cancel the original image request by changing
    // the target source to the data URL of a 1x1 pixel transparent image GIF:
    loadingImage.src =
      'data:image/gif;base64,' +
      'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  }
}

Baik

Margin kanan sub-persegi panjang gambar sumber
Default ke

var loadingImage = loadImage(
  'https://example.org/image.png',
  function (img) {
    document.body.appendChild(img)
  },
  { maxWidth: 600 }
)

if (loadingImage) {
  // Unset event handling for the loading image:
  loadingImage.onload = loadingImage.onerror = null

  // Cancel image loading process:
  if (loadingImage.abort) {
    // FileReader instance, stop the file reading process:
    loadingImage.abort()
  } else {
    // HTMLImageElement element, cancel the original image request by changing
    // the target source to the data URL of a 1x1 pixel transparent image GIF:
    loadingImage.src =
      'data:image/gif;base64,' +
      'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  }
}

var loadingImage = loadImage(
  'https://example.org/image.png',
  function (img) {
    document.body.appendChild(img)
  },
  { maxWidth: 600 }
)

if (loadingImage) {
  // Unset event handling for the loading image:
  loadingImage.onload = loadingImage.onerror = null

  // Cancel image loading process:
  if (loadingImage.abort) {
    // FileReader instance, stop the file reading process:
    loadingImage.abort()
  } else {
    // HTMLImageElement element, cancel the original image request by changing
    // the target source to the data URL of a 1x1 pixel transparent image GIF:
    loadingImage.src =
      'data:image/gif;base64,' +
      'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  }
}

bawah

Margin bawah sub-persegi panjang gambar sumber
Default ke

var loadingImage = loadImage(
  'https://example.org/image.png',
  function (img) {
    document.body.appendChild(img)
  },
  { maxWidth: 600 }
)

if (loadingImage) {
  // Unset event handling for the loading image:
  loadingImage.onload = loadingImage.onerror = null

  // Cancel image loading process:
  if (loadingImage.abort) {
    // FileReader instance, stop the file reading process:
    loadingImage.abort()
  } else {
    // HTMLImageElement element, cancel the original image request by changing
    // the target source to the data URL of a 1x1 pixel transparent image GIF:
    loadingImage.src =
      'data:image/gif;base64,' +
      'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  }
}

var loadingImage = loadImage(
  'https://example.org/image.png',
  function (img) {
    document.body.appendChild(img)
  },
  { maxWidth: 600 }
)

if (loadingImage) {
  // Unset event handling for the loading image:
  loadingImage.onload = loadingImage.onerror = null

  // Cancel image loading process:
  if (loadingImage.abort) {
    // FileReader instance, stop the file reading process:
    loadingImage.abort()
  } else {
    // HTMLImageElement element, cancel the original image request by changing
    // the target source to the data URL of a 1x1 pixel transparent image GIF:
    loadingImage.src =
      'data:image/gif;base64,' +
      'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  }
}

kiri

Margin kiri sub-persegi panjang gambar sumber
Default ke

var loadingImage = loadImage(
  'https://example.org/image.png',
  function (img) {
    document.body.appendChild(img)
  },
  { maxWidth: 600 }
)

if (loadingImage) {
  // Unset event handling for the loading image:
  loadingImage.onload = loadingImage.onerror = null

  // Cancel image loading process:
  if (loadingImage.abort) {
    // FileReader instance, stop the file reading process:
    loadingImage.abort()
  } else {
    // HTMLImageElement element, cancel the original image request by changing
    // the target source to the data URL of a 1x1 pixel transparent image GIF:
    loadingImage.src =
      'data:image/gif;base64,' +
      'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  }
}

var loadingImage = loadImage(
  'https://example.org/image.png',
  function (img) {
    document.body.appendChild(img)
  },
  { maxWidth: 600 }
)

if (loadingImage) {
  // Unset event handling for the loading image:
  loadingImage.onload = loadingImage.onerror = null

  // Cancel image loading process:
  if (loadingImage.abort) {
    // FileReader instance, stop the file reading process:
    loadingImage.abort()
  } else {
    // HTMLImageElement element, cancel the original image request by changing
    // the target source to the data URL of a 1x1 pixel transparent image GIF:
    loadingImage.src =
      'data:image/gif;base64,' +
      'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  }
}

berisi

Menskalakan gambar ke atas/bawah untuk memuatnya dalam dimensi maksimal jika disetel ke

loadImage(
  fileOrBlobOrUrl,
  function (img, data) {
    document.body.appendChild(img)
    console.log('Original image width: ', data.originalWidth)
    console.log('Original image height: ', data.originalHeight)
  },
  { maxWidth: 600, meta: true }
)

menutupi

Menskalakan gambar ke atas/bawah untuk menutupi dimensi maksimal dengan dimensi gambar jika diatur ke

loadImage(
  fileOrBlobOrUrl,
  function (img, data) {
    document.body.appendChild(img)
    console.log('Original image width: ', data.originalWidth)
    console.log('Original image height: ', data.originalHeight)
  },
  { maxWidth: 600, meta: true }
)

rasio aspek

Pangkas gambar ke rasio aspek tertentu (mis. g.

loadImage(
  fileOrBlobOrUrl,
  function (img, data) {
    document.body.appendChild(img)
    console.log('Original image width: ', data.originalWidth)
    console.log('Original image height: ', data.originalHeight)
  },
  { maxWidth: 600, meta: true }
)

<script src="js/load-image.all.min.js"></script>

<script src="js/load-image.all.min.js"></script>

pixelRatio

Menentukan rasio piksel kanvas dengan piksel gambar fisik di layar
Harus diatur ke jendela. devicePixelRatio kecuali gambar yang diskalakan tidak ditampilkan di layar
Default ke

<script src="js/load-image.all.min.js"></script>

var loadingImage = loadImage(
  'https://example.org/image.png',
  function (img) {
    document.body.appendChild(img)
  },
  { maxWidth: 600 }
)

if (loadingImage) {
  // Unset event handling for the loading image:
  loadingImage.onload = loadingImage.onerror = null

  // Cancel image loading process:
  if (loadingImage.abort) {
    // FileReader instance, stop the file reading process:
    loadingImage.abort()
  } else {
    // HTMLImageElement element, cancel the original image request by changing
    // the target source to the data URL of a 1x1 pixel transparent image GIF:
    loadingImage.src =
      'data:image/gif;base64,' +
      'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  }
}

Rasio downsampling

Menentukan rasio di mana gambar diturunkan (diperkecil secara bertahap)
Secara default, gambar diturunkan sampelnya dalam satu langkah
Dengan rasio

<script src="js/load-image.all.min.js"></script>

var loadingImage = loadImage(
  'https://example.org/image.png',
  function (img) {
    document.body.appendChild(img)
  },
  { maxWidth: 600 }
)

if (loadingImage) {
  // Unset event handling for the loading image:
  loadingImage.onload = loadingImage.onerror = null

  // Cancel image loading process:
  if (loadingImage.abort) {
    // FileReader instance, stop the file reading process:
    loadingImage.abort()
  } else {
    // HTMLImageElement element, cancel the original image request by changing
    // the target source to the data URL of a 1x1 pixel transparent image GIF:
    loadingImage.src =
      'data:image/gif;base64,' +
      'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  }
}

imageSmoothingEnabled

Jika diatur ke

document.getElementById('file-input').onchange = async function () {
  let data = await loadImage(this.files[0], { maxWidth: 600 })
  document.body.appendChild(data.image)
}

loadImage(
  fileOrBlobOrUrl,
  function (img, data) {
    document.body.appendChild(img)
    console.log('Original image width: ', data.originalWidth)
    console.log('Original image height: ', data.originalHeight)
  },
  { maxWidth: 600, meta: true }
)

var loadingImage = loadImage(
  'https://example.org/image.png',
  function (img) {
    document.body.appendChild(img)
  },
  { maxWidth: 600 }
)

if (loadingImage) {
  // Unset event handling for the loading image:
  loadingImage.onload = loadingImage.onerror = null

  // Cancel image loading process:
  if (loadingImage.abort) {
    // FileReader instance, stop the file reading process:
    loadingImage.abort()
  } else {
    // HTMLImageElement element, cancel the original image request by changing
    // the target source to the data URL of a 1x1 pixel transparent image GIF:
    loadingImage.src =
      'data:image/gif;base64,' +
      'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  }
}

imageSmoothingQuality

Mengatur kualitas perataan gambar
Nilai yang mungkin.

<script src="js/load-image.all.min.js"></script>

<script src="js/load-image.all.min.js"></script>

<script src="js/load-image.all.min.js"></script>

<script src="js/load-image.all.min.js"></script>

var loadingImage = loadImage(
  'https://example.org/image.png',
  function (img) {
    document.body.appendChild(img)
  },
  { maxWidth: 600 }
)

if (loadingImage) {
  // Unset event handling for the loading image:
  loadingImage.onload = loadingImage.onerror = null

  // Cancel image loading process:
  if (loadingImage.abort) {
    // FileReader instance, stop the file reading process:
    loadingImage.abort()
  } else {
    // HTMLImageElement element, cancel the original image request by changing
    // the target source to the data URL of a 1x1 pixel transparent image GIF:
    loadingImage.src =
      'data:image/gif;base64,' +
      'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  }
}

tanaman

Memotong gambar ke batasan

<script src="js/load-image.all.min.js"></script>

<script src="js/load-image.all.min.js"></script>

loadImage(
  fileOrBlobOrUrl,
  function (img, data) {
    document.body.appendChild(img)
    console.log('Original image width: ', data.originalWidth)
    console.log('Original image height: ', data.originalHeight)
  },
  { maxWidth: 600, meta: true }
)

<script src="js/load-image.all.min.js"></script>

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

orientasi

Ubah kanvas sesuai dengan orientasi Exif yang ditentukan, yang dapat berupa

<script src="js/load-image.all.min.js"></script>

<script src="js/load-image.all.min.js"></script>

<script src="js/load-image.all.min.js"></script>

loadImage(
  fileOrBlobOrUrl,
  function (img, data) {
    document.body.appendChild(img)
    console.log('Original image width: ', data.originalWidth)
    console.log('Original image height: ', data.originalHeight)
  },
  { maxWidth: 600, meta: true }
)

Ketika diatur ke

loadImage(
  fileOrBlobOrUrl,
  function (img, data) {
    document.body.appendChild(img)
    console.log('Original image width: ', data.originalWidth)
    console.log('Original image height: ', data.originalHeight)
  },
  { maxWidth: 600, meta: true }
)

Nilai orientasi exif untuk menampilkan huruf F dengan benar

<script src="js/load-image.all.min.js"></script>

Pengaturan

<script src="js/load-image.all.min.js"></script>

loadImage(
  fileOrBlobOrUrl,
  function (img, data) {
    document.body.appendChild(img)
    console.log('Original image width: ', data.originalWidth)
    console.log('Original image height: ', data.originalHeight)
  },
  { maxWidth: 600, meta: true }
)

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

<script src="js/load-image.all.min.js"></script>

Menyetel

<script src="js/load-image.all.min.js"></script>

<script src="js/load-image.all.min.js"></script>

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

<script src="js/load-image.all.min.js"></script>

Menyetel

<script src="js/load-image.all.min.js"></script>

<script src="js/load-image.all.min.js"></script>

<script src="js/load-image.all.min.js"></script>

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

<script src="js/load-image.all.min.js"></script>

meta

Parsing metadata gambar secara otomatis jika disetel ke

loadImage(
  fileOrBlobOrUrl,
  function (img, data) {
    document.body.appendChild(img)
    console.log('Original image width: ', data.originalWidth)
    console.log('Original image height: ', data.originalHeight)
  },
  { maxWidth: 600, meta: true }
)

Jika metadata telah ditemukan, objek data yang diteruskan sebagai argumen kedua ke fungsi callback memiliki properti tambahan (lihat )

Jika file diberikan sebagai URL dan browser mendukung API pengambilan atau Tipe respons XHR

<script src="js/load-image.all.min.js"></script>

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

kanvas

Mengembalikan gambar sebagai elemen kanvas jika disetel ke

loadImage(
  fileOrBlobOrUrl,
  function (img, data) {
    document.body.appendChild(img)
    console.log('Original image width: ', data.originalWidth)
    console.log('Original image height: ', data.originalHeight)
  },
  { maxWidth: 600, meta: true }
)

crossOrigin

Menyetel properti

<script src="js/load-image.all.min.js"></script>

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

noRevoke

Secara default, URL objek yang dibuat dicabut setelah gambar dimuat, kecuali jika opsi ini disetel ke

loadImage(
  fileOrBlobOrUrl,
  function (img, data) {
    document.body.appendChild(img)
    console.log('Original image width: ', data.originalWidth)
    console.log('Original image height: ', data.originalHeight)
  },
  { maxWidth: 600, meta: true }
)

Penguraian metadata

Jika ekstensi Load Image Meta disertakan, dimungkinkan untuk mengurai data meta gambar secara otomatis dengan opsi

<script src="js/load-image.all.min.js"></script>

<script src="js/load-image.all.min.js"></script>

Atau sebagai alternatif melalui

<script src="js/load-image.all.min.js"></script>

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

<script src="js/load-image.all.min.js"></script>

Atau menggunakan API berbasis Janji

<script src="js/load-image.all.min.js"></script>

Ekstensi Metadata menambahkan opsi tambahan yang digunakan untuk metode

<script src="js/load-image.all.min.js"></script>

• <script src="js/load-image.all.min.js"></script>

  _49. Jumlah maksimum byte metadata untuk diuraikan

• <script src="js/load-image.all.min.js"></script>

  50. Nonaktifkan penguraian kepala gambar asli

• <script src="js/load-image.all.min.js"></script>

  _51. Nonaktifkan penguraian metadata (hanya kepala gambar)

Kepala gambar

Gambar JPEG yang diubah ukurannya dapat digabungkan dengan kepala gambar aslinya melalui

<script src="js/load-image.all.min.js"></script>

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

<script src="js/load-image.all.min.js"></script>

Dengan gaya panggilan balik, argumen ketiga harus berupa fungsi

var scaledImage = loadImage.scale(
  img, // img or canvas element
  { maxWidth: 600 }
)

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

<script src="js/load-image.all.min.js"></script>

Atau menggunakan API berbasis Janji seperti ini

<script src="js/load-image.all.min.js"></script>

Tolong dicatat

document.getElementById('file-input').onchange = function () {
  loadImage(
    this.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    { maxWidth: 600 } // Options
  )
}

<script src="js/load-image.all.min.js"></script>

pengurai Exif

Jika Anda menyertakan ekstensi Load Image Exif Parser, argumen yang diteruskan ke panggilan balik untuk

<script src="js/load-image.all.min.js"></script>

• <script src="js/load-image.all.min.js"></script>

  60. Tag Exif yang diurai

• <script src="js/load-image.all.min.js"></script>

  _61. Offset tag Exif yang diurai

• <script src="js/load-image.all.min.js"></script>

  _62. Offset header TIFF (digunakan untuk pointer offset)

• <script src="js/load-image.all.min.js"></script>

  _63. pesanan little endian jika benar, big endian jika salah

Objek

<script src="js/load-image.all.min.js"></script>

<!-- required for all operations -->
<script src="js/load-image.js"></script>

<!-- required for scaling, cropping and as dependency for rotation -->
<script src="js/load-image-scale.js"></script>

<!-- required to parse meta data and to restore the complete image head -->
<script src="js/load-image-meta.js"></script>

<!-- required to parse meta data from images loaded via URL -->
<script src="js/load-image-fetch.js"></script>

<!-- required for rotation and cross-browser image orientation -->
<script src="js/load-image-orientation.js"></script>

<!-- required to parse Exif tags and cross-browser image orientation -->
<script src="js/load-image-exif.js"></script>

<!-- required to display text mappings for Exif tags -->
<script src="js/load-image-exif-map.js"></script>

<!-- required to parse IPTC tags -->
<script src="js/load-image-iptc.js"></script>

<!-- required to display text mappings for IPTC tags -->
<script src="js/load-image-iptc-map.js"></script>

Objek

<script src="js/load-image.all.min.js"></script>

<script src="js/load-image.all.min.js"></script>

<script src="js/load-image.all.min.js"></script>

<!-- required for all operations -->
<script src="js/load-image.js"></script>

<!-- required for scaling, cropping and as dependency for rotation -->
<script src="js/load-image-scale.js"></script>

<!-- required to parse meta data and to restore the complete image head -->
<script src="js/load-image-meta.js"></script>

<!-- required to parse meta data from images loaded via URL -->
<script src="js/load-image-fetch.js"></script>

<!-- required for rotation and cross-browser image orientation -->
<script src="js/load-image-orientation.js"></script>

<!-- required to parse Exif tags and cross-browser image orientation -->
<script src="js/load-image-exif.js"></script>

<!-- required to display text mappings for Exif tags -->
<script src="js/load-image-exif-map.js"></script>

<!-- required to parse IPTC tags -->
<script src="js/load-image-iptc.js"></script>

<!-- required to display text mappings for IPTC tags -->
<script src="js/load-image-iptc-map.js"></script>

Secara default, hanya nama berikut yang dipetakan

• <script src="js/load-image.all.min.js"></script>

  _68

• <script src="js/load-image.all.min.js"></script>

  69 (lihat )

• <script src="js/load-image.all.min.js"></script>

  70 (lihat )

• <script src="js/load-image.all.min.js"></script>

  71 (lihat )

• <script src="js/load-image.all.min.js"></script>

  72 (lihat )

Jika Anda juga menyertakan pustaka Load Image IPTC Map, pemetaan tag tambahan akan tersedia, serta tiga metode tambahan

Bagaimana cara memuat gambar dalam JavaScript?

Bagaimana cara menampilkan gambar dalam JavaScript?

Langkah-langkah. .

Create element in the HTML code..

Add style to element and set display properties to none..

Buat fungsi "show()" JavaScript yang dapat mengakses gambar dan mengubah properti tampilan untuk diblokir

Tambahkan tombol dalam kode HTML yang memanggil fungsi "show()" saat pengguna mengkliknya

Bagaimana cara mendapatkan URL gambar dalam JavaScript?

Apa itu gambar () dalam JavaScript?