コードに直行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"
/>
<title>data_transform</title>
<script>
const appendChild = (ele = document.createElement("div"), title = "") => {
const div = document.createElement("div");
title && (div.innerHTML = `<div>${title}</div>`);
div.appendChild(ele);
return div;
};
const downloadAction = (
data_url = "",
file_name = "file_name",
file_ext = "jpeg"
) => {
const a = document.createElement("a");
a.textContent = "Download";
a.download = `${file_name}.${file_ext}`;
a.href = data_url;
a.click();
};
const DataTransform = {
file2DataUrl: (file, is_blob_url = false) =>
new Promise((res, rej) => {
if (is_blob_url === true) {
res(window.URL.createObjectURL(file));
} else {
const reader = new FileReader();
reader.onload = () => {
res(reader.result, reader);
};
reader.onerror = rej;
reader.readAsDataURL(file);
}
}),
url2Image: (url = "") =>
new Promise((res, rej) => {
const image = new Image();
image.src = url;
image.onload = () => res(image);
image.onerror = rej;
}),
image2Canvas: (
image = document.createElement("img"),
{ width, height, position: { top = 0, left = 0 } = {} } = {}
) => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = width
image.naturalWidth;
canvas.height = height
image.naturalHeight;
ctx.drawImage(image, top, left, canvas.width, canvas.height);
return Promise.resolve(canvas);
},
canvas2DataUrl: (
canvas = document.createElement("canvas"),
{
mime_type = "image/jpeg",
quality = undefined,
is_blob = false
} = {}
) =>
new Promise(res => {
if (is_blob) {
canvas.toBlob(blob => res(blob), mime_type, quality);
} else {
res(canvas.toDataURL(mime_type, quality));
}
}),
dataUrl2Blob: (data_url = "", mime_type = "") => {
const [data_type, data] = data_url.split(",");
const [, mime] = data_type.match(/^data:(.*?);(base64?)/);
const bin_str = atob(data);
const arr = new Uint8Array(data.length).map((v, k) =>
bin_str.charCodeAt(k)
);
return Promise.resolve(new Blob([arr], { type: mime_type
mime }));
}
};
function inputOnChange({ files }) {
DataTransform.file2DataUrl(files[0])
// .then(data_url => {
// alert("オリジナルイメージをダウンロードする");
// downloadAction(data_url);
// return data_url;
// })
.then(DataTransform.url2Image)
.then(DataTransform.image2Canvas)
.then(DataTransform.canvas2DataUrl)
// .then(data_url => {
// alert("canvas2DataUrlイメージをダウンロードする");
// downloadAction(data_url);
// return data_url;
// })
.then(DataTransform.dataUrl2Blob)
.then(DataTransform.file2DataUrl)
// .then(data_url => {
// alert("file2DataUrl Diagramをダウンロードする");
// downloadAction(data_url);
// return data_url;
// })
.then(DataTransform.url2Image)
.then(image => {
document.body.append(appendChild(image, "1 image"));
return image;
})
.catch(console.error);
}
</script>
</head>
<body>
<input type="file" onchange="inputOnChange(this)" />
</body>
</html>再生にはjpegイメージを使用してください。pngは変換後にオリジナルより大きく表示されます。