invert image black to white in flutter - flutter

I have a bitmap image with black and white color I just need to invert the image and display how can I convert and display image. I have inverted bitmap image in java using this code can anyone suggest me how to do this in a flutter.
private Bitmap createInvertedBitmap(Bitmap src) {
ColorMatrix colorMatrix_Inverted =
new ColorMatrix(new float[] {
-1, 0, 0, 0, 255,
0, -1, 0, 0, 255,
0, 0, -1, 0, 255,
0, 0, 0, 1, 0});
ColorFilter ColorFilter_Sepia = new ColorMatrixColorFilter(
colorMatrix_Inverted);
Bitmap bitmap = Bitmap.createBitmap(src.getWidth(), src.getHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
paint.setColorFilter(ColorFilter_Sepia);
canvas.drawBitmap(src, 0, 0, paint);
return bitmap;
}

Now it is possible to change/invert the color via ColorFiltered class
You can refer to this blog for more details: https://www.burkharts.net/apps/blog/over-the-rainbow-colour-filters/
Another solution
You can try using ShaderMask class, and try passing it to the corresponding Shader, such as InvertColorShader. Currently, no shader can do this as of now.
Also check out BlendMode class to achieve your desired result.

Related

WebGL Texture pixel unexpected color in PNG [duplicate]

This question already has an answer here:
Fragment Shader: wrong color value from texture
(1 answer)
Closed 6 months ago.
I am trying to load a texture into WebGl and read a pixel color from it (to eventually use in a shader). When I read the pixel color at position 70,70 in python, I get (255,0,0,255) which is what I expected. But when I read it in WebGL, I get (255,38,0,255). What am I missing here?
Image: https://i.imgur.com/jGA12NE.png
JSFiddle: https://jsfiddle.net/6u7h0sj1/3/
Python code:
import requests
from io import BytesIO
response = requests.get('https://i.imgur.com/jGA12NE.png')
im = Image.open(BytesIO(response.content))
pixels=im.load()
print(pixels[70,70])
Javascript code to read pixel of texture:
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const gl= canvas.getContext("webgl",{"antialias":true});
function loadTexture(){
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
const level = 0;
const internalFormat = gl.RGBA;
const width = 1;
const height = 1;
const border = 0;
const srcFormat = gl.RGBA;
const srcType = gl.UNSIGNED_BYTE;
const pixel = new Uint8Array([0, 0, 255, 255]); // opaque blue
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
width, height, border, srcFormat, srcType,
pixel);
const image = new Image();
image.crossOrigin = ""; // or "anonymous", will be interpreted the same
image.onload = () => {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
srcFormat, srcType, image);
let width=1;
let height=1;
let x=70;
let y=70;
var fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE) {
var pixels = new Uint8Array(width * height * 4);
gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
document.getElementById("test").textContent=pixels;
}
};
image.src = 'https://i.imgur.com/jGA12NE.png';
}
loadTexture();
Found this helpful answer:
Fragment Shader: wrong color value from texture
Solved by adding the following line before loading the texture:
gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, false);

Get high precision output from shader

I want to render high precision float values to a texture, but the values I read are clamped to [0, 1]. Is there anyway to get unclamped values?
Here is the fragment portion of the shader code:
float4 frag (v2f i) : SV_TARGET
{
return float4(0.098, 0.698, 200, 100000); // Obviously a contrived example.
}
Here is the code creating the texture to render to:
RenderTextureDescriptor rtd = new RenderTextureDescriptor(1, 1, RenderTextureFormat.ARGBFloat);
RenderTexture rt = RenderTexture.GetTemporary(rtd);
RenderTexture.active = rt;
mainCamera.SetReplacementShader(selectionShader, "");
mainCamera.Render(); // OnPostRender will be called
mainCamera.ResetReplacementShader();
Read code (in OnPostRender):
Texture2D hitTexture = new Texture2D(1, 1, TextureFormat.RGBAFloat, false);
Rect rect = new Rect(0, 0, 1, 1);
hitTexture.ReadPixels(rect, 0, 0, false);
Color pixelSample = hitTexture.GetPixel(0, 0);
Debug.Log("Sample: " + pixelSample);
The output is "RGBA(0.098, 0.698, 1.000, 1.000)", rather than "RGBA(0.098, 0.698, 200, 100000)" as hoped/expected.

How to use DrawNode with RenderTexture cocos2d-x

I cannot draw a simple line or a dot with DrawNode and RenderTexture.
This is how to I implemented:
AppDelegate.cpp
auto scene = Scene::create();
auto layer = BackgroundLayer::create();
scene->addChild(layer);
// run
director->runWithScene(scene);
BackgroundLayer.cpp
bool BackgroundLayer::init()
{
if ( !LayerColor::initWithColor(Color4B::WHITE) )
{
return false;
}
auto renderTexture = RenderTexture::create(300, 200);
renderTexture->beginWithClear(0, 0, 0, 1); // black
auto drawPrimitive = DrawNode::create();
drawPrimitive->retain();
drawPrimitive->drawDot(Point(250, 250), 20, Color4F::RED);
drawPrimitive->visit();
renderTexture->end();
renderTexture->retain();
renderTexture->setPosition(this->getContentSize()/2);
this->addChild(renderTexture, 10000);
}
I tried with some complex shape with DrawNode, but the result is just a black rectangle stayed in the center of the screen.
I compile with cocos2d-x v3.6 & VS2013.
auto renderTexture = RenderTexture::create(50, 50);
renderTexture->beginWithClear(0, 0, 0, 1); // black
auto drawPrimitive = DrawNode::create();
drawPrimitive->retain();
drawPrimitive->drawDot(Point(10, 10), 2, Color4F::RED);
drawPrimitive->visit();
renderTexture->end();
renderTexture->retain();
renderTexture->setPosition(SCREENSIZE.width/2,SCREENSIZE.height/2);
this->addChild(renderTexture, 10000);
Try this it will create red dot on the texture

