移动端图片压缩上传例子

时间:2018-01-09 04:26:30
【文件属性】:

文件名称:移动端图片压缩上传例子

文件大小:76KB

文件格式:ZIP

更新时间:2018-01-09 04:26:30

html5 移动端 base64压缩 图片上传

移动端图片上传,html5+PHP实现,现在移动端存储照片都比较大,所以在上传之前我们需要进行压缩处理。简单写一下思路: 1.选择完图片通过html5的FileReader拿到base64的图片 2.创建一个Image对象,将base64图片作为Image对象的src 3.拿到Image对象的高宽,按比例计算出想要的高宽(使用image.onload解决各浏览器不兼容拿不到Image对象高宽的问题) 4.按照计算好之后高宽将图片在canvas上绘制出来 5.通过canvas的toDataURL拿到一个转换后的base64图片 6.将最终的base64图片通过ajax传到后台进行保存处理


【文件预览】:
html5-make-thumb-master
----jquery.make-thumb.js(6KB)
----megapix-image.js(8KB)
----exif.js(18KB)
----index.html(21KB)
----mark.png(73KB)
----api.php(1KB)
----.gitignore(14B)
----README.md(1KB)
----binaryajax.js(7KB)

网友评论

  • 感谢楼主分享
  • 测试还不能上传图片,会自动跳转到首页重新登陆。
  • 例子是比较炫的,但是实际上用不上
  • 不错,解决了问题
  • 在电脑上测试没有问题,FF,CHROME下正常。手机上还没测试。感谢作者!