uniappH5图片压缩上传

最新推荐文章于 2024-04-17 09:38:17 发布
最新推荐文章于 2024-04-17 09:38:17 发布
阅读量753 收藏 1
点赞数
分类专栏： uniapp 文章标签： html5 javascript uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chb19991118/article/details/119596522
版权

uniappH5图片压缩上传

此篇文章只供自己参考 我只是代码的搬运工

1.uniapp插件市场中的压缩插件

转载自uniapp插件市场

2.将压缩完返回的base64文件转为临时文件的js文件（可根据项目要求是否需要，不需要的话可跳过此步骤）

转载自uniapp插件市场

具体代码如下：
压缩图片组件代码
<template>
	<view class="image-compress-container">
		<!-- #ifndef H5 -->
			<canvas :style="{width: W + 'px', height: H + 'px', visibility: 'hidden'}" class="canvas" canvas-id="canvas"></canvas>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data () {
			return {
				W: '',
				H: '',
				canvas: null,
				ctx: null,
				maxW: 1024,
				maxH: 1024,
				quality: 0.8,
				base64: false,
				showLoading: '正在压缩',
				mask: true
			}
		},
		methods: {
			async compress (args, options = {}) {
				return new Promise(async (resolve, reject) => {
					let files;
					if (arguments[0].tempFiles || arguments[0].tempFilePaths) {
						files = arguments[0].tempFilePaths || arguments[0].tempFiles;
					};
					if (arguments[0].files) {
						files = arguments[0].files;
					}
					if (!files instanceof Array) {
						reject('数据格式错误');
					}
					if (!files.length) {
						reject('数据不能为空');
					}
					this.maxW = options.maxW || 1024;
					this.maxH = options.maxH || 1024;
					this.quality = options.quality || 0.8;
					this.base64 = options.base64 || false;
					this.showLoading = options.showLoading === true ? '正在压缩' : typeof options.showLoading === 'string' ? options.showLoading : false;
					this.mask = options.mask || true;
					if (this.showLoading) {
						uni.showLoading({
							title: this.showLoading,
							mask: this.mask
						})
					}
					try {
						const result = await this.convertImageToBase64(files);
						resolve(result);
						uni.hideLoading();
					} catch (error) {
						reject(error);
						uni.hideLoading();
					}
				})
			},
			toBase64H5 (file) {
				return new Promise((resolve, reject) => {
					let result = [];
					for (let i = 0; i < file.length; i++) {
						let reader = new FileReader();
						let base64Result;
						reader.addEventListener('load', (e) => {
							base64Result = reader.result || e.target.result;
							let filename = file[i].name.slice(0, file[i].name.lastIndexOf('.'));
							result.push({base64: base64Result, filename});
						    reader = null;
							if (result.length === file.length) {
								resolve(result);
							}
						});
						reader.readAsDataURL(file[i]);
					}
				})
			},
			compressResultH5 (base64Item) {
				return new Promise((resolve, reject) => {
					let maxW = this.maxW;
					let maxH = this.maxH;
					let ratio, needCompress = false;
					let image = new Image();
					image.src = base64Item.base64;
					image.addEventListener('load', () => {
						if (image.naturalWidth > maxW) {
							needCompress = true;
							ratio = image.naturalWidth / maxW;
							maxH = image.naturalHeight / ratio;
						}
						if (image.naturalHeight > maxH) {
							needCompress = true;
							ratio = image.naturalHeight / maxH;
							maxW = image.naturalWidth / ratio;
						}
						if (!needCompress) {
							maxW = image.naturalWidth;
							maxH = image.naturalWidth;
						}
						if (!this.canvas) {
							this.canvas = document.createElement('canvas');
						}
						this.canvas.width = maxW;
						this.canvas.height = maxH;
						const ctx = this.canvas.getContext('2d');
						ctx.clearRect(0, 0, maxW, maxH);
						ctx.drawImage(image, 0, 0, maxW, maxH);
						const compressImg = this.canvas.toDataURL('image/jpeg', this.quality);
						let file = this._dataURLtoFile(compressImg, base64Item.filename);
						if (this.base64) {
							resolve({base64: compressImg, file});
						} else {
							resolve({file});
						}
						image = null;
						// ratio: base64Item.base64.length / compressImg.length
					})
				})
			},
			compressImageH5 (base64Result) {
				let result = [];
				return new Promise(async (resolve, reject) => {
					for (let i = 0; i < base64Result.length; i++) {
						let res = await this.compressResultH5(base64Result[i]);
						result.push(res);
						if (result.length === base64Result.length) {
							resolve(result);
							this.canvas = null;
						}
					}
				})
			},
			async convertImageToBase64 (files) {
				// #ifdef H5
					if (typeof files[0] === 'object') {
						let result = await this.toBase64H5(files);
						return await this.compressImageH5(result);
					}
					if (typeof files[0] === 'string') {
						let result = files.map(item => {
							return {
								base64: item
							}
						});
						return await this.compressImageH5(result);
					}
					return [];
				// #endif
				
				// #ifndef H5
					if (typeof files[0] === 'string') {
						const result = await this.getImgInfoWX(files);
						return await this.compressImageWX(result);
					}
					if (typeof files[0] === 'object') {
						files = files.map(item => {
							return item.path
						});
						const result = await this.getImgInfoWX(files);
						return await this.compressImageWX(result);
					}
					return [];
				// #endif
				return [];
			},
			getImgInfoWX (tempFilePaths) {
				let result = [];
				return new Promise((resolve, reject) => {
					for (let i = 0; i < tempFilePaths.length; i++) {
						uni.getImageInfo({
						    src: tempFilePaths[i],
						    success: (image) => {
								result.push({tempFilePaths: tempFilePaths[i], image});
								if (result.length === tempFilePaths.length) {
									resolve(result);
								}
						    }
						});
					}
				})
			},
			compressResultWX (tempFilePaths) {
				return new Promise((resolve, reject) => {
					let maxW = this.maxW;
					let maxH = this.maxH;
					let ratio, needCompress = false;
					tempFilePaths.image.width = Number(tempFilePaths.image.width);
					tempFilePaths.image.height = Number(tempFilePaths.image.height);
					if (tempFilePaths.image.width > maxW) {
						needCompress = true;
						ratio = tempFilePaths.image.width / maxW;
						maxH = tempFilePaths.image.height / ratio;
					}
					if (tempFilePaths.image.height > maxH) {
						needCompress = true;
						ratio = tempFilePaths.image.height / maxH;
						maxW = tempFilePaths.image.width / ratio;
					}
					if (!needCompress) {
						maxW = tempFilePaths.image.width;
						maxH = tempFilePaths.image.height;
					}
					this.W = maxW;
					this.H = maxH;
					if (!this.ctx) {
						this.ctx = uni.createCanvasContext('canvas', this);
					}
					this.ctx.clearRect(0, 0, this.W, this.H);
					this.ctx.drawImage(tempFilePaths.tempFilePaths, 0, 0, maxW, maxH);
					setTimeout(()=>{
						this.ctx.draw(false, () => {
							uni.canvasToTempFilePath({
							  x: 0,
							  y: 0,
							  width: this.W,
							  height: this.H,
							  destWidth: this.W,
							  destHeight: this.H,
							  canvasId: 'canvas',
							  quality: this.quality,
							  success: (res) => {
								let file = res.tempFilePath;
								let base64 = uni.getFileSystemManager().readFileSync(file, 'base64');
								base64 = `data:image/jpeg;base64,${base64}`
								if (this.base64) {
									resolve({file, base64});
								} else {
									resolve({file});
								}
							  }
							}, this)
						});
					},1500)
				})
			},
			compressImageWX (tempFilePaths) {
				let result = [];
				return new Promise(async (resolve, reject) => {
					for (let i = 0; i < tempFilePaths.length; i++) {
						let res = await this.compressResultWX(tempFilePaths[i]);
						result.push(res);
						if (result.length === tempFilePaths.length) {
							resolve(result);
							this.ctx = null;
						}
					}
				})
			},
			_dataURLtoFile (dataurl, filename) {
			  let arr = dataurl.split(',');
			  let mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
			  while(n--){
			      u8arr[n] = bstr.charCodeAt(n);
			  }
			  return new File([u8arr], filename, {type:mime});
			} 
		}
	}
