Android:WebView 中加载的图像的像素质量降低 [英] Android: pixel quality reduction in Images loaded in WebView
问题描述
我正在为移动浏览器构建 Javascript 应用程序(不是包装为原生应用程序).
I am building Javascript application for mobile browsers (not wrapped-as-native app).
我注意到如果图像尺寸超过特定阈值(宽度超过 1400 像素左右)，Android(经过测试的 2.3 模拟器和 Galaxy S 设备)会降低加载图像的质量.这使得无法加载大的位图图像(2000 x 2000 像素)而质量不可用.
I noticed that Android (tested 2.3 emulator and Galaxy S device) reduces the quality of loaded images if the image dimensions exceed certain threshold (width above 1400 px or so). This make it impossible to load big bitmap images (2000 x 2000 px) without the quality going unusable.
我对此进行了测试
加载一张大图像并将其绘制在 - 我得到了像素垃圾.如果我使用 lineTo() 绘制网格线，它们具有完美的质量，那么坏点必须在图像像素数据中
Loading one big image and drawing it on the - I got pixel garbage out. If I draw grid lines using lineTo() on they have perfect quality, so the bad must be in the image pixel data
将大图像切成 100 x 100 切片并将它们绘制到画布上 - 这是我发现不会降低质量的唯一方法.然而，切片很麻烦，增加了额外的步骤来预处理图像并且页面加载时间受到影响
Slicing the big image to 100 x 100 slices and drawing them to a canvas - this is the only method I found resulting no quality reduction. However, slicing is cumbersome, adds extra step to preprocess images and page loading times suffers
我测试了使用 new Image() 对象、标签和 CSS 背景加载图像的 tring:一切都受到质量降低的影响，所以我怀疑问题是图像加载器本身
I tested tring to load image with new Image() object, tag and CSS background: everything suffers from the reduced quality, so I suspect the probelm is the image loader itself
我还尝试了 CSS 图像渲染https://developer.mozilla.org/En/CSS/Image-rendering - 没有运气
I also tried everything with CSS image-rendering https://developer.mozilla.org/En/CSS/Image-rendering - no luck
Viewport 标签似乎对图像加载没有影响 - 当您尝试触摸加载的像素数据时，数据已经是垃圾.我尝试了 Android 的 SDK 文档中建议的所有可能值 http://developer.android.com/reference/android/webkit/WebView.html
Viewport tag seems to have no effect to the image loading - the data is already garbage when you try to touch the loaded pixel data. I tried all possible values suggested in Android's SDK documentation http://developer.android.com/reference/android/webkit/WebView.html
还测试了 Firefox 移动版、桌面浏览器、iOS:一切都很好.
Tested also Firefox mobile, desktop browsers, iOS: everything is good there.
那么，这是怎么回事 - Android WebView 根本无法加载大图像?
So, what is going on - Android WebView simply can't load big images?
(这里挂着安卓机器人的笑脸)
(smiley of hung Android robot here)
推荐答案
如果超过一定的内存使用阈值，Android 会无条件地重新采样图像并降低质量.
https://android.googlesource.com/platform/external/webkit/+/android-3.2.4_r1/WebCore/platform/graphics/android/ImageSourceAndroid.cpp
Android unconditionally resamples images and reduces quality if a certain threshold of memory usage is exceeded.
https://android.googlesource.com/platform/external/webkit/+/android-3.2.4_r1/WebCore/platform/graphics/android/ImageSourceAndroid.cpp
无法完整访问原始图像数据.
There is no way to access the original image data in intact.
我向 android-developers Google Group 发布了一个关于此的问题，并恳请提供某种标志以选择退出此行为.
I posted a question regarding this to android-developers Google Group and kindly asking to maybe provide some kind of flag to opt-out from this behavior.
同时，如果您正在考虑开发 HTML5 网络应用程序并且您可能使用大图像，您只需在服务器端通过切片对它们进行预处理，将较小的图像发送到设备，然后使用或放置重新构建原始图像一个容器元素中有很多标签.
Meanwhile, if you are considering developing HTML5 web apps and you might use big images, you simply need to preprocess them on the server-side by slicing, send in smaller images to the device and then reconstuct the original image using or putting many tags inside a container element.
另一种选择是通过编写一个 PNG 解码器来手动"加载图像，该解码器将图像直接加载到 ，绕过 ImageSourceAndroid 类.
Another option would be load image "manually" by writing a PNG decoder which directly loads the image to , bypassing ImageSourceAndroid class.
这篇关于Android:WebView 中加载的图像的像素质量降低的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
