feat:extract FastBlur Function
This commit is contained in:
pengfei.zhou
osborn
parent
fe953fd86b
commit
ca73b594e4
@ -14,79 +14,12 @@ import {
|
||||
} from "doric";
|
||||
import { colors } from "./utils";
|
||||
|
||||
function pixelToRGBA(pixel: number) {
|
||||
const r = pixel & 0xff;
|
||||
const g = (pixel >> 8) & 0xff;
|
||||
const b = (pixel >> 16) & 0xff;
|
||||
const a = (pixel >> 24) & 0xff;
|
||||
return { r, g, b, a };
|
||||
}
|
||||
|
||||
function rgbaToPixel(rgba: { r: number; g: number; b: number; a: number }) {
|
||||
return (
|
||||
(rgba.r & 0xff) +
|
||||
((rgba.g & 0xff) << 8) +
|
||||
((rgba.b & 0xff) << 16) +
|
||||
((rgba.a & 0xff) << 24)
|
||||
);
|
||||
}
|
||||
|
||||
@Entry
|
||||
export class ImageProcessorDemo extends Panel {
|
||||
build(root: Group): void {
|
||||
const iv = createRef<Image>();
|
||||
const imageUrl = "https://doric.pub/about/The_Parthenon_in_Athens.jpg"; //"https://doric.pub/logo.png";
|
||||
<Scroller parent={root} layoutConfig={layoutConfig().most()}>
|
||||
<VLayout
|
||||
layoutConfig={layoutConfig().mostWidth().fitHeight()}
|
||||
space={20}
|
||||
gravity={Gravity.Center}
|
||||
>
|
||||
<Text
|
||||
layoutConfig={layoutConfig().mostWidth().justHeight()}
|
||||
textSize={30}
|
||||
textColor={Color.WHITE}
|
||||
backgroundColor={colors[5]}
|
||||
textAlignment={Gravity.Center}
|
||||
height={50}
|
||||
>
|
||||
图片处理
|
||||
</Text>
|
||||
<Image
|
||||
ref={iv}
|
||||
layoutConfig={layoutConfig().justWidth().fitHeight()}
|
||||
width={(Environment.screenWidth / 5) * 4}
|
||||
imageUrl={imageUrl}
|
||||
/>
|
||||
{(
|
||||
[
|
||||
[
|
||||
"黑白",
|
||||
async () => {
|
||||
const imageInfo = await iv.current.getImageInfo(context);
|
||||
const pixels = await iv.current.getImagePixels(context);
|
||||
const data = new Uint32Array(pixels);
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let { r, g, b, a } = pixelToRGBA(data[i]);
|
||||
r = g = b = Math.floor(r * 0.2989 + g * 0.587 + b * 0.114);
|
||||
data[i] = rgbaToPixel({ r, g, b, a });
|
||||
}
|
||||
iv.current.imagePixels = {
|
||||
width: imageInfo.width,
|
||||
height: imageInfo.height,
|
||||
pixels: pixels,
|
||||
};
|
||||
},
|
||||
],
|
||||
[
|
||||
"FastBlur",
|
||||
async () => {
|
||||
const imageInfo = await iv.current.getImageInfo(context);
|
||||
const pixels = await iv.current.getImagePixels(context);
|
||||
const data = new Uint32Array(pixels);
|
||||
const radius = 30;
|
||||
const w = imageInfo.width;
|
||||
const h = imageInfo.height;
|
||||
function fastBlur(
|
||||
pixels: Uint32Array | Array<number>,
|
||||
w: number,
|
||||
h: number,
|
||||
radius: number
|
||||
) {
|
||||
const wm = w - 1;
|
||||
const hm = h - 1;
|
||||
const wh = w * h;
|
||||
@ -135,7 +68,7 @@ export class ImageProcessorDemo extends Panel {
|
||||
bsum =
|
||||
0;
|
||||
for (i = -radius; i <= radius; i++) {
|
||||
p = data[yi + Math.min(wm, Math.max(i, 0))];
|
||||
p = pixels[yi + Math.min(wm, Math.max(i, 0))];
|
||||
sir = stack[i + radius];
|
||||
sir[0] = p & 0xff;
|
||||
sir[1] = (p >> 8) & 0xff;
|
||||
@ -175,7 +108,7 @@ export class ImageProcessorDemo extends Panel {
|
||||
if (y == 0) {
|
||||
vmin[x] = Math.min(x + radius + 1, wm);
|
||||
}
|
||||
p = data[yw + vmin[x]];
|
||||
p = pixels[yw + vmin[x]];
|
||||
|
||||
sir[0] = p & 0xff;
|
||||
sir[1] = (p >> 8) & 0xff;
|
||||
@ -248,11 +181,11 @@ export class ImageProcessorDemo extends Panel {
|
||||
yi = x;
|
||||
stackpointer = radius;
|
||||
for (y = 0; y < h; y++) {
|
||||
data[yi] =
|
||||
pixels[yi] =
|
||||
dv[rsum] |
|
||||
((dv[gsum] & 0xff) << 8) |
|
||||
((dv[bsum] & 0xff) << 16) |
|
||||
(data[yi] & 0xff000000);
|
||||
(pixels[yi] & 0xff000000);
|
||||
rsum -= routsum;
|
||||
gsum -= goutsum;
|
||||
bsum -= boutsum;
|
||||
@ -295,12 +228,84 @@ export class ImageProcessorDemo extends Panel {
|
||||
yi += w;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function pixelToRGBA(pixel: number) {
|
||||
const r = pixel & 0xff;
|
||||
const g = (pixel >> 8) & 0xff;
|
||||
const b = (pixel >> 16) & 0xff;
|
||||
const a = (pixel >> 24) & 0xff;
|
||||
return { r, g, b, a };
|
||||
}
|
||||
|
||||
function rgbaToPixel(rgba: { r: number; g: number; b: number; a: number }) {
|
||||
return (
|
||||
(rgba.r & 0xff) +
|
||||
((rgba.g & 0xff) << 8) +
|
||||
((rgba.b & 0xff) << 16) +
|
||||
((rgba.a & 0xff) << 24)
|
||||
);
|
||||
}
|
||||
|
||||
@Entry
|
||||
export class ImageProcessorDemo extends Panel {
|
||||
build(root: Group): void {
|
||||
const iv = createRef<Image>();
|
||||
const imageUrl = "https://doric.pub/about/The_Parthenon_in_Athens.jpg"; //"https://doric.pub/logo.png";
|
||||
<Scroller parent={root} layoutConfig={layoutConfig().most()}>
|
||||
<VLayout
|
||||
layoutConfig={layoutConfig().mostWidth().fitHeight()}
|
||||
space={20}
|
||||
gravity={Gravity.Center}
|
||||
>
|
||||
<Text
|
||||
layoutConfig={layoutConfig().mostWidth().justHeight()}
|
||||
textSize={30}
|
||||
textColor={Color.WHITE}
|
||||
backgroundColor={colors[5]}
|
||||
textAlignment={Gravity.Center}
|
||||
height={50}
|
||||
>
|
||||
图片处理
|
||||
</Text>
|
||||
<Image
|
||||
ref={iv}
|
||||
layoutConfig={layoutConfig().justWidth().fitHeight()}
|
||||
width={(Environment.screenWidth / 5) * 4}
|
||||
imageUrl={imageUrl}
|
||||
/>
|
||||
{(
|
||||
[
|
||||
[
|
||||
"黑白",
|
||||
async () => {
|
||||
const imageInfo = await iv.current.getImageInfo(context);
|
||||
const pixels = await iv.current.getImagePixels(context);
|
||||
const data = new Uint32Array(pixels);
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let { r, g, b, a } = pixelToRGBA(data[i]);
|
||||
r = g = b = Math.floor(r * 0.2989 + g * 0.587 + b * 0.114);
|
||||
data[i] = rgbaToPixel({ r, g, b, a });
|
||||
}
|
||||
iv.current.imagePixels = {
|
||||
width: imageInfo.width,
|
||||
height: imageInfo.height,
|
||||
pixels: pixels,
|
||||
};
|
||||
},
|
||||
],
|
||||
[
|
||||
"FastBlur",
|
||||
async () => {
|
||||
const imageInfo = await iv.current.getImageInfo(context);
|
||||
const pixels = await iv.current.getImagePixels(context);
|
||||
const data = new Uint32Array(pixels);
|
||||
fastBlur(data, imageInfo.width, imageInfo.height, 30);
|
||||
iv.current.imagePixels = {
|
||||
width: imageInfo.width,
|
||||
height: imageInfo.height,
|
||||
pixels: pixels,
|
||||
};
|
||||
loge(stack);
|
||||
},
|
||||
],
|
||||
[
|
||||
|
||||
Reference in New Issue
Block a user