开源软件名称(OpenSource Name):CommanderXL/imgResize开源软件地址(OpenSource Url):https://github.com/CommanderXL/imgResize开源编程语言(OpenSource Language):JavaScript 98.6%开源软件介绍(OpenSource Introduction):移动端 H5 图片压缩上传安装
使用import canvasResize from 'canvas-resize'
canvasResize(img, {
crop: false,
quality: 0.9,
rotate: 0,
callback(baseStr) {
console.log(baseStr.length)
}
}) 整体思路大体的思路是,部分 API 的兼容性请参照caniuse:
步骤 1 当中,在进行图片压缩前,还是对图片大小做了判断的,如果图片大小小于 200KB 时,是直接进行图片上传,不进行图片的压缩,如果图片的大小是大于 200KB,则是先进行图片的压缩再上传: <input type="file" id="choose" accept="image/*"> var fileChooser = document.getElementById("choose"),
maxSize = 200 * 1024; //200KB
fileChoose.change = function() {
var file = this.files[0], //读取文件
reader = new FileReader();
reader.onload = function() {
var result = this.result, //result为data url的形式
img = new Image(),
img.src = result;
if(result.length < maxSize) {
imgUpload(result); //图片直接上传
} else {
var data = compress(img); //图片首先进行压缩
imgUpload(data); //图片上传
}
}
reader.readAsDataURL(file);
} 步骤 2,3: var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d')
function compress(img) {
canvas.width = img.width
canvas.height = img.height
//利用canvas进行绘图
//将原来图片的质量压缩到原先的0.2倍。
var data = canvas.toDataURL('image/jpeg', 0.2) //data url的形式
return data
} 在利用 canvas 进行绘图的过程中,IOS 图片上传过程中,存在着这样的问题:
步骤 4,文件上传有 2 种方式:
方式 1 可以通过 方法 2 这里就有个大坑了。具体描述请戳我 简单点说就是: 当你拿到了图片的 var ndata = compress(img)
ndata = window.atob(ndata) //将base64格式的数据进行解码
//新建一个buffer对象,用以存储图片数据
var buffer = new Uint8Array(ndata.length)
for (var i = 0; i < text.length; i++) {
buffer[i] = ndata.charCodeAt(i)
}
//将buffer对象转化为Blob数据类型
var blob = getBlob([buffer])
var fd = new FormData(),
xhr = new XMLHttpRequest()
fd.append('file', blob)
xhr.open('post', url)
xhr.onreadystatechange = function() {
//do something
}
xhr.send(fd) 在新建 2 月 19 日更新在安卓机器中, 部分机型不支持 2 月 22 日更新
使用 npm install
npm run build
canvasResize(this.files[0], {
crop: false, // 是否裁剪
quality: 0.9, // 压缩质量 0 - 1
rotate: 0, // 旋转角度
callback(baseStr) {
console.log(baseStr.length)
}
}) Some Tips
使用到的库 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论