Images lose resolution when loading them in the canvas

[1kDustin]

Hello! I'm having an issue when editing a photo with the canvas. It seems the image is getting pretty blurry when opening it in the canvas. Are there any solutions for this?

[iBotPeaches]

With our present use-case the absolute highest quality has not been a concern so not something we've directly investigated. Could you provide the content mode (aspect-fill, aspect-fit, scale-to-fit) you used and the sample raw image?

[1kDustin]

With our present use-case the absolute highest quality has not been a concern so not something we've directly investigated. Could you provide the content mode (aspect-fill, aspect-fit, scale-to-fit) you used and the sample raw image? I've tried all 3 modes and none of them seem to be any better. Do you have any ideas on where I can look to try and fix the quality? ```

ref={canvasRef}
localSourceImage={{
filename: platformImage,
mode: 'ScaleToFill',
}}
strokeColors={[{ color: '#000' }]}
containerStyle={styles.canvas}
canvasStyle={styles.canvas}
defaultStrokeIndex={0}
defaultStrokeWidth={5}
savePreference={() => {
return {
folder: 'RNSketchCanvas',
filename: String(Math.ceil(Math.random() * 100000000)),
transparent: false,
imageType: 'png',
cropToImageSize: true,
};
}}
onSketchSaved={(success, path) => {
onSave(path);
}}
onClosePressed={onClose}
/>```

[iBotPeaches]

I'm guessing its happening in 1 of 2 places for iOS

• When we load/scale the image into canvas - https://github.com/sourcetoad/react-native-sketch-canvas/blob/master/ios/RNSketchCanvas/RNSketchCanvas/RNSketchCanvas.m#L448
• When we save the image after squashing layers - https://github.com/sourcetoad/react-native-sketch-canvas/blob/master/ios/RNSketchCanvas/RNSketchCanvas/RNSketchCanvas.m#L337

These both use various CG and UI functions which I know have so many parameters in regards to quality/region/etc. Thats why the sample image you are using would help, so I could see if its getting scaled, etc.

[1kDustin]

I'm guessing its happening in 1 of 2 places for iOS

• When we load/scale the image into canvas - https://github.com/sourcetoad/react-native-sketch-canvas/blob/master/ios/RNSketchCanvas/RNSketchCanvas/RNSketchCanvas.m#L448
• When we save the image after squashing layers - https://github.com/sourcetoad/react-native-sketch-canvas/blob/master/ios/RNSketchCanvas/RNSketchCanvas/RNSketchCanvas.m#L337

These both use various CG and UI functions which I know have so many parameters in regards to quality/region/etc. Thats why the sample image you are using would help, so I could see if its getting scaled, etc.

thats helpful thank you! The sample image i'm using is coming directly from the simulators gallery

[1kDustin]

@iBotPeaches Not sure if you want to test it out on your end, but I made some changes to the scaleImage code. This seems to up the resolution back to max. Maybe it can be added as a prop to the SketchCanvas component?

- (UIImage *)scaleImage:(UIImage *)originalImage toSize:(CGSize)size contentMode:(NSString *)mode {
    UIGraphicsImageRendererFormat *format = [UIGraphicsImageRendererFormat defaultFormat];
    format.opaque = NO; // To handle transparency if needed
    format.scale = [UIScreen mainScreen].scale; // Use the screen scale to ensure high quality

    UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:size format:format];
    UIImage *scaledImage = [renderer imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull rendererContext) {
        CGRect targetRect = [Utility fillImageWithSize:originalImage.size toSize:size contentMode:mode];
        [originalImage drawInRect:targetRect];
    }];

    return scaledImage;
}

[iBotPeaches]

@1kDustin thanks. We are investigating this internally as we just so happen to have a real use-case for maintaining high quality images with draws. A prop seems best for this as the higher image quality really expands memory usage and I'm worried for lower end devices.