background
In certain scenarios, we need to consider the need to load a long picture, such as loading a “Riverside Scene at Qingming Festival”, this seems a bit excessive, so load half of the “Riverside Scene at Qingming Festival”. That makes the same fucking sense.
To get back to the point, I encountered a situation where modules with images or large images were previously classified as H5 implementation, but now requirements change is classified as native development, then the problem arises.
Image size:
The image size is
I am confused at this moment, which end has no limit on the size and compression when uploading pictures? MDZZ, ridicule ridicule, or to roll up the sleeves to solve the problem of loading the long picture. First provide a few technical solutions to compare:
Scenario 1: WebView loads render
Because the image itself is also a URL, it is also rendered by the WebView and supports zooming. This is a kind of implementation scheme, encounter a few M large WebView will Crash, so this speculative way is not recommended.
Scheme 2: BitmapRegionDecoder
BitmapRegionDecoder subdivision load, the use of system to load the local image, called BitmapRegionDecoder. DecodeRegion resolution picture rectangle, return to bitmap, finally displayed in the ImageView. This solution requires manual handling of swiping, zooming gestures, and caching strategies for web images. The implementation method is cumbersome and not recommended.
Solution 3: SubsamplingScaleImageView
A tripartite library that encapsulates BitmapRegionDecoder already handles swipe and zoom gestures. We could consider using this library to load long graphs, but the official Demo samples load long graphs locally. This may not fit our web scene requirements, so we need to consider different loading frameworks for web images,
SubsamplingScaleImageView Git portal
Solution 4: Glide + SubsamplingScaleImageView mixed loading rendering
For loading frame images, Glide is preferred, of course, we use Glide for network image download and cache management, FileTarget as Bridges, SubsamplingScaleImageView local resources of subdivision load images, look, so to achieve together.
Glide Git portal
SubsamplingScaleImageView Git portal
fun loadLargeImage(context: Context, res: String, imageView: SubsamplingScaleImageView) { imageView.isQuickScaleEnabled = true imageView.maxScale = 15F imageView.isZoomEnabled = true imageView.setMinimumScaleType(SubsamplingScaleImageView.SCALE_TYPE_CUSTOM) Glide.with(context).load(res).downloadOnly(object : SimpleTarget<File? >() { override fun onResourceReady(resource: File, glideAnimation: Transition<in File? >? { val options = BitmapFactory.Options() options.inJustDecodeBounds = true BitmapFactory.decodeFile(resource.absolutePath, options) val sWidth = options.outWidth val sHeight = options.outHeight options.inJustDecodeBounds = false val wm = ContextCompat.getSystemService(context, WindowManager::class.java) val width = wm?.defaultDisplay?.width ?: 0 val height = wm?.defaultDisplay?.height ?: 0 if (sHeight >= height && sHeight / sWidth >= 3) { imageView.setMinimumScaleType(SubsamplingScaleImageView.SCALE_TYPE_CENTER_CROP) ImageView. SetImage (ImageSource. Uri (uri) fromFile (resource), ImageViewState (0.5 f, PointF (0 f, 0 f), 0)) } else { imageView.setMinimumScaleType(SubsamplingScaleImageView.SCALE_TYPE_CUSTOM) imageView.setImage(ImageSource.uri(Uri.fromFile(resource))) imageView.setDoubleTapZoomStyle(SubsamplingScaleImageView.ZOOM_FOCUS_CENTER_IMMEDIATE) } } override fun onLoadFailed(errorDrawable: Drawable?) { super.onLoadFailed(errorDrawable) } }) }Copy the codeThis is my one way to encapsulate, is easy to understand, including SubsamplingScaleImageView scale, set the default state, scale, location, calculating the current picture three times the ratio of high to width were long figure rendering process, according to the normal image rendering process.
