哈尔滨响应式网站建设公司,网站后台程序开发,wordpress变成英文,扁平风网站文章目录 1、canvas实现图片压缩2、其他 1、canvas实现图片压缩 canvas 实现图片压缩#xff0c;主要是使用 canvas 的drawImage 方法 具体思路
拿到用户上传的文件转成base64创建一个 Image#xff0c;主要是获取到这个图片的宽度和高度创建一个 2D 的画布#xff0c;画布… 文章目录 1、canvas实现图片压缩2、其他 1、canvas实现图片压缩 canvas 实现图片压缩主要是使用 canvas 的drawImage 方法 具体思路
拿到用户上传的文件转成base64创建一个 Image主要是获取到这个图片的宽度和高度创建一个 2D 的画布画布的宽高就是 图片的宽高drawImage 渲染图片toDataURL 生成 base64 地址这个方法第二个参数可以设置输出质量 本来图片是 1.4MB, 输出质量是 0.5转化后的大小是 523KB !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyinput typefile name idfilescriptconst fileEl document.getElementById(file);fileEl.onchange function (e) {const file e.target.files[0];const reader new FileReader()reader.onload async function (e) {console.log(原始图片大小, e.target.result);console.log(压缩后的大小, await compressImg(e.target.result));}reader.readAsDataURL(file)function compressImg(base64Data, compressRatio 0.5) {// 目的是为了拿到 图片的宽高方便渲染canvas的时候定义画布大小return new Promise((resolve, reject) {const img new Image()img.src base64Datadocument.body.append(img)img.onload function () {const canvas document.createElement(canvas)const ctx canvas.getContext(2d)canvas.width img.widthcanvas.height img.heightctx.drawImage(img, 0, 0) // 图片裁剪的x裁剪的y宽高const dataURL canvas.toDataURL(image/jpeg, compressRatio) // 第一个参数:文件类型第二个参数输出图片的质量 0-1// console.log(dataURL, dataURL);resolve(dataURL)}})}}/script
/body/html2、其他
图片裁剪可以使用 Sharphttps://sharp.pixelplumbing.com/、Jimphttp://jimp.readthedocs.io/en/latest/图片压缩可以使用 Compressor.js 一般是 可以使用 shape 进行裁剪
