ຕົວຕັດຮູບ ຟຣີ

ມັນເຮັດວຽກແນວໃດ

ການຕັດຮູບເກີດຂຶ້ນທັງໝົດພາຍໃນບຣາວເຊີຂອງທ່ານໂດຍໃຊ້ HTML5 Canvas API — ບໍ່ມີການອັບໂຫຼດ, ບໍ່ມີເຊີບເວີ. ທ່ານລາກເລືອກພື້ນທີ່ໂດຍກົງເທິງອົງປະກອບ canvas, ແລະ ເມື່ອທ່ານນຳໃຊ້ການຕັດ, ເອັນຈິນສະແດງຜົນ 2D ທີ່ມີໃນຕົວບຣາວເຊີຈະອ່ານສະເພາະ pixel ທີ່ເລືອກ ແລະ ເຂົ້າລະຫັດພວກມັນໃໝ່ເປັນ JPEG, PNG, ຫຼື WebP.

1. 1
   ຮູບພາບຖືກໂຫຼດເຂົ້າໜ່ວຍຄວາມຈຳ

   ໄຟລ໌ຂອງທ່ານຖືກອ່ານດ້ວຍ URL.createObjectURL(), ເຊິ່ງມອບໃຫ້ບຣາວເຊີ URL blob ໃນເຄື່ອງ. HTMLImageElement ຖອດລະຫັດໄຟລ໌ທັງໝົດພາຍໃນແທັບບຣາວເຊີ — ໄບຕ໌ຮູບພາບບໍ່ອອກຈາກອຸປະກອນຂອງທ່ານເລີຍ.
2. 2
   Pointer Events ຂັບເຄື່ອນການເລືອກຕັດຮູບ

   Pointer Events API ຂອງບຣາວເຊີ (ເຊິ່ງລວມການປ້ອນຂໍ້ມູນຈາກເມົາສ໌, ສຳຜັດ, ແລະ ປາກກາ) ຕິດຕາມການລາກເທິງ canvas overlay. ການກົດນອກການເລືອກຈະເລີ່ມສີ່ຫຼ່ຽມໃໝ່; ການກົດພາຍໃນຈະຍ້າຍມັນ; ການກົດໃກ້ມູມລຸ່ມຂວາຈະປັບຂະໜາດມັນ. ຮູບແບບອັດຕາສ່ວນທີ່ຕັ້ງໄວ້ລ່ວງໜ້າ (1:1, 16:9, 4:3, ອື່ນໆ) ຄວບຄຸມຮູບຮ່າງໃນລະຫວ່າງການລາກ.
3. 3
   Canvas ແຕ້ມຕົວຢ່າງແບບສົດ

   ທຸກຄັ້ງທີ່ການຕັດປ່ຽນແປງ, ບໍລິບົດ Canvas 2D ຈະແຕ້ມຮູບໃໝ່, ນຳໃຊ້ overlay ສີເຂັ້ມນອກການເລືອກ, ລ້າງພື້ນທີ່ຕັດເພື່ອສະແດງຮູບຕົ້ນສະບັບຄວາມລະອຽດເຕັມ, ແລະ ວາງກຣິດກົດເກນສາມສ່ວນ ແລະ ບ່ອນຈັບປັບຂະໜາດສີຟ້າແກມຂຽວ.
4. 4
   toBlob() ເຂົ້າລະຫັດ ແລະ ສົ່ງມອບຜົນລັບ

   ເມື່ອທ່ານກົດຕັດ, canvas ນອກໜ້າຈໍໃໝ່ຖືກສ້າງຂຶ້ນຕາມຂະໜາດຕັດພໍດີ. ctx.drawImage() ຄັດລອກສະເພາະສີ່ຫຼ່ຽມທີ່ເລືອກ, ແລະ canvas.toBlob() ເຂົ້າລະຫັດຜົນລັບໂດຍໃຊ້ຕົວເຂົ້າລະຫັດ JPEG, PNG, ຫຼື WebP ພື້ນເມືອງຂອງບຣາວເຊີໃນລະດັບຄຸນນະພາບທີ່ທ່ານເລືອກ. ຜົນລັບຖືກສົ່ງກັບເປັນ URL blob ໃນເຄື່ອງສຳລັບການດາວໂຫຼດ.

ເຄື່ອງມືທີ່ກ່ຽວຂ້ອງ