H5 图片预览的两种实现

1、原理浅析

  • FileReader,利用FileReader实例的readAsDataURL方法可以将input上传的图片转成base64形式的url,将其给到img的src属性即可
  • window.URL.createObjectURL,该API可将input上传的图片转成blob形式的url,将其给到img的src熟悉即可
    看下二者的兼容性:


    H5 图片预览的两种实现_第1张图片
    FileReader兼容性.png

    H5 图片预览的两种实现_第2张图片
    URL兼容性.png

    可以看到FileReader的兼容性是优于URL的

2、具体实现

Talk is easy,show you the Code!




    
    图片预览两种实现


    
    

3、需要注意的地方

  • 对于FileReader,可能某些android机型不能上传图片(oppo 安卓4.3?未实践,看别人博客说有这个问题),解决方案:http://www.tuicool.com/articles/buu6ji
  • 据说creatObjectURL可以有更好的性能,处理速度更快,待实践

你可能感兴趣的:(H5 图片预览的两种实现)