<input type="file" name="uploadFile" id="fileInput" accept="image/*" class="file" />
document.querySelector('#fileInput').addEventListener('change', fileSelect, false)
function fileSelect(e) {
const file = e.target.files || e.dataTransfer.files
if (file) {
const reader = new FileReader()
if (!checkFile(file[0])) return
reader.readAsDataURL(file[0])
reader.onloadend = async function (event) {
$('#selectImg').get(0).src = event.target.result
e.target.value = ''
const data = await cutImgSize(reader.result)
fileInputRequest(data)
}
}
}
function checkFile(file) {
if (!file.type.match('image.*')) {
alert("画像ファイルを選択してください。")
return false
}
if (file.size > 1024 * 1024 * 2) {
alert("画像サイズが2メガ以上の場合、圧縮してからアップロードしてください。")
return false
}
return true
}
function cutImgSize(result) {
const tempImg = new Image()
tempImg.src = result
return new Promise(resolve => {
tempImg.onload = function () {
const MAX_WIDTH = 200
const MAX_HEIGHT = 200
let tempW = tempImg.width
let tempH = tempImg.height
if (tempW > tempH) {
if (tempW > MAX_WIDTH) {
tempH *= MAX_WIDTH / tempW
tempW = MAX_WIDTH
}
} else {
if (tempH > MAX_HEIGHT) {
tempW *= MAX_HEIGHT / tempH
tempH = MAX_HEIGHT
}
}
const canvas = document.createElement('canvas')
canvas.width = tempW
canvas.height = tempH
const ctx = canvas.getContext("2d")
ctx.drawImage(this, 0, 0, tempW, tempH)
const dataURL = canvas.toDataURL("image/jpeg")
resolve('image=' + dataURL)
}
})
}
function fileInputRequest(data) {
}