</script>

<style scoped>
	.image-compress-container {
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
		position: absolute;
		z-index: -100000;
	}
</style>
base64文件转为临时文件的js文件(也可以使用npm下载跳过这一步)
function getLocalFilePath(path) {
    if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) {
        return path
    }
    if (path.indexOf('file://') === 0) {
        return path
    }
    if (path.indexOf('/storage/emulated/0/') === 0) {
        return path
    }
    if (path.indexOf('/') === 0) {
        var localFilePath = plus.io.convertAbsoluteFileSystem(path)
        if (localFilePath !== path) {
            return localFilePath
        } else {
            path = path.substr(1)
        }
    }
    return '_www/' + path
}

function dataUrlToBase64(str) {
    var array = str.split(',')
    return array[array.length - 1]
}

var index = 0
function getNewFileId() {
    return Date.now() + String(index++)
}

function biggerThan(v1, v2) {
    var v1Array = v1.split('.')
    var v2Array = v2.split('.')
    var update = false
    for (var index = 0; index < v2Array.length; index++) {
        var diff = v1Array[index] - v2Array[index]
        if (diff !== 0) {
            update = diff > 0
            break
        }
    }
    return update
}

export function pathToBase64(path) {
    return new Promise(function(resolve, reject) {
        if (typeof window === 'object' && 'document' in window) {
            if (typeof FileReader === 'function') {
                var xhr = new XMLHttpRequest()
                xhr.open('GET', path, true)
                xhr.responseType = 'blob'
                xhr.onload = function() {
                    if (this.status === 200) {
                        let fileReader = new FileReader()
                        fileReader.onload = function(e) {
                            resolve(e.target.result)
                        }
                        fileReader.onerror = reject
                        fileReader.readAsDataURL(this.response)
                    }
                }
                xhr.onerror = reject
                xhr.send()
                return
            }
            var canvas = document.createElement('canvas')
            var c2x = canvas.getContext('2d')
            var img = new Image
            img.onload = function() {
                canvas.width = img.width
                canvas.height = img.height
                c2x.drawImage(img, 0, 0)
                resolve(canvas.toDataURL())
                canvas.height = canvas.width = 0
            }
            img.onerror = reject
            img.src = path
            return
        }
        if (typeof plus === 'object') {
            plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
                entry.file(function(file) {
                    var fileReader = new plus.io.FileReader()
                    fileReader.onload = function(data) {
                        resolve(data.target.result)
                    }
                    fileReader.onerror = function(error) {
                        reject(error)
                    }
                    fileReader.readAsDataURL(file)
                }, function(error) {
                    reject(error)
                })
            }, function(error) {
                reject(error)
            })
            return
        }
        if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
            wx.getFileSystemManager().readFile({
                filePath: path,
                encoding: 'base64',
                success: function(res) {
                    resolve('data:image/png;base64,' + res.data)
                },
                fail: function(error) {
                    reject(error)
                }
            })
            return
        }
        reject(new Error('not support'))
    })
}

