phoenix
phoenix
  • 发布:2016-11-18 17:50
  • 更新:2016-11-19 15:16
  • 阅读:2443

bitmap.toBase64Data()赋值给img发现图片发绿

分类:5+ SDK


wi = plus.webview.currentWebview();
bitmap1 = new plus.nativeObj.Bitmap('bmp1');
wi.draw(bitmap1);
$("#MyPic").attr("src", bitmap1.toBase64Data()).show();
之后,发现<img id='MyPic' style='width:100%' />的图片显示发绿,就是绿黄绿黄的颜色,窗口是白色的

2016-11-18 17:50 负责人:无 分享
已邀请:
猫猫猫猫

猫猫猫猫 - 用户已离线

我的分析如下,由于懒惰,缺乏实践依据,不一定100%正确,仅供参考。

图片发绿的问题,应该是安卓上图片压缩算法的bug导致,这个问题是到安卓7版本才修复的,具体可参考:https://www.zhihu.com/question/29355920/answer/64235625。

那么要解决这个问题,就需要找出是哪个步骤对图片进行了压缩。
此次图像处理有三个步骤;
1.将屏幕像素绘制到Bitmap;

  1. 将Bitmap转为Base64;
  2. 将Base64显示为图像;
    3的部分没有什么处理不会出问题,1的部分Bitmap应该是逐像素取的,应该没有压缩步骤,那么嫌疑最大的就是2的部分,将Bitmap转为Base64的过程,这个toBase64Data的方法在官方文档里虽然没有压缩率的参数,但我猜测默认进行了压缩,正是这个压缩操作导致的发绿。

那么我给出的解决办法如下:
放弃toBase64Data方法,改用save方法,保存时设置options参数quality值为100,然后用保存后的路径(file:///storage/sdcard0/Android/data/....../a.jpg)去设置img的src属性。

phoenix

phoenix (作者)

谢谢,理解了。我原还以为能用这个功能做页面的动画切换效果,这样看来是行不通的。

  • 猫猫猫猫

    这个功能的确是可以做页面的动画切换效果的,官方的webview切换动画就利用了截图来加速。

    2016-11-19 15:52

  • phoenix (作者)

    我想做一个像腾讯新闻那样的子页面手指抹动切换页面的效果,但是试了h5+的view原生控件,但发现view的动画效果只有4种,完全没办法达到效果,没办法才想用截图存入html的img控件中做动画,结果也发现变绿,你有什么思路没?

    2016-11-19 16:06

  • 深海智行

    楼上的人不是说不用toBase64Data而用save方法吗?

    2016-11-19 20:03

该问题目前已经被锁定, 无法添加新回复