重庆有线4001_有限责任公司股权转让_西安网站seo哪家公司好_百度竞价代运营公司

问题：需要在上传图片前压缩图片，但是uni.compressImage（）不支持h5

解决方法：使用canvas降低图片质量

核心代码：

 // 创建一个 img 元素来加载图片const img = new Image()img.src = imagePath// 创建 canvas 元素const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')// 设置 canvas 的宽高为压缩后的图片宽高const maxWidth = 800 // 最大宽度const maxHeight = 800 // 最大高度let width = img.widthlet height = img.height// 根据最大宽高比例调整图片尺寸if (width > height) {if (width > maxWidth) {height = height * (maxWidth / width)width = maxWidth}} else {if (height > maxHeight) {width = width * (maxHeight / height)height = maxHeight}}// 设置 canvas 尺寸canvas.width = widthcanvas.height = height// 绘制压缩后的图片到 canvas 上ctx.drawImage(img, 0, 0, width, height)// 调整图片质量的函数，直到大小小于 500KBfunction compressImage(quality) {const compressedImage = canvas.toDataURL('image/jpeg', quality) // 质量控制const size = (compressedImage.length * 3) / 4 / 1024 // 计算压缩后的大小，单位为 KBif (size > 500 && quality > 0.1) {// 如果图片大于500KB，降低质量重新压缩return compressImage(quality - 0.05)} else {// 如果图片小于500KB，或者达到最低质量，返回结果return compressedImage}}const compressedImage = compressImage(0.8) // 初始质量为 0.8

完整代码：

function fromAlbum() {uni.chooseImage({count: 1, // 默认选择 1 张图片sizeType: ['original', 'compressed'], // 选择原图或压缩图success: function (res) {uni.setStorage({key: 'tongueData',data: '',})tongueImageSrc.value = ''const imagePath = res.tempFilePaths[0] // 获取选中的图片路径// 创建一个 img 元素来加载图片const img = new Image()img.src = imagePathimg.onload = function () {// 创建 canvas 元素const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')// 设置 canvas 的宽高为压缩后的图片宽高const maxWidth = 800 // 最大宽度const maxHeight = 800 // 最大高度let width = img.widthlet height = img.height// 根据最大宽高比例调整图片尺寸if (width > height) {if (width > maxWidth) {height = height * (maxWidth / width)width = maxWidth}} else {if (height > maxHeight) {width = width * (maxHeight / height)height = maxHeight}}// 设置 canvas 尺寸canvas.width = widthcanvas.height = height// 绘制压缩后的图片到 canvas 上ctx.drawImage(img, 0, 0, width, height)// 调整图片质量的函数，直到大小小于 500KBfunction compressImage(quality) {const compressedImage = canvas.toDataURL('image/jpeg', quality) // 质量控制const size = (compressedImage.length * 3) / 4 / 1024 // 计算压缩后的大小，单位为 KBif (size > 500 && quality > 0.1) {// 如果图片大于500KB，降低质量重新压缩return compressImage(quality - 0.05)} else {// 如果图片小于500KB，或者达到最低质量，返回结果return compressedImage}}const compressedImage = compressImage(0.8) // 初始质量为 0.8// 上传压缩后的图片uni.uploadFile({url: ,//填自己的路径filePath: compressedImage, // 上传压缩后的图片name: 'file',success: async (uploadFileRes) => {const { code, data, msg } = JSON.parse(uploadFileRes.data) || {}if (code === 0 && data && data.local_path) {console.log('上传图片成功')} else {console.log('上传图片失败')}},complete: () => {console.log('完成')},})}},})
}