unable to set background color on iTextSharp signature appearance

Does anyone have any ideas on how to set the background color on the PdfSignatureAppearance rectangle in iTextSharp? I create the PdfSignatureAppearance object and can set its positioning on the page, but the rectangle only has a transparent background. I'm trying to apply a color (any really).
I've tried creating a new iTextSharp.text.Rectangle then setting the rect.BackgroundColor = new BaseColor(System.Drawing.Color.Yellow); That doesn't work. I saw someone else trying to something similar by applying the styles to the layer2 of the signature appearance object. I've tried these with no luck.
PdfTemplate sigAppLayer2 = appearance.GetLayer(2);
sigAppLayer2.SetRGBColorFill(255, 0, 0);
sigAppLayer2.SetGrayFill(2);
sigAppLayer2.BoundingBox.BackgroundColor = new BaseColor(System.Drawing.Color.Yellow);
Anytime I try one of the above styling changes to the layer2 the visible signature disappears on the PDF. If I try applying it to layer 0 or layer 1 then nothing happens. I'm assuming then I'm touching the correct layer (2).
Any ideas? The goal is to just get a background on the signature box vs having it be transparent.
See comment below. I tried this as well setting against layer 2 and layer 0. Both result in a red box, but the signature text is missing.
PdfTemplate sigAppLayer2 = appearance.GetLayer(2);
Rectangle rect = sigAppLayer2.BoundingBox;
PdfTemplate sigAppLayer0 = appearance.GetLayer(0);
sigAppLayer0.SetRGBColorFill(255, 0, 0);
sigAppLayer0.Rectangle(rect.Left, rect.Bottom, rect.Width, rect.Height);
sigAppLayer0.Fill();
You need to draw the rectangle and fill that rectangle with the fill color.
From memory (untested), you need something like this:
PdfTemplate sigAppLayer2 = appearance.GetLayer(2);
Rectangle rect = sigAppLayer2.BoundingBox;
sigAppLayer2.SetRGBColorFill(255, 0, 0);
sigAppLayer2.Rectangle(rect.Left, rect.Bottom, rect.Width, rect.Height);
sigAppLayer2.Fill();
This is the way:
PdfTemplate sigAppLayer2 = appearance.GetLayer(2);
Rectangle rect = sigAppLayer2.BoundingBox;
sigAppLayer2.SetRGBColorFill(255, 0, 0);
sigAppLayer2.Rectangle(rect.Left, rect.Bottom, rect.Width, rect.Height);
sigAppLayer2.Fill();
sigAppLayer2.ResetRGBColorFill();// <--------- you needs this
sigAppLayer2.BeginText() ...etc

OpenGL ES 2.0 texturing

I'm trying to render a simple textured quad in OpenGL ES 2.0 on an iPhone. The geometry is fine and I get the expected quad if I use a solid color in my shader:
gl_FragColor = vec4 (1.0, 0.0, 0.0, 1.0);
And I get the expected gradients if I render the texture coordinates directly:
gl_FragColor = vec4 (texCoord.x, texCoord.y, 0.0, 1.0);
The image data is loaded from a UIImage, scaled to fit within 1024x1024, and loaded into a texture like so:
glGenTextures (1, &_texture);
glBindTexture (GL_TEXTURE_2D, _texture);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA,
GL_UNSIGNED_BYTE, data);
width, height, and the contents of data are all correct, as examined in the debugger.
When I change my fragment shader to use the texture:
gl_FragColor = texture2D (tex, texCoord);
... and bind the texture and render like so:
glActiveTexture (GL_TEXTURE0);
glBindTexture (GL_TEXTURE_2D, _texture);
// this is unnecessary, as it defaults to 0, but for completeness...
GLuint texLoc = glGetUniformLocation(_program, "tex");
glUniform1i(texLoc, 0);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
... I get nothing. A black quad. glGetError() doesn't return an error and glIsTexture(_texture) returns true.
What am I doing wrong here? I've been over and over every example I could find online, but everybody is doing it exactly as I am, and the debugger shows my parameters to the various GL functions are what I expect them to be.
After glTexImage2D, set the MIN/MAG filters with glTexParameter, the defaults use mipmaps so the texture is incomplete with that code.
I was experiencing the same issue (black quad) and could not find an answer until a response by jfcalvo from this question led me to the cause. Basically make sure you are not loading the texture in a different thread.
make sure you set the texture wrap parameters to GL_CLAMP_TO_EDGE in both S and T directions. Without this, the texture is incomplete and will appear black.
make sure that you are calling (glTexImage2D) with right formats(constants)
make sure that you are freeing resources of image after glTexImage2D
that's how i'm do it on android:
int[] textures = new int[1];
GLES20.glGenTextures(1, textures, 0);
mTextureID = textures[0];
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureID);
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER,
GLES20.GL_NEAREST);
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D,
GLES20.GL_TEXTURE_MAG_FILTER,
GLES20.GL_LINEAR);
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S,
GLES20.GL_REPEAT);
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T,
GLES20.GL_REPEAT);
InputStream is = mContext.getResources()
.openRawResource(R.drawable.ywemmo2);
Bitmap bitmap;
try {
bitmap = BitmapFactory.decodeStream(is);
} finally {
try {
is.close();
} catch(IOException e) {
// Ignore.
}
GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);
bitmap.recycle();
maybe you forgot to
glEnable(GL_TEXTURE_2D);
is such case, texture2D in the shader would return black, as the OP seems to suffer.