@{
ViewData[
"Title"
] =
"Canvas"
;
}
<h1>Canvas</h1>
<input type=
"file"
id=
"file1"
/>
<input id=
"button1"
type=
"button"
value=
"Upload"
style=
"display:none;"
/>
<br />
<div id=
"msg"
></div>
<canvas id=
"mycanvas"
></canvas>
<div id=
"result"
></div>
@section Scripts {
<script type=
"text/javascript"
>
let fileReader;
let image;
const
maxFileSize = 500000;
const
allowedContentType =
"image/jpeg"
;
const
maxWidth = 500;
const
maxHeight = 500;
let inputFile, uploadButton, msgDiv, myCanvas, resultDiv;
window.addEventListener(
'DOMContentLoaded'
, () => {
inputFile = document.getElementById(
"file1"
);
uploadButton = document.getElementById(
"button1"
);
msgDiv = document.getElementById(
"msg"
);
myCanvas = document.getElementById(
"mycanvas"
);
resultDiv = document.getElementById(
"result"
);
if
(window.File && window.FileReader && window.FileList) {
fileReader =
new
FileReader();
image =
new
Image();
uploadButton.addEventListener(
'click'
, uploadImage);
inputFile.addEventListener(
'change'
, () => {
resultDiv.innerText =
""
;
if
(ClientValidate(inputFile) ==
false
) {
uploadButton.style.display =
"none"
;
myCanvas.style.display =
"none"
;
return
;
}
fileReader.readAsDataURL(inputFile.files[0]);
});
fileReader.onloadend = () => {
image.src = fileReader.result;
};
image.onload = DrawImageOnCanvas;
}
else
{
inputFile.style.display =
"none"
;
myCanvas.style.display =
"none"
;
msgDiv.innerText =
"File API がサポートされていません。"
;
}
});
function ClientValidate(fileUpload) {
msgDiv.innerText =
""
;
if
(fileUpload.files[0] ==
null
) {
msgDiv.innerText =
"ファイルが未選択です。"
;
return
false
;
}
if
(fileUpload.files[0].type != allowedContentType) {
msgDiv.innerText =
"選択されたファイルのタイプが "
+
allowedContentType +
" ではありません。"
;
return
false
;
}
if
(fileUpload.files[0].size > maxFileSize) {
msgDiv.innerText =
"ファイルのサイズが "
+
maxFileSize +
" バイトを超えています。"
;
return
false
;
}
return
true
;
}
function DrawImageOnCanvas() {
const
w = image.width;
const
h = image.height;
let targetW, targetH;
const
context = myCanvas.getContext(
'2d'
);
if
(w <= maxWidth && h <= maxHeight) {
myCanvas.setAttribute(
'width'
, w);
myCanvas.setAttribute(
'height'
, h);
context.drawImage(image, 0, 0);
}
else
if
(w < h) {
targetH = maxHeight;
targetW = Math.floor(w * targetH / h);
myCanvas.setAttribute(
'width'
, targetW);
myCanvas.setAttribute(
'height'
, targetH);
context.drawImage(image, 0, 0, targetW, targetH);
}
else
{
targetW = maxWidth;
targetH = Math.floor(h * targetW / w);
myCanvas.setAttribute(
'width'
, targetW);
myCanvas.setAttribute(
'height'
, targetH);
context.drawImage(image, 0, 0, targetW, targetH);
}
uploadButton.style.display =
"inline-block"
;
myCanvas.style.display =
"block"
;
}
async function uploadImage() {
const
context = myCanvas.getContext(
'2d'
);
const
dataUrl = context.canvas.toDataURL(
"image/jpeg"
);
const
params
= {
method:
"POST"
,
body:
'{"imgBase64":"'
+ dataUrl +
'"}'
,
headers: {
'Content-Type'
:
'application/json'
}
}
const
response = await fetch(
"/api/Canvas"
,
params
);
if
(response.ok) {
const
message = await response.text();
resultDiv.innerText = message
}
else
{
resultDiv.innerText =
"アップロード失敗"
;
}
}
</script>
}