Interactive Ink

IINK - iOS: Exporting Drawing block as PNG

 Hey Guys.

I'm having an issue when trying to export a Drawing block as an image.

This is the code I'm currently using:

 

	NSString* imagePath = @"IInkTempImage.jpg";

	NSString* path = [[NSFileManager defaultManager] pathForFileInDocumentDirectory:imagePath];
	
	ImageLoader *imageLoader = [[ImageLoader alloc] init];
	imageLoader.cacheFolderPath = NSTemporaryDirectory();
	imageLoader.editor = self.editor;
	ImageDrawer *imageDrawer = [[ImageDrawer alloc] init];
	imageDrawer.imageLoader = imageLoader;
	CGSize size = self.view.bounds.size;
	[imageDrawer prepareImage:size];
	[imageDrawer invalidate:_editor.renderer layers:IINKLayerTypeCapture];
	[imageDrawer saveImage:path];

 

but I'm getting an empty image out of this.


 I also tried using the export method instead of the saveImage one, but this way I end up with a 0kb file.


[self.editor export_:self.editor.rootBlock toFile:path mimeType:IINKMimeTypePNG imageDrawer:imageDrawer error:&error];

 any clues?


Thanks!


Dear Just,


on our side, we tried to reproduce on iOS, and we confirm changing the export.image-resolution configuration has an immediate impact, as expected.


Can you also please try to export in JPEG?


Also, can you confirm you can create the file /erase the previous image file?


Waiting for your feedback.


Best regards,


Olivier

Using [self.editor export_:self.editor.rootBlock toFile:path mimeType:IINKMimeTypeJPEG imageDrawer:imageDrawer error:&error]; creates a 0 kb image.

I'm currently deleting the file (if existing) before creating the image



 

NSString* imagePath = @"IInkTempImage2.jpg";
	
	

	NSString* path = [[NSFileManager defaultManager] pathForFileInDocumentDirectory:imagePath];
	
	if ([[NSFileManager defaultManager] fileExistsAtPath:path])
		[[NSFileManager defaultManager] removeItemAtPath:path error:nil];

 

 

- (UIImage*) getConvertedImage {
	NSError* error;
	
	NSString* imagePath = @"IInkTempImage2.jpg";
	
	

	NSString* path = [[NSFileManager defaultManager] pathForFileInDocumentDirectory:imagePath];
	
	if ([[NSFileManager defaultManager] fileExistsAtPath:path])
		[[NSFileManager defaultManager] removeItemAtPath:path error:nil];
	
	ImageLoader *imageLoader = [[ImageLoader alloc] init];
	imageLoader.cacheFolderPath = NSTemporaryDirectory();
	imageLoader.editor = self.editor;
	ImageDrawer *imageDrawer = [[ImageDrawer alloc] init];
	imageDrawer.imageLoader = imageLoader;
	CGSize size = self.view.bounds.size;
	size.height = size.height;
	size.width = size.width;
	[imageDrawer prepareImage:size];
	[imageDrawer invalidate:_editor.renderer layers:IINKLayerTypeBackground|IINKLayerTypeModel|IINKLayerTypeTemporary|IINKLayerTypeCapture];
//	[imageDrawer saveImage:path];
	
	
	[self.editor export_:self.editor.rootBlock toFile:path mimeType:IINKMimeTypeJPEG imageDrawer:imageDrawer error:&error];
	
	if (error)
		return nil;
	
	UIImage* image = [UIImage imageWithContentsOfFile:path];
	NSLog(@"%@",image);
	return image;
}

 

 

- (UIImage*) getConvertedImage {
	NSError* error;
	
	NSString* imagePath = @"IInkTempImage2.jpg";
	
	

	NSString* path = [[NSFileManager defaultManager] pathForFileInDocumentDirectory:imagePath];
	
	if ([[NSFileManager defaultManager] fileExistsAtPath:path])
		[[NSFileManager defaultManager] removeItemAtPath:path error:nil];
	
	ImageLoader *imageLoader = [[ImageLoader alloc] init];
	imageLoader.cacheFolderPath = NSTemporaryDirectory();
	imageLoader.editor = self.editor;
	ImageDrawer *imageDrawer = [[ImageDrawer alloc] init];
	imageDrawer.imageLoader = imageLoader;
	CGSize size = self.view.bounds.size;
	size.height = size.height;
	size.width = size.width;
	[imageDrawer prepareImage:size];
	[imageDrawer invalidate:_editor.renderer layers:IINKLayerTypeBackground|IINKLayerTypeModel|IINKLayerTypeTemporary|IINKLayerTypeCapture];
//	[imageDrawer saveImage:path];
	
	
	[self.editor export_:self.editor.rootBlock toFile:path mimeType:IINKMimeTypeJPEG imageDrawer:imageDrawer error:&error];
	
	if (error)
		return nil;
	
	UIImage* image = [UIImage imageWithContentsOfFile:path];
	NSLog(@"%@",image);
	return image;
}

 

 

Hey Oliver.

You were right. I was able to test back this today, after updating the SDK and it's working properly.

Thanks.