export function base64ToPath(base64) {
    return new Promise(function(resolve, reject) {
        if (typeof window === 'object' && 'document' in window) {
            base64 = base64.split(',')
            var type = base64[0].match(/:(.*?);/)[1]
            var str = atob(base64[1])
            var n = str.length
            var array = new Uint8Array(n)
            while (n--) {
                array[n] = str.charCodeAt(n)
            }
            return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))
        }
        var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/)
        if (extName) {
            extName = extName[1]
        } else {
            reject(new Error('base64 error'))
        }
        var fileName = getNewFileId() + '.' + extName
        if (typeof plus === 'object') {
            var basePath = '_doc'
            var dirPath = 'uniapp_temp'
            var filePath = basePath + '/' + dirPath + '/' + fileName
            if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime.innerVersion)) {
                plus.io.resolveLocalFileSystemURL(basePath, function(entry) {
                    entry.getDirectory(dirPath, {
                        create: true,
                        exclusive: false,
                    }, function(entry) {
                        entry.getFile(fileName, {
                            create: true,
                            exclusive: false,
                        }, function(entry) {
                            entry.createWriter(function(writer) {
                                writer.onwrite = function() {
                                    resolve(filePath)
                                }
                                writer.onerror = reject
                                writer.seek(0)
                                writer.writeAsBinary(dataUrlToBase64(base64))
                            }, reject)
                        }, reject)
                    }, reject)
                }, reject)
                return
            }
            var bitmap = new plus.nativeObj.Bitmap(fileName)
            bitmap.loadBase64Data(base64, function() {
                bitmap.save(filePath, {}, function() {
                    bitmap.clear()
                    resolve(filePath)
                }, function(error) {
                    bitmap.clear()
                    reject(error)
                })
            }, function(error) {
                bitmap.clear()
                reject(error)
            })
            return
        }
        if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
            var filePath = wx.env.USER_DATA_PATH + '/' + fileName
            wx.getFileSystemManager().writeFile({
                filePath: filePath,
                data: dataUrlToBase64(base64),
                encoding: 'base64',
                success: function() {
                    resolve(filePath)
                },
                fail: function(error) {
                    reject(error)
                }
            })
            return
        }
        reject(new Error('not support'))
    })
}
页面中使用：
<template>
	<view>
		<view  @click="shoot">上传</view>
		<x-compress ref="xCompress"></x-compress> // 放到template里就可以 随便放一个地方
	</view>
