【uniapp】压缩图片image-conversion

JS图像转换工具：一键压缩200KB
原创 已于 2022-09-21 14:43:03 修改 · 1.7k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #vue.js #jquery #html5

于 2022-06-24 14:14:07 首次发布
本文介绍了一个名为image-conversion的JavaScript库，它简化了图像大小调整和压缩过程。只需几步，即可实现上传图片并通过API压缩至200KB，适合移动端应用和性能优化。

image-conversion:一个简单易用的JS图像转换工具，可以指定大小以压缩图像
image-conversion.zip下载地址

1. 安装插件：
　　npm i image-conversion --save
在这里插入图片描述
　　
2. 引入
　　const imageConversion = require("@/components/image-conversion");在这里插入图片描述
3. 上传图片（将图像压缩到200kb）

uni.chooseImage({
   
   
	count: 1,
	sizeType
最低0.47元/天 解锁文章
uniapp --- 实现图片压缩（兼容H5）
每天都要努力学习哦~~
04-17 5467
Canvas 是 HTML5 提供的一个用于在网页上绘制图形的元素，它可以实现图片压缩的功能。而结和UnoApp是一种基于Canvas的图形编辑工具库，它提供了丰富的API和功能，可以帮助开发者在网页上实现各种图形编辑和处理操作。实现图片压缩的原理在结和UnoApp中也是类似的，主要是通过Canvas的绘图功能来重新绘制图片并调整尺寸和质量。
uniapp 上传图片时压缩图片
m0_46693606的博客
03-01 3587
uniapp上传图片压缩到200kb
《uni-app 图片处理：上传、预览、压缩、裁剪（兼容多端）》（集成 uni.chooseImage + 第三方压缩插件，解决 App 端图片体积过大问题）
最新发布
qq_59041750的博客
10-23 1352
本文介绍了在uni-app中实现多端兼容的图片处理方案，包括上传、预览、压缩和裁剪四个关键步骤。重点解决App端图片体积过大问题，通过uni.chooseImage实现上传，uni.previewImage进行预览，集成image-tools插件进行压缩（质量可调至70%，体积降至300KB左右），最后使用uni-cropper组件完成裁剪。该方案兼容H5、App和小程序平台，优化了性能并提升了用户体验，提供完整代码示例和注意事项，帮助开发者快速集成到项目中。
uniapp H5端与APP端压缩图片
LI_YUANQI的博客
11-12 3359
首先创建一个compress.js文件（以下是文件中图片压缩方法） /** * APP端图片压缩 * 参数说明： * img 图片url * scale缩放比例 1-100 * callback 回调设置返回值 */ export function translateapp(img, scale, callback) { plus.io.resolveLocalFileSystemURL(img, (entry) => { //通过URL参数获取目录对象或文件对象 en
uniapp之图片压缩
https://shixuebin.gitee.io/hexo-blog/
09-02 798
传入图片地址，返回图片base64内容 function detailImage(path, callback) { let that = this plus.io.resolveLocalFileSystemURL(path, function(entry) { entry.file( function(file) { plus.zip.compressImage( { src: path, dst: path.replace('.
uniapp-image-compress 图片压缩
pengyi123的博客
04-02 2440
在上述代码中，我们首先调用uni.chooseImage选择图片（仅选择一张），然后将选取的图片路径传入uniImageCompress.compress方法进行压缩。方法的第二个参数（0.6）指定了压缩的质量，1表示原质量，0表示最低质量。compress方法返回的是包含压缩后的图片路径的Promise对象。压缩质量是一个介于0和1之间的数字，用于设置压缩后的图片质量。这个值越低，压缩后的图片文件就越小，但图片质量也会越低。是压缩质量参数，表示压缩后的图片质量为原图的60%。
精选资源
image-conversion:一个简单易用的JS图像转换工具，可以指定大小以压缩图像
05-02
图像转换 是一个简单易用的JS图像转换工具，它提供了许多在Image，Canvas，File和dataURL之间... const imageConversion = require ( "image-conversion" ) ; 在ES6中： import * as imageConversion from 'image
精选资源
image-conversion：一个简单易用的JS图像转换工具，可以指定大小以压缩图像
06-24
`image-conversion`是一个专门针对JavaScript环境的图像转换工具，它提供了便捷的接口，允许开发者根据需求调整图像尺寸并进行压缩，以适应各种应用场景。本文将深入探讨`image-conversion`的使用方法、核心功能以及...
vue2上传图片image-conversion压缩
不会写代码的前端
01-17 1635
其实在npm中使用已经说得很明白了，我这里记录一下跟element ui上传组件配合使用。上传前方法中处理压缩逻辑，压缩质量参数，我单独封装了。
image-conversion+canvas图片拼接及压缩
lxy123456780的博客
04-12 686
图片拼接用的是canvas 图片压缩用的是image-conversion插件 引入image-conversion插件 cnpm i image-conversion -S 导入固定拼接的图片 import defaultHeadPng from ‘@/assets/img/normalPic.png’ 拼接图片 js // 生成符合条件的图片实例 filesToInstances(files, callback){ const length = files.length; // 图片路径个数 l.
UniApp 压缩图片
centforever的博客
07-03 433
UniApp 压缩图片
uniapp压缩图片
热门推荐
Change!
02-22 1万+
上传图片前要进行压缩，因为图片过大，服务器会崩。 在uniapp中有uni.compressImage（）压缩图片方法 但是用了这个方法报错：compressImage is not yet implemented 原因很简单，不支持h5，心态炸裂，只好换种方法了，试好好会把好用的方法发布出来的。 ...
uniapp 压缩照片
weixin_42998230的博客
09-30 2507
plus.zip.compressImage({ src: path, //原路径 dst: path, //缩略图路径 overwrite: true, //是否生成新图片 quality: 20, //1-100,1图片最小，100图片最大 width: 'auto', //缩略固定宽 height: 'auto' //缩略固定高 }, (result) => { lists.push({ url: result.target, progress: 0,
uni-app 压缩图片
billershi的博客
07-24 975
支持 H5（浏览器）和非 H5（如小程序、App）两种环境，能批量压缩图片，保证图片不超过指定大小和最长边。
uniapp - 超详细 H5 网站图片压缩功能，图像上传前进行压缩降低大小并上传到服务器完整示例源码（附带 uview 组件库 u-upload 上传组件与该图片压缩插件 “搭配组合“ 使用教程）
🏆 前端领域优质创作者
05-06 1万+
uniapp图片图像压缩插件，uniappuviewupload压缩图片，uniapp如何对图片进行压缩减小体积，uniapp上传图片太慢有什么办法能压缩一下吗，uniapph5上传前压缩图片降低大小，uniapp中如何压缩图片，uniapp图像上传前如何进行降低质量缩小文件大小，uniappuviewUpload上传组件怎么在H5网页上图片压缩，uview上传组件怎么压缩降低图片大小，uniapp图像压缩示例代码，uniapp照片相片怎么进行上传前的压缩操作，uniappuview组
uni-app 压缩图片（app&H5）
乔的博客
08-14 840
【代码】uni-app 压缩图片（app&H5）
Uniapp 压缩图片并上传
weixin_46144929的博客
02-09 1043
1
uni-app （app&H5压缩图片)
weixin_45881304的博客
03-09 1061
【代码】uni-app （app&H5压缩图片)
uniapp-图片压缩(适配H5,APP)
low666的博客
10-27 3922
原理：按照需求等比例创建空白画布，将图片粘到画布上，最后保存画布的base64流。使用uni.compressImage()这个API即可。
uniapp 实现
07-25
在 UniApp 中实现保存图片到相册的功能，通常需要结合 `html2canvas` 生成图片数据，并通过 `uni.downloadFile` 和 `uni.saveImageToPhotosAlbum` 等 API 将图片保存到本地相册。 ### 图片生成与保存流程 首先，使用 `html2canvas` 将页面内容渲染为图片。`html2canvas` 支持将 DOM 元素转换为 Canvas，再通过 `toDataURL` 获取 Base64 格式的图像数据。随后，通过 `uni.downloadFile` 将 Base64 数据下载为临时路径，最后调用 `uni.saveImageToPhotosAlbum` 保存至用户相册。 ```javascript import html2canvas from 'html2canvas'; function saveCanvasToAlbum(element) { html2canvas(element).then(canvas => { const imageData = canvas.toDataURL('image/png'); uni.downloadFile({ url: imageData, success: (res) => { if (res.statusCode === 200) { uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: () => { uni.showToast({ title: '保存成功' }); }, fail: () => { uni.showToast({ icon: 'none', title: '保存失败' }); } }); } } }); }); } ``` ### 权限申请与兼容性处理 在调用 `uni.saveImageToPhotosAlbum` 前，需要确保用户已授权写入相册的权限。可以通过 `uni.getSetting` 检查权限状态，并在未授权时主动请求权限。 ```javascript uni.getSetting({ success: (res) => { if (!res.authSetting['scope.writePhotosAlbum']) { uni.authorize({ scope: 'scope.writePhotosAlbum', success: () => { // 已授权 }, fail: () => { uni.showToast({ icon: 'none', title: '需要相册权限' }); } }); } } }); ``` ### 图片压缩与优化 在实际应用中，为了提升性能和减少存储占用，通常会对生成的图片进行压缩处理。可以使用 `image-conversion` 插件对图片进行精准压缩，例如将图片压缩至 200KB 左右[^1]。 ```javascript import imageConversion from '@/components/image-conversion'; imageConversion.compressAccurately(file, { size: 200, type: 'image/jpeg' }).then(compressedFile => { // 上传压缩后的文件 }); ``` ### 上传与展示 保存图片后，可能还需要将其上传至服务器或展示在页面上。上传操作可通过 `uni.uploadFile` 实现，服务器返回图片路径后可进行展示[^3]。 ```javascript uni.uploadFile({ url: uploadUrl, file: compressedFile, name: 'file', success: (res) => { const data = JSON.parse(res.data); if (data.code === 1) { // 展示图片 this.imageUrl = data.url; } } }); ``` ### 相关问题 1. 如何在 Vue.js 中结合 html2canvas 和 uni.saveImageToPhotosAlbum 实现保存图片到相册？ 2. 如何在 UniApp 中实现图片上传前的压缩与格式转换？ 3. html2canvas 在 UniApp 中是否支持跨域图片渲染？ 4. 如何处理在 iOS 设备上使用 uni.saveImageToPhotosAlbum 时的权限问题？ 5. UniApp 中如何将 Base64 图片数据转换为临时路径并上传？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值