One more question, is there any way I can determine which part of the document I want saved? (Let's say I just want to save the top 30 % off the document, instead of all of it)

Dear Just,


thank you for the update. I am glad issues are solved.


To answer your question, no, it is not possible to save only a part of a give content part or package. Our iink SDK doesn't offer such possibility.


Best regards,


Olivier

Dear Just,


thank you for your question.


Currently, can you please try to set the LayerType_ALL when calling invalidate. Also, is the size properly set? You can also refer to this post: https://developer-support.myscript.com/support/discussions/topics/16000023421


Best regards,


Olivier

Hi Oliver. Thanks for your quick response.

I was following that thread, since I didn't find any help on this on the "Get Started" guide.

There's no "LayerType_ALL" constant, but I was able to make it work using all the available ones


 

[imageDrawer invalidate:_editor.renderer layers:IINKLayerTypeBackground|IINKLayerTypeModel|IINKLayerTypeTemporary|IINKLayerTypeCapture];

 Now the image is being generated, but the result is way too small (please see following images). I tried reducing the size to the half (currently 161 x 69) to see if that would grab less of the canvas, but it didn't work.


result image:

image

screenshot from the device:

image

(The size of the canvas is the grey box)

Any ideas?


Thanks!

Dear Just,


thank you for the update.


Currently, you should set the "export.image-resolution" configuration parameter (https://developer.myscript.com/docs/interactive-ink/1.2/reference/configuration/#general) to the same resolution than the one of the renderer:

-When calling the createRenderer function, resolution corresponds to parameters displayMetrics.xdpi and displayMetrics.ydpi (on most devices, both values should be the same).

renderer = engine.createRenderer(displayMetrics.xdpi, displayMetrics.ydpi, this);

-Then, set the "export.image-resolution": [self.engine.configuration setNumber:displayMetrics.xdpi forKey:@"export.image-resolution" error:&myError];


Let us know if this doesn't work.


Best regards,


Olivier

Hey Oliver.

I did a couple of tests. This is the code I use to initialize the editor



 

ImageLoader *imageLoader = [[ImageLoader alloc] init];
	imageLoader.cacheFolderPath = [[NSFileManager defaultManager] tmpDirectory];
	
	CGFloat scale = scaledDpi();
	
	IINKRenderer *renderer = [self.engine createRendererWithDpiX:scale dpiY:scale target:displayViewController];
	
	self.editor = [self.engine createEditor:renderer];
	[self.editor setViewSize:self.view.bounds.size];
	[self.editor addDelegate:self];
	self.fontMetricsProvider = [[FontMetricsProvider alloc] init];
	[self.editor setFontMetricsProvider:self.fontMetricsProvider];
	imageLoader.editor = self.editor;
	
	displayViewController.renderer = renderer;
	displayViewController.imageLoader = imageLoader;
	inputView.editor = self.editor;
	
	smartGuideViewController.editor = self.editor;
	
	IINKConfiguration *conf = self.engine.configuration;
	double horizontalMarginMM = 0;
	double verticalMarginMM = 1;
	
	[conf setNumber:@"text.margin.top" value:verticalMarginMM error:nil];
	[conf setNumber:@"text.margin.bottom" value:verticalMarginMM error:nil];
	[conf setNumber:@"text.margin.left" value:horizontalMarginMM error:nil];
	[conf setNumber:@"text.margin.right" value:horizontalMarginMM error:nil];
	[conf setNumber:@"math.margin.top" value:verticalMarginMM error:nil];
	[conf setNumber:@"math.margin.bottom" value:verticalMarginMM error:nil];
	[conf setNumber:@"math.margin.left" value:horizontalMarginMM error:nil];
	[conf setNumber:@"math.margin.right" value:horizontalMarginMM error:nil];
	[conf setNumber:@"export.image-resolution" value:scale error:nil];
	
	
	//define pen style and converted text
	self.editor.theme = @".pen { -myscript-pen-width: 0.35;}"
	"glyph.text {"
	"  font-family: Avenir;"
	"  font-size: 5.5;"
	"  line-height: 0.9;"
	"}"
	".diagram-selection {-myscript-pen-width : 0.3}"
	".drawing {-myscript-pen-width : 0.3}";
	
	self.editor.penStyleClasses = @"pen";

 The scale is 132.

The first try was just adding     [conf setNumber:@"export.image-resolution" value:scale error:nil]; as you mentioned, but I didn't notice any changes on the image.

image

Next try was to increment the value,     [conf setNumber:@"export.image-resolution" value:500 error:nil];

Again, there was no change on the image

image

Another thing I noticed is the size of the image. On my canvas I draw the rectangle surrounding all the space. The size passed to the image drawer is the view's size, (322 x 138)

image

I noticed the final images where double that size, so my next tries where to reduce that size, by 0.5

image

Which resulted in an image of (322 138), with a bigger rectangle, but the quality is still too bad. Playing again with the dpi:

image

size 0.5, dpi 50


image

size 0.5, dpi 500


As you can see, there's no change on the image. (All images were attached as they were exported from the device).


Any ideas?

Login or Signup to post a comment