求救!android部分手机上传照片到后台服务器为啥显示的图片是不全的,有缺失,缺失部分为黑色。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了求救!android部分手机上传照片到后台服务器为啥显示的图片是不全的,有缺失,缺失部分为黑色。相关的知识,希望对你有一定的参考价值。

最近开发一个android手机端应用。因为用户手机机型比较多,在部分手机里会产生上述现象。请问是什么原因,求教。急啊!!!

参考技术A 这是2.3系统一下的bug,我也遇到类似情况,不限于图片,文件也会自己丢失。主要出现在转成usb模式时出现。4.0后没发现,可能也会有,但是google目前没有特别说明 参考技术B 因为后台开通程序较多,还处于缓冲中。追问

是等了很长时间的,我想那时已经缓冲完了吧。

参考技术C 你好,你的问题解决了吗

解决ios手机上传竖拍照片旋转90度的问题

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。

因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正。

这里主要利用exif.js读取照片的拍摄信息。

Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展,例如:拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。

EXIF 数据主要来自拍摄的照片,多用于移动端开发,PC 端也会用到,此插件兼容主流浏览器,IE10 以下不支持。

这里主要用到Orientation属性。

Orientation属性说明如下:

在页面中首先引入 exif.js

主要代码如下:

复制代码
//获取照片的元信息(拍摄方向)
  function getPhotoOrientation(img) {
    var orient;
    EXIF.getData(img, function() {
      orient = EXIF.getTag(this, "Orientation");
    });
    return orient;
  }
复制代码

 

复制代码
 //获取照片的拍摄方向
          var orient = getPhotoOrientation(image);
          //判断图片拍摄方向是否旋转了90度
          if (orient == 6) {
            canvas.width = width * (image.height / image.width);
            canvas.height = width;
            drawer.save();
            drawer.translate(canvas.width / 2, canvas.height / 2);
            drawer.rotate(90 * Math.PI / 180); 
            drawer.drawImage(image, -(canvas.height / 2), -(canvas.width / 2), canvas.height, canvas.width);
            let newImg = canvas.toDataURL("image/jpeg", 1);
            $(\'.img2\').attr("src", newImg);
复制代码

通过读取图片的Orientation属性如果等于6,则让它旋转90度。

参考demo:http://jsfiddle.net/q3011893/k3z5ev26/embedded/

 

其它参考资料:

https://www.jb51.net/article/96539.htm

以上是关于求救!android部分手机上传照片到后台服务器为啥显示的图片是不全的,有缺失,缺失部分为黑色。的主要内容,如果未能解决你的问题,请参考以下文章

苹果手机怎么上传照片到qq空间

苹果手机QQ空间怎么上传照片?

利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题

React-Native 多部分照片上传在 android 中不起作用

照片上传到云端的几种方式

后台上传大量数据