<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
<title>Document</title>
</head>
<body>
<button id="downloadBtn">文件下载</button>
<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<input type="file" accept="image/*" onchange="loadFile1(event)">
<div id="imgFile">
</div>
<button id="downloadPDF">pdf下载</button>
</body>
<script>
let myBlobParts = ['<html><h2>Hello Semlinker</h2></html>']; // an array consisting of a single DOMString
let myBlob = new Blob(myBlobParts, {type : 'text/html', endings: "transparent"}); // the blob
console.log(myBlob);
console.log(myBlob.size + " bytes size");
// Output: 37 bytes size
console.log(myBlob.type + " is the type");
// Output: text/html is the type
const file = new File(["a".repeat(1000000)], "test.txt");
console.log(file);
const chunkSize = 40000;
const url = "https://httpbin.org/post";
chunkedUpload()
// 分段上传
async function chunkedUpload() {
for (let start = 0; start < file.size; start += chunkSize) {
const chunk = file.slice(start, start + chunkSize + 1);
const fd = new FormData();
fd.append("data", chunk);
console.log(chunk);
// await fetch(url, { method: "post", body: fd }).then((res) =>
// res.text()
// );
}
}
// 文件下载
const download = (fileName, blob) => {
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
link.remove();
URL.revokeObjectURL(link.href);
// 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
};
const downloadBtn = document.querySelector("#downloadBtn");
downloadBtn.addEventListener("click", (event) => {
const fileName = "blob.txt";
const myBlob = new Blob(["一文彻底掌握 Blob Web API"], { type: "text/plain" });
download(fileName, myBlob);
});
const loadFile = function(event) {
const reader = new FileReader();
console.log('reader', reader);
reader.onload = function(){
const output = document.querySelector('#output');
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
// 图片压缩
// Data URL 格式的图片数据，为了进一步减少传输的数据量，我们可以把它转换为 Blob 对象：
function dataUrlToBlob(base64, mimeType) {
let bytes = window.atob(base64.split(",")[1]); // 对经过 base-64 编码的字符串进行解码 btoa进行编码
let ab = new ArrayBuffer(bytes.length); // 用来表示通用的、固定长度的原始二进制数据缓冲区 具有length 和 Uint8Array 和 Int8Array
let ia = new Uint8Array(ab); // 表示一个8位无符号整型数组，创建时内容被初始化为0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。
console.log('ia', ia);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
// console.log(bytes.charCodeAt(i));
}
console.log('ab', ab);
return new Blob([ab], { type: mimeType });
}
function uploadFile(url, blob) {
let formData = new FormData();
let request = new XMLHttpRequest();
formData.append("image", blob);
request.open("POST", url, true);
request.send(formData);
}
// 进行压缩操作利用canvas
const MAX_WIDTH = 800; // 图片最大宽度
function compress(base64, quality, mimeType) {
let canvas = document.createElement("canvas");
let img = document.createElement("img");
document.getElementById('imgFile').appendChild(canvas)
img.crossOrigin = "anonymous";
console.log('img', img);
return new Promise((resolve, reject) => {
img.src = base64;
img.onload = () => {
let targetWidth, targetHeight;
if (img.width > MAX_WIDTH) {
// 按照比例进行缩放
targetWidth = MAX_WIDTH;
targetHeight = (img.height * MAX_WIDTH) / img.width;
} else {
targetWidth = img.width;
targetHeight = img.height;
}
// 设置canvas的宽高
canvas.width = targetWidth;
canvas.height = targetHeight;
let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, targetWidth, targetHeight); // 清除画布
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
let imageData = canvas.toDataURL(mimeType, quality / 100); // 返回压缩后的base64, 设置 类型 质量
console.log('mimeType', mimeType);
console.log('imageData', imageData);
resolve(imageData);
};
});
}
const loadFile1 = function (event) {
const reader = new FileReader();
console.log('reader', reader);
reader.onload = async function () {
// 经过处理后此时的compressedDataURL为压缩后的base64
let compressedDataURL = await compress(
reader.result,
90,
"image/jpeg"
);
let compressedImageBlob = dataUrlToBlob(compressedDataURL, "image/jpeg");
console.log('compressedImageBlob', compressedImageBlob);
uploadFile("https://httpbin.org/post", compressedImageBlob);
};
reader.readAsDataURL(event.target.files[0]);
};
const btn = document.querySelector('#downloadPDF')
function pdfCreate(){
const doc = new jsPDF();
doc.text("Hello semlinker!", 66, 88);
const blob = new Blob([doc.output()], { type: "application/pdf" });
blob.text().then((blobAsText) => {
console.log(blobAsText);
});
doc.save("a4.pdf");
console.log(123);
btn.removeEventListener('click', pdfCreate)
}
// jspdf使用
function generatePdf() {
btn.addEventListener('click', pdfCreate)
}
generatePdf()
</script>
</html>
浙公网安备 33010602011771号