wordpress 关闭feed,昆明网站优化推广平台,如何给自己做网站,平台公司信用评级前端可以使用canvas和File API来对图片进行压缩和缩放处理#xff0c;以下是一个示例代码 : 压缩方法compressImg这段代码是实现对图片进行上传前的压缩功能
1. 定义了一个压缩图片的函数 compressImg#xff0c;接受两个参数#xff1a;file表示要压缩的文件#xff0c;q…前端可以使用canvas和File API来对图片进行压缩和缩放处理以下是一个示例代码 : 压缩方法compressImg这段代码是实现对图片进行上传前的压缩功能
1. 定义了一个压缩图片的函数 compressImg接受两个参数file表示要压缩的文件quality表示压缩的质量取值范围为0~1之间。
2. 创建了一个 Promise 对象将压缩后的图片信息作为 Promise 的返回值。
3. 创建了一个 FileReader 对象 reader用于读取文件数据。
4. 通过 reader.onload 事件回调函数当文件加载完成后触发。
5. 在回调函数中创建了一个 Image 对象 image用于加载图片。
6. 使用 image.onload 事件回调函数在图片加载完成后触发。
7. 在 image.onload 回调函数中创建了一个 Canvas 对象 canvas用于绘制图像。
8. 根据给定的最大宽高通过计算缩放后的宽高将图片等比例缩放到合适的尺寸设置了 canvas 的宽度和高度并使用 drawImage 方法将原图绘制在 canvas 上。
9. 使用 canvas.toDataURL() 将 canvas 中的图像转换为 base64 编码的DataURL格式的图像数据并指定图片格式为 image/jpeg质量为 quality。
10. 将 base64 编码的数据URL 转为二进制数据并创建一个 Uint8Array 对象 bufferArray。
11. 使用循环将 base64 编码的数据填充到 bufferArray 中。
12. 创建一个新的 File 对象 miniFile将 bufferArray 作为文件内容文件名与原文件一致文件类型为 image/jpeg。
13. 将压缩前后的图片信息以对象的形式返回并调用 resolve 方法将该对象作为 Promise 的结果。 压缩方法compressImg的调用
1. 通过监听文件选择框的change事件在文件选择后将选择的图片文件传入compressImg函数中进行处理
14. 在成功的回调中创建一个新的img对象并将newFile.afterSrc赋给其src属性这样就能在页面上显示压缩后的图像。此时对压缩后的newFile上传即可。 !DOCTYPE html
htmlheadtitleImage Compression Demo/titlestyle#output {margin-top: 20px;}/style/headbodyinput typefile idinput acceptimage/* /div idoutput/divscript/*** 压缩方法* param {string} file 文件* param {Number} quality 0~1之间quality与文件大小成正比*/function compressImg(file, quality) {return new Promise((resolve) {// 创建 FileReaderconst reader new FileReader();reader.onload ({ target: { result: src } }) {// 创建 img 元素const image new Image();image.onload async () {// 计算缩放后的宽高var maxWidth 500;var maxHeight 500;var width image.width;var height image.height;if (width height) {if (width maxWidth) {height * maxWidth / width;width maxWidth;}} else {if (height maxHeight) {width * maxHeight / height;height maxHeight;}}// 创建 canvas 元素const canvas document.createElement(canvas);// 设置canvas的宽高canvas.width width;canvas.height height;// 绘制缩放后的canvas图像canvas.getContext(2d).drawImage(image, 0, 0, width, height);// 将canvas转换为DataURL格式的图像const canvasURL canvas.toDataURL(image/jpeg, quality);//atob() 对经过 base-64 编码的字符串进行解码const buffer atob(canvasURL.split(,)[1]);let length buffer.length;// ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区// Uint8Array 数组类型表示一个 8 位无符号整型数组创建时内容被初始化为 0。创建完后可以以对象的方式或使用数组下标索引的方式引用数组中的元素。const bufferArray new Uint8Array(new ArrayBuffer(length));while (length--) {bufferArray[length] buffer.charCodeAt(length);}const miniFile new File([bufferArray], file.name, {type: image/jpeg,});resolve({file: miniFile,origin: file,beforeSrc: src,afterSrc: canvasURL,beforeKB: Number((file.size / 1024).toFixed(2)),afterKB: Number((miniFile.size / 1024).toFixed(2)),});};image.src src;};reader.readAsDataURL(file);});}var input document.getElementById(input);input.addEventListener(change, function (event) {var file event.target.files[0];compressImg(file, 0.5).then((newFile) {console.log(newFile, newFile); // 将新的newFile上传即可var newImg new Image(); // 创建新的图像对象newImg.src newFile.afterSrc;// 在页面上显示缩放后的图像var output document.getElementById(output);output.innerHTML ;output.appendChild(newImg);});});/script/body
/html
