How i can save an javafx.image.Image to a jpg file in a javafxports android app? - javafxports

How i can save an javafx.image.Image to a jpg file in a javafxports android app?
I can't find an api the only i have founded is ImageIO that is not supported on android.
i need some help
Example code:
#Override
public void start(Stage primaryStage) {
StackPane root = new StackPane();
Scene scene = new Scene(root, 400, 450);
WritableImage wim = new WritableImage(300, 250);
Canvas canvas = new Canvas(300, 250);
GraphicsContext gc = canvas.getGraphicsContext2D();
drawShapes(gc);
canvas.snapshot(null, wim);
root.getChildren().add(canvas);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
File file = new File("CanvasImage.png");
try {
//on desktop ImageIO.write(SwingFXUtils.fromFXImage(wim, null), "png", file);
// on android ??????????
} catch (Exception s) {
}
}

On Android you can use android.graphics.Bitmap to save to file:
public void saveImageToPngFile(File file, WritableImage image) {
int width = (int) image.getWidth();
int height = (int) image.getHeight();
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
try {
PixelReader pr = image.getPixelReader();
IntBuffer buffer = IntBuffer.allocate(width * height);
pr.getPixels(0, 0, width, height, PixelFormat.getIntArgbInstance(), buffer, width);
bitmap.setPixels(buffer.array(), 0, width, 0, 0, width, height);
FileOutputStream out = new FileOutputStream(file);
bitmap.compress(Bitmap.CompressFormat.PNG, 100, out);
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}

Related

Processing - How to move the extended class to the group

The ColorPicker from cp5 is hardcoded and I can not resize the shapes of the sliders. So I extended the ColorPicker class and made a new one called MyColorPicker.
I have several groups and I want to add my new class to one of them.
Earlier, I could do it by cp5.addColorPicker("") .moveTo("") But in this case there is a new class and I couldn't move it to the group. Here is the code pieces:
import controlP5.*;
ControlP5 cp5;
MyColorPicker cp;
void setup() {
size(500, 300);
noStroke();
cp5 = new ControlP5(this);
cp = new MyColorPicker(cp5, "MYPICKER");
cp.setPosition(50, 50).setColorValue(color(255, 000, 000, 255));
Group SetupGroup = cp5.addGroup("SETUP")
.setPosition(90,100)
.setWidth(150)
.setHeight(30)
.setFont(font2);
background(0); //For transparency
noStroke();
;
Group ColorGroup = cp5.addGroup("COLOR-BRIGHTNESS")
.setPosition(30,240)
.setWidth(300)
.setHeight(30)
.setFont(font2)
.moveTo(SetupGroup);
background(0);
noStroke();
;
//I want to move my own color picker to the colorGroup instead of this one.
/*
cp5.addColorPicker("PICKER")
.setPosition(40, 10)
.moveTo(ColorGroup);
; */
.
.
.
.
.
.
.}
class MyColorPicker extends ColorPicker {
MyColorPicker(ControlP5 cp5, String theName) {
super(cp5, cp5.getTab("default"), theName, 0, 0, 100, 10);
}
void setItemSize(int w, int h) {
sliderRed.setSize(w, h);
sliderGreen.setSize(w, h);
sliderBlue.setSize(w, h);
sliderAlpha.setSize(w, h);
sliderRed.setPosition(10,10);
sliderGreen.setPosition(10,100);
sliderBlue.setPosition(10,180);
sliderAlpha.setPosition(10,260);
}
}
I would recommend fixing syntax errors before posting and also removing any code that may not be related to the issue. Trying to cleanup / minimise code that way made the solution obvious for me so many times in the past.
I'm not sure you can group groups within groups. I might be wrong and hopefully someone more experienced with cp5 can correct me if I'm wrong.
If you use a single group and fix the syntax errors you could run something like this:
import controlP5.*;
ControlP5 cp5;
MyColorPicker cp;
PFont font, font2;
void setup() {
size(500, 300);
noStroke();
font = createFont ("Georgia Bold", 20);
font2 = createFont ("Georgia Bold",15);
cp5 = new ControlP5(this);
Group SetupGroup = cp5.addGroup("SETUP")
.setPosition(90,100)
.setWidth(150)
.setHeight(30)
.setFont(font2);
cp = new MyColorPicker(cp5, "MYPICKER");
cp.setPosition(50, 50).setColorValue(color(255, 000, 000, 255));
cp.moveTo(SetupGroup);
}
void draw(){
background(0);
}
class MyColorPicker extends ColorPicker {
MyColorPicker(ControlP5 cp5, String theName) {
super(cp5, cp5.getTab("default"), theName, 0, 0, 100, 10);
}
void setItemSize(int w, int h) {
sliderRed.setSize(w, h);
sliderGreen.setSize(w, h);
sliderBlue.setSize(w, h);
sliderAlpha.setSize(w, h);
sliderRed.setPosition(10,10);
sliderGreen.setPosition(10,100);
sliderBlue.setPosition(10,180);
sliderAlpha.setPosition(10,260);
}
}
Well done on extending the colour picker, not noobie after all ;)
If you want two colour pickers for two LED rings but not display both at the same time perhaps you could use an accordion ?
import controlP5.*;
ControlP5 cp5;
MyColorPicker cp1, cp2;
PFont font, font2;
void setup() {
size(500, 300);
noStroke();
font = createFont ("Georgia Bold", 20);
font2 = createFont ("Georgia Bold",15);
cp5 = new ControlP5(this);
Group ring1Group = cp5.addGroup("ring 1")
.setPosition(90,100)
.setWidth(150)
.setHeight(30)
.setFont(font2);
cp1 = new MyColorPicker(cp5, "ring 1 picker");
cp1.setPosition(50, 50).setColorValue(color(255, 000, 000, 255));
cp1.moveTo(ring1Group);
Group ring2Group = cp5.addGroup("ring 2")
.setPosition(90,240)
.setWidth(150)
.setHeight(30)
.setFont(font2);
cp2 = new MyColorPicker(cp5, "ring 2 picker");
cp2.setPosition(50, 50).setColorValue(color(000, 255, 000, 255));
cp2.moveTo(ring2Group);
cp5.addAccordion("ring colors")
.setPosition(40,40)
.setWidth(200)
.addItem(ring1Group)
.addItem(ring2Group)
;
}
void draw(){
background(0);
}
class MyColorPicker extends ColorPicker {
MyColorPicker(ControlP5 cp5, String theName) {
super(cp5, cp5.getTab("default"), theName, 0, 0, 100, 10);
}
void setItemSize(int w, int h) {
sliderRed.setSize(w, h);
sliderGreen.setSize(w, h);
sliderBlue.setSize(w, h);
sliderAlpha.setSize(w, h);
sliderRed.setPosition(10,10);
sliderGreen.setPosition(10,100);
sliderBlue.setPosition(10,180);
sliderAlpha.setPosition(10,260);
}
}
I'm not sure multiple nested levels a supported with the accordion component either. I would expect it to support a flat hierarchy.