</template>
<script>
	import xCompress from '压缩图片组件路径.vue';
	import { pathToBase64, base64ToPath } from 'base64文件转为临时文件路径.js'
	//npm下载方式  
	//npm i image-tools --save
	//import { pathToBase64, base64ToPath } from 'image-tools'
	export default {
		data() {
			return {
			}
		},
		methods: {
			// 点击上传
			shoot() {
				uni.chooseImage({
					sourceType: ['camera','album'],
					count : 1,
					success: async (res) => {
						// console.log('压缩前图片体积', res.tempFiles[0].size);
						try {
							// 调用组件的compress方法开始压缩
							let result = await this.$refs.xCompress.compress(res, {
								base64: true, // 是否也返回base64格式，默认false，既不返回base64格式图片数据，反之亦然
								maxW: 1024 , // 当图片宽度超过1024大小时最大为1024（高度也会按比例缩放），默认也是1024
								maxH: 1024, //  当图片高度超过1024大小时最大为1024（宽度也会按比例缩放），默认也是1024
								quality: 0.8, // 压缩质量（0-1），默认为0.8，值越小压缩质量越大
								showLoading: true, // 是否显示loading提示，也可以传入一个字符串（相当于loading时的title），默认为true，
								mask: true // 当showLoading为true时，是否显示遮罩层，默认为true
							});
							// console.log('result', result);
							// 调用组件的base64ToPath方法转为临时路径
							base64ToPath(result[0].base64)
							  .then(path => {
							   	console.log(path)  // 最终图片
							  })
							  .catch(error => {
							    console.error(error)
							  })
						} catch (error) {
							console.log('error', error);
						}
					}
				})
			},
		}
	}
