[TIMOB-26630] ScrollView: toImage() not taking complete screenshot of scrollview

GitHub Issue	n/a
Type	Story
Priority	Low
Status	Closed
Resolution	Invalid
Resolution Date	2019-01-11T01:50:01.000+0000
Affected Version/s	Release 7.5.0
Fix Version/s	n/a
Components	Android
Labels	scrollView, toImage
Reporter	Aminul Islam
Assignee	Yordan Banev
Created	2018-12-05T12:32:18.000+0000
Updated	2019-01-11T01:50:04.000+0000

Description

Hello! I have a scrollview added on window, while taking the screenshot of scrollview, it takes toImage() of the area that is visible on the window, but not of full scrollview, how I can overcome this issue ?

var win = Ti.UI.createWindow({
	backgroundColor : "white",
});

var scrollview = Ti.UI.createScrollView({
	width : "100%",
	height : "100%",
	// contentHeight:"auto",
	layout : "vertical"
});
win.add(scrollview);
scrollview.addEventListener("click", function(e) {

	var win2 = Ti.UI.createWindow({
		backgroundColor : "white",
	});
	var scrollVw = Ti.UI.createScrollView({
		width : "100%",
		height : "100%",
		// contentHeight:"auto",
		layout : "vertical"
	}), varImageVw = Ti.UI.createImageView({
		width : "100%",
		height : Ti.UI.SIZE,
		image : scrollview.toImage(),

	});
	scrollVw.add(varImageVw);
	win2.add(scrollVw);
	win2.open();
});
var view1 = Ti.UI.createView({
	top : 0,
	width : "100%",
	height : "400",
	backgroundColor : "red"
});
scrollview.add(view1);

var view2 = Ti.UI.createView({
	top : 0,
	width : "100%",
	height : "400",
	backgroundColor : "green"
});
scrollview.add(view2);

var view3 = Ti.UI.createView({
	top : 0,
	width : "100%",
	height : "400",
	backgroundColor : "blue"
});
scrollview.add(view3);

var view4 = Ti.UI.createView({
	top : 0,
	width : "100%",
	height : "400",
	backgroundColor : "yellow"
});
scrollview.add(view4);

var view5 = Ti.UI.createView({
	top : 0,
	width : "100%",
	height : "400",
	backgroundColor : "pink"
});
scrollview.add(view5);

win.open();

while clicking on first window scrollview, image is displayed in next window scrollview, you will notice its not taking toImage() of complete scrollview, as its not displaying in 2 window. Test Environment:

Operating System
  Name                        = Microsoft Windows 10 Pro
  Version                     = 10.0.17134
  Architecture                = 32bit
  # CPUs                      = 4
  Memory                      = 17091956736
Node.js
  Node.js Version             = 8.9.1
  npm Version                 = 5.5.1
Titanium CLI
  CLI Version                 = 5.1.1
Titanium SDK
  SDK Version                 = 7.5.0.GA
  SDK Path                    = C:\ProgramData\Titanium\mobilesdk\win32\7.5.0.GA
  Target Platform             = android

Thanks

Comments

Yordan Banev 2018-12-11

[~aislam] I don't think that currently there is a way to get all the content of the ScrollView to be converted to an image.
Yordan Banev 2018-12-11

PR: https://github.com/appcelerator/titanium_mobile/pull/10529 This is a PR with one possible way to deal with the matter in the ticket. It is not a general solution for containers extending beyond the screen size, but for ScrollView only. I don't want to put a milestone(fix version) to it, because it may not get merged in this state at all.
Joshua Quick 2018-12-11

We need to double check what the iOS behavior is for this. Personally, I think ScrollView.toImage() should capture the container (including the border), not the contents. The issue with capturing the contents is that for a very long ScrollVIew, the image file may be too big to fit into memory. I haven't tested this yet. So, I'm not sure which we do yet.
Yordan Banev 2018-12-12

[~jquick] A really good point. I did not think about content big enough to cause memory issues. Currently we use whatever is assigned as a nativeView for calculating the dimensions of the image generated. In the case of TiUIScrollView it is a SwipeRefreshLayout, containing TiVerticalScrollView\TiHorizontalScrollView depending on the type of the ScrollView.
Joshua Quick 2018-12-12

I just tested this on iOS now. On iOS, ScrollView.toImage() captures the ScrollView container, including its border if applied. It does not capture the offscreen inner contents. Android does the same, except it excludes the border. But in any case, the behavior between Android and iOS is nearly the same (except for the border). This is not a bug. So, it isn't really clear to me what the customer wants. Does this person want to capture the inner contents including the parts that are offscreen? If so, then the solution would be to wrap all of the views within a parent view within the ScrollView and capture that. This way it'll work on both Android and iOS.
Samir Mohammed 2019-01-08

Closing ticket. If this is a mistake feel free to reopen.

JSON Source