uniapp本身是自带压缩图片的方式的,但是他只适用于APP,做不到多端的适配,如果只考虑app,就非常容易实现了。
使用uni.compressImage()这个API即可文章来源:https://www.toymoban.com/news/detail-729541.html
compressImage(url) {
return new Promise((reslove, reject) => {
const tempFilePath = url //url是选中图片的路径
uni.compressImage({
src: tempFilePath,
quality: 50, //压缩的程度
success: (res) => {
reslove(res.tempFilePath) //压缩成功返回的路径
},
fail: (error) => {
console.log('压缩失败', error)
}
})
})
},
要适配H5和APP可以使用canvas的方式进行压缩
原理:按照需求等比例创建空白画布,将图片粘到画布上,最后保存画布的base64流文章来源地址https://www.toymoban.com/news/detail-729541.html
translate(imgSrc, scale) {
//imgSrc:图片的路径
//scale:缩放比例 0-1之间
return new Promise((reslove, reject) => {
var img = new Image(); //创建Image对象生成一个<img>标签
img.src = imgSrc; //将图片路径赋给<img>标签的src
img.onload = () => {//onload在图片加载成功后触发,在onload中完成压缩功能
var h = img.height/2; // 获取原本图片的宽高
var w = img.width/2; //默认按比例压缩,根据需求修改
var canvas = document.createElement('canvas');//创建画布
var ctx = canvas.getContext('2d'); //设置为2d效果
var width = document.createAttribute("width"); //创建属性节点
width.nodeValue = w; //设置属性值
var height = document.createAttribute("height");
height.nodeValue = h;
canvas.setAttributeNode(width); //设置画布宽高
canvas.setAttributeNode(height);
ctx.drawImage(img, 0, 0, w,h);//将图片贴到画布上
//img:图片 0,0:粘贴的位置 w,h:粘贴图片的大小
var base64 = canvas.toDataURL('image/png', scale);
//'image/png':压缩返回图片的类型 scale:图片质量
//如果要base64的流,可以直接将结果返回了
canvas = null; //清除画布
var blob = this.base64ToBlob(base64); //需要二进制流调用该方法拿到
let blobUrl = window.URL.createObjectURL(blob);//blob地址
reslove(blobUrl)
}
})
},
// base64转Blob
base64ToBlob(base64) {
var arr = base64.split(','),
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 Blob([u8arr], {
type: mime,
});
},
到了这里,关于uniapp-图片压缩(适配H5,APP)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!