</script>
New个对象.
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
h5 图片压缩上传
10-27
h5本地图片压缩后，编码为base64 ，id为smallPicBase64中的内容上传到服务端保存为图片即可，兼容各种浏览器
Android 测试、数据存储与访问、XML解析与生成
qq_20967339的博客
04-09 2198
1.android测试 1.黑盒测试: 是以用户的角度，从输入数据与输出数据的对应关系出发进行测试的。 2. 白盒测试: 又称结构测试、透明盒测试、逻辑驱动测试或基于代码的测试。 3.单元测试: 又称模块测试，是开发者编写的一小段代码，用于检验被测代码的一个很小的、很明确的功能是否正确。 4.功能测试: 根据产品特性、操作描述和用户方案，测试一个产品的
uniapp --- 实现图片压缩（兼容H5）
最新发布
每天都要努力学习哦~~
04-17 1178
Canvas 是 HTML5 提供的一个用于在网页上绘制图形的元素，它可以实现图片压缩的功能。而结和UnoApp是一种基于Canvas的图形编辑工具库，它提供了丰富的API和功能，可以帮助开发者在网页上实现各种图形编辑和处理操作。实现图片压缩的原理在结和UnoApp中也是类似的，主要是通过Canvas的绘图功能来重新绘制图片并调整尺寸和质量。
7.使用api读取文件路径getCacheDir()、getFilesDir()、getExternalFilesDir()、getExternalCacheDir()
augfun的博客
01-12 3308
getCacheDir()方法用于获取/data/data/&lt;application package&gt;/cache目录 getFilesDir()方法用于获取/data/data/&lt;application package&gt;/files目录 应用程序在运行的过程中如果需要向手机上保存数据，一般是把数据保存在SDcard中的。 大部分应用是直接在SDCard的根目录下创建一...
uniapp压缩图片H5端
qq_48662476的博客
03-03 343
uniapp压缩图片H5端
uniapp 视频压缩插件 Ba-VideoCompressor
三杯五岳
09-27 1682
Ba-VideoCompressor 是一款体积较小的uniapp视频压缩插件，附带简单的视频剪辑功能。
uniapp - 超详细 H5 网站图片压缩功能，图像上传前进行压缩降低大小并上传到服务器完整示例源码（附带 uview 组件库 u-upload 上传组件与该图片压缩插件 “搭配组合“ 使用教程）
王佳斌
05-06 4856
uniapp 图片图像压缩插件，uniapp uview upload 压缩图片，uniapp如何对图片进行压缩减小体积，uniapp上传图片太慢有什么办法能压缩一下吗，uniapp h5上传前压缩图片降低大小，uniapp中如何压缩图片，uniapp图像上传前如何进行降低质量缩小文件大小，uniapp uview Upload 上传组件怎么在H5网页上图片压缩，uview 上传组件怎么压缩降低图片大小，uniapp图像压缩示例代码，uniapp 照片相片怎么进行上传前的压缩操作，uniapp uview组
uni-app h5页面图片压缩
qq_45580353的博客
06-14 3516
前端图片压缩，留下笔记
uni-app 压缩图片（app&H5）
乔的博客
08-14 559
【代码】uni-app 压缩图片（app&H5）
H5图片压缩与上传实例
08-30
主要为大家详细介绍了H5图片压缩与上传的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
深入研究HTML5实现图片压缩上传功能
09-28
下面小编就为大家带来一篇深入研究HTML5实现图片压缩上传功能。小编觉得挺不错的，现在分享给大家。也给大家一个参考，一起跟随小编过来看看吧
H5图片压缩与上传
01-17
大体的思路是将图片抽样显示在canvas上，然后用通过canvas.toDataURL方法得到base64字符串来实现压缩。比如在input元素触发change事件之后，读取里面的文件进行操作
HTML5图片压缩上传
04-13
在前端HTML页面上把图片压缩上传，支持安卓和iOS，共勉。
uniapp视频压缩踩坑记录
ㄏ、Forgetˊ的博客
09-09 4785
关于本文中提及的直接用压缩视频失败的问题，在前段时间已反馈给官方，而关于文末的压缩规则制定，是根据博主自身的需求出发考虑的，各位有需要可以参照着修修改改（不过这里面也有坑！如码率过高也会导致压缩失败）每踩一个坑，都是一个成长的脚印，在官方对这些BUG问题无作为无反馈的情况下，只能硬着头皮找出路，明知山有虎，偏向虎山行！
uniapp 之 多端实现图片压缩（含H5实现）
ZhuangWei的博客
07-06 2483
封装的这个方法，只是将图片地址返回了，也可以根据具体的实际场景返回不同的数据。文档平台差异说明已标出：官网提供的api。，然后单独处理一下H5的图片压缩即可。平台，其余平台都支持，所以我们利用。里面封装一下该方法，方便调用。
uniApp H5项目中的压缩图片
qq_39598092的博客
01-19 4771
子组件：选择相册还是拍照 并对相片进行压缩 成功之后把路径通过sFn方法传给父级，父级通过fFN方法走借口，对头像进行修改 <view class="main"> <view class="item" @tap="albumPhoto"> <text>从手机相册选择</text&g...
uni-app小程序实现视频压缩及上传
DOM曼珠沙华的博客
05-13 5159
下面两张图是中的第一张图是选择视频进行上传，第二张图是视频上传后的展示操作 这里是有完成选择视频上传压缩，展示 选择视频： 上传视频后： ...
uniapp在h5环境压缩图片
qiuqiang748的博客
03-13 1722
uniapp在h5环境如何对上传图片进行压缩，2MB能够压缩到50KB~500KB区间
【uni-app】小程序与H5压缩图片上传
徐海东的博客
05-12 4718
目录 场景:上传图片过大导致接口响应时间过长 方法：上传前进行图片压缩 微信小程序压缩方法 H5压缩图片方法 简单使用场景 场景:上传图片过大导致接口响应时间过长 方法：上传前进行图片压缩 话不多说直接贴代码 我们先定义一个工具文件，类如utils.js 微信小程序压缩方法 /** * 递归压缩微信图片 * @param url 图片路径 * @param count 已递归次数（有可能压缩不到想要的大小，所以得限制次数） * @param isReturnBa.
uniapp h5图片压缩上传 缺少文件后缀
08-09
在uniapp中进行H5图片压缩上传时，如果缺少文件后缀，可能会导致上传失败或者无法正确显示图片。这是因为文件后缀在H5中起到了区分文件类型的作用，缺少后缀会让浏览器无法识别文件的类型。 为了解决这个问题，我们...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值