How to crop the png image and remove its unused space using Canvas in flutter?

This attachment is from the rendered canvas image which is saved locally via canvas. In image I have drawn the square box which I want to render in canvas and save locally without left and right extra spaces. I just want to save the square box and remove that unnecessary space of PNG-image. So, how to do this?
widget-source-code:
return CustomPaint(
painter: PngImageCropper(image: image),
);
PngImageCropper-code
class PngImageCropper extends CustomPainter {
PngImageCropper({
this.image,
});
ui.Image image;
#override
void paint(Canvas canvas, Size size) {
_drawCanvas(size, canvas);
_saveCanvas(size);
}
Canvas _drawCanvas(Size size, Canvas canvas) {
final center = Offset(image.width / 2, image.height / 2);
double drawImageWidth = 0;
double drawImageHeight = 0;
Rect rect =
Rect.fromCircle(center: center, radius: _getCircularRadius(image));
Path path = Path()..addOval(rect);
canvas.clipPath(path);
Paint paint = new Paint();
canvas.drawImage(
image,
Offset(drawImageWidth, drawImageHeight),
paint,
);
return canvas;
}
_getCircularRadius(ui.Image image) {
return image.height > image.width
? image.width.toDouble() / 2
: image.height.toDouble() / 2;
}
_saveCanvas(Size size) async {
var pictureRecorder = ui.PictureRecorder();
var canvas = Canvas(pictureRecorder);
var paint = Paint();
paint.isAntiAlias = true;
_drawCanvas(size, canvas);
var pic = pictureRecorder.endRecording();
ui.Image img = await pic.toImage(image.width, image.height);
var byteData = await img.toByteData(format: ui.ImageByteFormat.png);
var buffer = byteData.buffer.asUint8List();
// var response = await get(imgUrl);
var documentDirectory = await getApplicationDocumentsDirectory();
File file = File(join(documentDirectory.path,
'${DateTime.now().toUtc().toIso8601String()}.png'));
file.writeAsBytesSync(buffer);
print(file.path);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
Worked source code! Answer by #pskink.
Future<List<int>> cropRonded(ui.Image image) async {
var recorder = ui.PictureRecorder();
var canvas = Canvas(recorder);
var imageSize = Size(image.width.toDouble(), image.height.toDouble());
var boundsToCrop = Rect.fromCenter(
center: imageSize.center(Offset.zero),
width: imageSize.shortestSide,
height: imageSize.shortestSide);
var matrix = Matrix4.translationValues(
-boundsToCrop.topLeft.dx, -boundsToCrop.topLeft.dy, 0)
.storage;
var paint = Paint()
..shader = ImageShader(image, TileMode.clamp, TileMode.clamp, matrix);
var radius = imageSize.shortestSide / 2;
canvas.drawCircle(Offset(radius, radius), radius, paint);
ui.Image cropped = await recorder
.endRecording()
.toImage(imageSize.shortestSide.toInt(), imageSize.shortestSide.toInt());
var byteData = await cropped.toByteData(format: ui.ImageByteFormat.png);
return byteData.buffer.asUint8List();
}

Canvas drawImage scale height and width in CustomPainter

I am developing an application in Flutter where I am using CustomPainter to draw an image which the user picks from gallery/camera. In addition to this the use can draw lines as well as change the stroke value, opacity colour and colour on it its own. For this I have created 2 classes DrawEditor and DrawingPainter the code for those two classes can be found below. Once the user picks an image
the image is passed to the DrawingPainter class where paint() is called and I draw my lines and image. The issue is in _paintBackgroundImage() in this method I draw the image by using canvas.drawImage(paintedImage, Offset.zero, Paint()); which does not scale the image.
Earlier I tried a different approach instead of drawing the image with canvas.drawImage(paintedImage, Offset.zero, Paint()) I used canvas.drawImageRect(paintedImage, inputSubRect, outputSubRect, Paint()); as can be seen below. However with this approach the draw picture Is pixelated so I prefer canvas.drawImage(paintedImage, Offset.zero, Paint()) as this does not damage the picture.
Any help with scaling the image will be greatly appreciated.
//Example 1 : Code with canvas.drawImageRect but image pixelated
final UI.Rect rect = UI.Offset.zero & _canvasSize;
final Size imageSize =Size(paintedImage.width.toDouble(), paintedImage.height.toDouble());
FittedSizes sizes = applyBoxFit(BoxFit.contain, imageSize, _canvasSize);
final Rect inputSubRect =
Alignment.center.inscribe(sizes.source, Offset.zero & imageSize);
final Rect outputSubRect =
Alignment.center.inscribe(sizes.destination, rect);
canvas.drawImageRect(paintedImage, inputSubRect, outputSubRect, Paint());
//Example 2 : Code with canvas.drawImageRect but image pixelated
canvas.drawRect(Rect.fromPoints(blurStartOffset, blurIndicatorOffset),
blurPaintSettings)
class DrawingPainter extends CustomPainter {
static int blurColor = 0xFFB3E5FC;
UI.Image paintedImage;
List<DrawingPoints> pointsList;
List<DrawingPoints> blurPointsList;
List<Offset> offsetPoints = List();
Size _canvasSize;
Offset blurIndicatorOffset;
Offset blurStartOffset;
bool isBlur;
List<BlurIndicatorOffsetWrapper> wrapperList = new List();
/// To blur an image we need a [MaskFilter]
Paint blurPaintSettings = new Paint()
..style = PaintingStyle.fill
..color = Color(blurColor)
..maskFilter = MaskFilter.blur(BlurStyle.normal, 3.0);
DrawingPainter(
{this.pointsList,
this.paintedImage,
this.blurPointsList,
this.blurIndicatorOffset,
this.blurStartOffset}) {
isBlur = blurIndicatorOffset != null;
}
#override
void paint(Canvas canvas, Size size) {
_canvasSize = size;
_paintBackgroundImage(canvas);
_drawPoints(canvas);
_drawBlurIndicator(canvas);
}
/// Paints the image onto the canvas
void _paintBackgroundImage(Canvas canvas) {
if (paintedImage == null) {
return;
}
final UI.Rect rect = UI.Offset.zero & _canvasSize;
final Size imageSize =
Size(paintedImage.width.toDouble(), paintedImage.height.toDouble());
FittedSizes sizes = applyBoxFit(BoxFit.contain, imageSize, _canvasSize);
final Rect inputSubRect =
Alignment.center.inscribe(sizes.source, Offset.zero & imageSize);
final Rect outputSubRect =
Alignment.center.inscribe(sizes.destination, rect);
canvas.drawImageRect(paintedImage, inputSubRect, outputSubRect, Paint());
}
/// Paints the lines onto the canvas
void _drawPoints(Canvas canvas) {
for (int i = 0; i < pointsList.length - 1; i++) {
if (pointsList[i] != null && pointsList[i + 1] != null) {
canvas.drawLine(pointsList[i].points, pointsList[i + 1].points,
pointsList[i].paint);
}
}
}
/// Paints the blur indicator onto the canvas
void _drawBlurIndicator(Canvas canvas) {
if (blurStartOffset != null && blurIndicatorOffset != null) {
canvas.drawRect(Rect.fromPoints(blurStartOffset, blurIndicatorOffset),
blurPaintSettings);
}
}
void setBlurIndicator(Offset localOffset) {
blurIndicatorOffset = localOffset;
}
#override
bool shouldRepaint(DrawingPainter oldDelegate) {
return true;
}
Future<Uint8List> save() async {
//Create canvas
// Set PictureRecorder on the canvas and start recording
UI.PictureRecorder recorder = UI.PictureRecorder();
Canvas canvas = Canvas(recorder);
//Draw image on new canvas
if (paintedImage != null) {
final Size imageSize = Size(paintedImage.width.toDouble(), paintedImage.height.toDouble());
//Here image is the problem
canvas.drawImage(paintedImage, Offset.zero, Paint());
}
//Draw points on new canvas
for (int i = 0; i < pointsList.length - 1; i++) {
if (pointsList[i] != null && pointsList[i + 1] != null) {
canvas.drawLine(
pointsList[i].points,
pointsList[i + 1].points,
pointsList[i].paint,
);
}
}
//End recording
final resultImage = await recorder.endRecording().toImage(
_canvasSize.width.floor(),
_canvasSize.height.floor(),
);
final imageBytes =
await resultImage.toByteData(format: UI.ImageByteFormat.png);
return imageBytes.buffer.asUint8List();
}
}
class DrawingPoints {
Paint paint;
Offset points;
DrawingPoints({this.points, this.paint});
}
enum SelectedMode { StrokeWidth, Opacity, Color, Blur }
I had a very similar requirement and the comment about using paintImage was exactly what I was looking for, so I figured I'd share what I ended up with.
I needed to scale down an image and draw overlays on top of that image. image is my original (unscaled) Image object.
var recorder = ui.PictureRecorder();
var imageCanvas = new Canvas(recorder);
var painter = _MarkupPainter(_overlays);
//Paint the image into a rectangle that matches the requested width/height.
//This will handle rescaling the image into the rectangle so that it will not be clipped.
paintImage(
canvas: imageCanvas,
rect: Rect.fromLTWH(0, 0, scaledWidth, scaledHeight),
image: image,
fit: BoxFit.scaleDown,
repeat: ImageRepeat.noRepeat,
scale: 1.0,
alignment: Alignment.center,
flipHorizontally: false,
filterQuality: FilterQuality.high
);
//Add the markup overlays.
painter.paint(imageCanvas, Size(scaledWidth, scaledHeight));
var picture = recorder.endRecording();
return picture.toImage(scaledWidth.toInt(), scaledHeight.toInt());

Overlapping issue in P3D when rotating

I'd like to rotate a cube in P3D and my code uses live sensor data to do that.
The problem is the previous orientations of the cube are always visible and overlap (as you can see in this image: http://i.stack.imgur.com/txXw6.jpg), which I don't want. I already tried the functions "hint(DISABLE_OPTIMIZED_STROKE)" and "hint(ENABLE_DEPTH_TEST)", which did nothing. Besides the hint functions I found nothing on a similar issue.
How can I render ONLY the current orientation?
import processing.serial.*;
import toxi.geom.*;
Serial myPort;
float qW;
float qX;
float qY;
float qZ;
float[] axis = new float[4];
Quaternion quat = new Quaternion(1, 0, 0, 0);
void setup()
{
size(600, 400, P3D);
myPort = new Serial(this, "COM3", 9600);
background(0);
lights();
}
void draw()
{
serialEvent();
quat.set(qW, qX, qY, qZ);
axis = quat.toAxisAngle();
pushMatrix();
translate(width/2, height/2, -100);
rotate(axis[0], axis[1], axis[2], axis[3]);
noFill();
stroke(255);
box(330, 200, 40);
popMatrix();
}
void serialEvent()
{
int newLine = 13; // new line character in ASCII
String message;
do
{
message = myPort.readStringUntil(newLine); // read from port until new line
if (message != null)
{
String[] list = split(trim(message), " ");
if (list.length >= 4)
{
qW = float(list[0]);
qX = float(list[1]);
qY = float(list[2]);
qZ = float(list[3]);
}
}
} while (message != null);
}
It looks like you're not clearing the frame buffer. Try adding background(0); as the first line in draw();:
void draw()
{
//clear background
background(0);
serialEvent();
quat.set(qW, qX, qY, qZ);
axis = quat.toAxisAngle();
pushMatrix();
translate(width/2, height/2, -100);
rotate(axis[0], axis[1], axis[2], axis[3]);
noFill();
stroke(255);
box(330, 200, 40);
popMatrix();
}
Off topic, it might worth checking out serialEvent().
You could do something like this in setup()
myPort = new Serial(this, "COM3", 9600);
myPort.bufferUntil('\n');
you shouldn't need to call serialEvent() in draw(), the serial library will do that, as it's buffering.
Then in serialEvent() hopefully you can get away with just:
String message = myPort.readString();
if(message !=null){
String[] list = split(trim(message), " ");
if (list.length >= 4)
{
qW = float(list[0]);
qX = float(list[1]);
qY = float(list[2]);
qZ = float(list[3]);
}
}

JavaME Resize Image

I have a byte[] that stores my image.
Now I want to be able to scale it and store it in another byte[].
I know how to scale Bitmaps, and can convert my from byte[] to Bitmap.
But I cant get the scaled Bitmap back into a byte[].
Blackberries
EncodedImage thumbnail = image.scaleImageToFill(50, 50); does nothing.
Im trying to create a thumbnail of 50x50. doesnt have to be exact. That is stored in a byte[].
How do I resize an image stored in a byte[], and keep it in a new byte[].
byte[] imageTaken;
//Create thumbnail from image taken
EncodedImage image = EncodedImage.createEncodedImage(imageTaken, 0, -1);
image.getBitmap();
EncodedImage thumbnail = image.scaleImageToFill(50, 50);
byte[] thumbArray = thumbnail.getData();
try this code
bitmap = resizeImage(your image, 50,50);
private static EncodedImage resizeImage(EncodedImage image, int width, int height) {
if (image == null) {
return image;
}
//return if image does not need a resizing
if (image.getWidth() <= width && image.getHeight() <= height) {
return image;
}
double scaleHeight, scaleWidth;
if (image.getWidth() > width && image.getHeight() > height) { //actual image is bigger than scale size
if (image.getWidth() > image.getHeight()) { //actual image width is more that height then scale with width
scaleWidth = width;
scaleHeight = (double)width / image.getWidth() * image.getHeight();
} else { //scale with height
scaleHeight = height;
scaleWidth = (double)height / image.getHeight() * image.getWidth();
}
} else if (width < image.getWidth()) { //scale with scale width or height
scaleWidth = width;
scaleHeight = (double)width / image.getWidth() * image.getHeight();
} else {
scaleHeight = height;
scaleWidth = (double)height / image.getHeight() * image.getWidth();
}
int w = Fixed32.div(Fixed32.toFP(image.getWidth()), Fixed32.toFP((int)scaleWidth));
int h = Fixed32.div(Fixed32.toFP(image.getHeight()), Fixed32.toFP((int)scaleHeight));
return image.scaleImage32(w, h);
}
Then convert the bitmap to Bytes -
JPEGEncodedImage encoder=JPEGEncodedImage.encode(bitmap,100);
byte[] array=encoder.getData();
int length=array.length;
ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream(length);
Base64OutputStream base64OutputStream = new Base64OutputStream( byteArrayOutputStream );
try{
base64OutputStream.write( array, 0, length );
base64OutputStream.flush();
base64OutputStream.close();
}
catch (IOException ioe){
//Dialog.alert("Error in encodeBase64() : "+ioe.toString());
System.out.println("Error in encodeBase64() : "+ioe.toString());
}
try {
byte[] data = Base64InputStream.decode(byteArrayOutputStream.toString());
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

Resources