网站建设所用软件,网页版游戏网站,网站建设的基本过程,服装店网页设计网站模板目录
创建组件
在 template 中添加组件
方法说明#xff1a;
compress() 方法参数#xff1a;
progress 方法回调对象属性详细说明#xff1a;
源码示例#xff1a; thank Canvas 是 HTML5 提供的一个用于在网页上绘制图形的元素#xff0c;它可以实现图片压缩的功…目录
创建组件
在 template 中添加组件
方法说明
compress() 方法参数
progress 方法回调对象属性详细说明
源码示例 thank Canvas 是 HTML5 提供的一个用于在网页上绘制图形的元素它可以实现图片压缩的功能。而结和UnoApp是一种基于Canvas的图形编辑工具库它提供了丰富的API和功能可以帮助开发者在网页上实现各种图形编辑和处理操作。
实现图片压缩的原理在结和UnoApp中也是类似的主要是通过Canvas的绘图功能来重新绘制图片并调整尺寸和质量。下面将详细介绍结和UnoApp实现图片压缩的步骤
创建组件
templateview classcompress v-ifcanvasIdcanvas :canvas-idcanvasId :style{ width: canvasSize.width, height: canvasSize.height }/canvas/view
/templatescript
export default {data() {return {pic: ,canvasSize: {width: 0,height: 0},canvasId: };},mounted() {// 创建 canvasIdif (!uni || !uni._helang_compress_canvas) {uni._helang_compress_canvas 1;} else {uni._helang_compress_canvas;}this.canvasId compress-canvas${uni._helang_compress_canvas};},methods: {// 压缩compressFun(params) {return new Promise(async (resolve, reject) {// 等待图片信息let info await this.getImageInfo(params.src).then((info) info).catch(() null);if (!info) {reject(获取图片信息异常);return;}// 设置最大 最小 尺寸const maxSize params.maxSize || 1080;const minSize params.minSize || 640;// 当前图片尺寸let { width, height } info;// 非 H5 平台进行最小尺寸校验// #ifndef H5if (width minSize height minSize) {resolve(params.src);return;}// #endif// 最大尺寸计算//图像的宽度和高度是否超过最大尺寸。如果其中任一维度超过最大尺寸代码将对图像进行调整以使其适应最大尺寸并保持其宽高比。// 这样可以确保图像在调整大小后仍保持原始比例并且不会超过指定的最大尺寸if (width maxSize || height maxSize) {if (width height) {height Math.floor(height / (width / maxSize));width maxSize;} else {width Math.floor(width / (height / maxSize));height maxSize;}}// 设置画布尺寸this.$set(this, canvasSize, {width: ${width}px,height: ${height}px});// Vue.nextTick 回调在 App 有异常则使用 setTimeout 等待DOM更新setTimeout(() {// 创建 canvas 绘图上下文指定 canvasId。在自定义组件下第二个参数传入组件实例this以操作组件内 canvas/ 组件// Tip: 需要指定 canvasId该绘图上下文只作用于对应的 canvas/const ctx uni.createCanvasContext(this.canvasId, this);// 清除画布上在该矩形区域内的内容。xy宽高ctx.clearRect(0, 0, width, height);// 绘制图像到画布。所要绘制的图片资源xy宽高ctx.drawImage(info.path, 0, 0, width, height);// 将之前在绘图上下文中的描述路径、变形、样式画到 canvas 中。// 本次绘制是否接着上一次绘制即reserve参数为false则在本次调用drawCanvas绘制之前native层应先清空画布再继续绘制若reserver参数为true则保留当前画布上的内容本次调用drawCanvas绘制的内容覆盖在上面默认 false// 绘制完成后回调ctx.draw(false, () {// 把当前画布指定区域的内容导出生成指定大小的图片并返回文件路径。在自定义组件下第二个参数传入自定义组件实例以操作组件内 canvas 组件。uni.canvasToTempFilePath({x: 0, //画布x轴起点默认0y: 0, //画布y轴起点默认0width: width, //画布宽度默认为canvas宽度-xheight: height, //画布高度默认为canvas高度-ydestWidth: width, //图片宽度默认为 width * 屏幕像素密度destHeight: height, //输出图片高度默认为 height * 屏幕像素密度canvasId: this.canvasId, //画布标识传入 canvas/ 的 canvas-id支付宝小程序是id、其他平台是canvas-idfileType: params.fileType || png, //目标文件的类型只支持 jpg 或 png。默认为 pngquality: params.quality || 0.9, //图片的质量取值范围为 (0, 1]不在范围内时当作1.0处理success: (res) {// 在H5平台下tempFilePath 为 base64resolve(res.tempFilePath);},fail: (err) {reject(null);}},this);});}, 300);});},// 获取图片信息getImageInfo(src) {return new Promise((resolve, reject) {uni.getImageInfo({src,success: (info) {resolve(info);},fail: (err) {console.log(err, err获取图片信息);reject(null);}});});},// 批量压缩async compress(params) {// 初始化状态变量let [index, done, fail] [0, 0, 0];let paths [];// 处理待压缩图片列表let waitList Array.isArray(params.src) ? params.src : [params.src];// 批量压缩方法let batch async () {while (index waitList.length) {try {const path await next();done;paths.push(path);params.progress?.({ done, fail, count: waitList.length });} catch (error) {fail;params.progress?.({ done, fail, count: waitList.length });}index;}};// 单个图片压缩方法let next () {const currentSrc waitList[index];return this.compressFun({src: currentSrc,maxSize: params.maxSize,fileType: params.fileType,quality: params.quality,minSize: params.minSize});};// 返回Promise并处理结果return new Promise((resolve, reject) {try {batch().then(() {if (typeof params.src string) {resolve(paths[0]);} else {resolve(paths);}}).catch((error) {reject(error);});} catch (error) {reject(error);}});}}
};
/scriptstyle langscss scoped
.compress {position: fixed;width: 12px;height: 12px;overflow: hidden;top: -99999px;left: 0;
}
/style在 script 中引用组件
import helangCompress from ../../components/helang-compress/helang-compress;export default {components: {helangCompress}
}
在 template 中添加组件
helang-compress refhelangCompress/helang-compress方法说明
方法名可传参数必填说明compress()Object是【单张压缩】设置压缩的图片及压缩尺寸和压缩质量参数详情请阅读下方 compress()方法参数
compress() 方法参数
参数名类型必填默认值说明srcString / Array是-待压缩的图片地址由相册选择或拍照获取。注意若src的值为String压缩成功后则返回String若为Array压缩成功后则返回ArraymaxSizeNumber否1080压缩后的最大尺寸fileTypeString否png压缩后的文件类型可选值 jpg、pngqualityNumber否0.9压缩后的质量(仅jpg类型有效原因可自行阅读官方canvas文档)可选值 0 ~ 1值越大越清晰(图片也越大)minSizeNumber否640最小压缩尺寸图片尺寸小于该时值不压缩非H5平台有效。若想忽略该设置可以将该值设置为一个极小的值比如一个负数不能是0 为使插件在 H5 平台统一返回 base64 数据则故意取消 H5 平台对 minSize 的设置。H5平台压缩后的图片路径是 base64 格式有跨平台需求须注意 progress 方法回调对象属性详细说明
参数名类型说明doneNumber已完成压缩的数量failNumber压缩失败的数量countNumber总共需要压缩的数量
源码示例 // 单张压缩
this.$refs.helangCompress.compressFun({src:this.paths[0],maxSize:800,fileType:jpg,quality:0.85,minSize:640 //最小压缩尺寸图片尺寸小于该时值不压缩非H5平台有效。若需要忽略该设置可设置为一个极小的值比如负数。
}).then((res){// 压缩成功回调
}).catch((err){// 压缩失败回调
})// 批量压缩
this.$refs.helangCompress.compress({src:this.paths,maxSize:800,fileType:jpg,quality:0.85,progress:(res){console.log(压缩进度);console.log(res);}
}).then((res){// 压缩成功回调
}).catch((err){// 压缩成功回调
}) thank 图片压缩 - 可以自定义压缩尺寸和压缩质量 - DCloud 插件市场
