feat:Image add pixel API,pass pixels directly to Image
This commit is contained in:
pengfei.zhou
@@ -44,141 +44,141 @@ class ImageDemo extends Panel {
|
||||
heightSpec: LayoutSpec.FIT,
|
||||
},
|
||||
}),
|
||||
// image({
|
||||
// imageBase64: button,
|
||||
// scaleType: ScaleType.ScaleToFill,
|
||||
// layoutConfig: {
|
||||
// widthSpec: LayoutSpec.JUST,
|
||||
// heightSpec: LayoutSpec.JUST,
|
||||
// },
|
||||
// width: 200,
|
||||
// height: 150 / 2.75,
|
||||
// stretchInset: {
|
||||
// left: 100,
|
||||
// top: 0,
|
||||
// right: 100,
|
||||
// bottom: 0
|
||||
// },
|
||||
// imageScale: 2.75,
|
||||
// }),
|
||||
// image({
|
||||
// imageBase64: button,
|
||||
// scaleType: ScaleType.ScaleToFill,
|
||||
// layoutConfig: {
|
||||
// widthSpec: LayoutSpec.JUST,
|
||||
// heightSpec: LayoutSpec.JUST,
|
||||
// },
|
||||
// width: 200,
|
||||
// height: 75,
|
||||
// stretchInset: {
|
||||
// left: 100,
|
||||
// top: 0,
|
||||
// right: 100,
|
||||
// bottom: 0
|
||||
// },
|
||||
// imageScale: 2,
|
||||
image({
|
||||
imageBase64: button,
|
||||
scaleType: ScaleType.ScaleToFill,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
width: 200,
|
||||
height: 150 / 2.75,
|
||||
stretchInset: {
|
||||
left: 100,
|
||||
top: 0,
|
||||
right: 100,
|
||||
bottom: 0
|
||||
},
|
||||
imageScale: 2.75,
|
||||
}),
|
||||
image({
|
||||
imageBase64: button,
|
||||
scaleType: ScaleType.ScaleToFill,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
width: 200,
|
||||
height: 75,
|
||||
stretchInset: {
|
||||
left: 100,
|
||||
top: 0,
|
||||
right: 100,
|
||||
bottom: 0
|
||||
},
|
||||
imageScale: 2,
|
||||
|
||||
// }),
|
||||
// label('Gif '),
|
||||
// image({
|
||||
// imageUrl: "https://www.w3.org/People/mimasa/test/imgformat/img/w3c_home_animation.gif",
|
||||
// scaleType: ScaleType.ScaleToFill,
|
||||
// imageScale: 3,
|
||||
// }),
|
||||
// label('APNG'),
|
||||
// image({
|
||||
// imageUrl: "https://upload.wikimedia.org/wikipedia/commons/1/14/Animated_PNG_example_bouncing_beach_ball.png",
|
||||
// }),
|
||||
// label('Animated WebP'),
|
||||
// image({
|
||||
// imageUrl: "https://p.upyun.com/demo/webp/webp/animated-gif-0.webp",
|
||||
}),
|
||||
label('Gif '),
|
||||
image({
|
||||
imageUrl: "https://www.w3.org/People/mimasa/test/imgformat/img/w3c_home_animation.gif",
|
||||
scaleType: ScaleType.ScaleToFill,
|
||||
imageScale: 3,
|
||||
}),
|
||||
label('APNG'),
|
||||
image({
|
||||
imageUrl: "https://upload.wikimedia.org/wikipedia/commons/1/14/Animated_PNG_example_bouncing_beach_ball.png",
|
||||
}),
|
||||
label('Animated WebP'),
|
||||
image({
|
||||
imageUrl: "https://p.upyun.com/demo/webp/webp/animated-gif-0.webp",
|
||||
|
||||
// }),
|
||||
// label('WebP'),
|
||||
// imageView = image({
|
||||
// imageUrl: "https://p.upyun.com/demo/webp/webp/jpg-0.webp",
|
||||
// layoutConfig: layoutConfig().just(),
|
||||
// width: 200,
|
||||
// height: 200,
|
||||
// loadCallback: (ret) => {
|
||||
// if (ret) {
|
||||
// imageView.width = ret.width
|
||||
// imageView.height = ret.height
|
||||
// }
|
||||
// }
|
||||
// }),
|
||||
// label('ScaleToFill'),
|
||||
// image({
|
||||
// imageUrl,
|
||||
// width: 300,
|
||||
// height: 300,
|
||||
// isBlur: true,
|
||||
// border: {
|
||||
// width: 2,
|
||||
// color: Color.GRAY,
|
||||
// },
|
||||
// scaleType: ScaleType.ScaleToFill,
|
||||
// layoutConfig: layoutConfig().just(),
|
||||
// loadCallback: (ret) => {
|
||||
// }
|
||||
// }),
|
||||
// label('ScaleAspectFit'),
|
||||
// image({
|
||||
// imageUrl,
|
||||
// width: 300,
|
||||
// height: 300,
|
||||
// border: {
|
||||
// width: 2,
|
||||
// color: Color.GRAY,
|
||||
// },
|
||||
// scaleType: ScaleType.ScaleAspectFit,
|
||||
// layoutConfig: layoutConfig().just(),
|
||||
// }),
|
||||
// label('ScaleAspectFill'),
|
||||
// image({
|
||||
// imageUrl,
|
||||
// width: 300,
|
||||
// height: 300,
|
||||
// border: {
|
||||
// width: 2,
|
||||
// color: Color.GRAY,
|
||||
// },
|
||||
// scaleType: ScaleType.ScaleAspectFill,
|
||||
// layoutConfig: layoutConfig().just(),
|
||||
// }),
|
||||
// label('ImageBase64'),
|
||||
// image({
|
||||
// imageBase64: img_base64[0],
|
||||
// width: 300,
|
||||
// height: 300,
|
||||
// border: {
|
||||
// width: 2,
|
||||
// color: Color.GRAY,
|
||||
// },
|
||||
// scaleType: ScaleType.ScaleAspectFill,
|
||||
// layoutConfig: layoutConfig().just(),
|
||||
// }),
|
||||
// label('StretchInset'),
|
||||
// image({
|
||||
// imageBase64: img_base64[1],
|
||||
// height: 60,
|
||||
// width: 134,
|
||||
// scaleType: ScaleType.ScaleAspectFill,
|
||||
// layoutConfig: layoutConfig().just(),
|
||||
// }),
|
||||
// image({
|
||||
// imageBase64: img_base64[1],
|
||||
// height: 60,
|
||||
// width: 294,
|
||||
// scaleType: ScaleType.ScaleToFill,
|
||||
// layoutConfig: layoutConfig().just(),
|
||||
// stretchInset: {
|
||||
// left: 0.85,
|
||||
// top: 0,
|
||||
// right: 0.149,
|
||||
// bottom: 0
|
||||
// }
|
||||
// }),
|
||||
}),
|
||||
label('WebP'),
|
||||
imageView = image({
|
||||
imageUrl: "https://p.upyun.com/demo/webp/webp/jpg-0.webp",
|
||||
layoutConfig: layoutConfig().just(),
|
||||
width: 200,
|
||||
height: 200,
|
||||
loadCallback: (ret) => {
|
||||
if (ret) {
|
||||
imageView.width = ret.width
|
||||
imageView.height = ret.height
|
||||
}
|
||||
}
|
||||
}),
|
||||
label('ScaleToFill'),
|
||||
image({
|
||||
imageUrl,
|
||||
width: 300,
|
||||
height: 300,
|
||||
isBlur: true,
|
||||
border: {
|
||||
width: 2,
|
||||
color: Color.GRAY,
|
||||
},
|
||||
scaleType: ScaleType.ScaleToFill,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
loadCallback: (ret) => {
|
||||
}
|
||||
}),
|
||||
label('ScaleAspectFit'),
|
||||
image({
|
||||
imageUrl,
|
||||
width: 300,
|
||||
height: 300,
|
||||
border: {
|
||||
width: 2,
|
||||
color: Color.GRAY,
|
||||
},
|
||||
scaleType: ScaleType.ScaleAspectFit,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
}),
|
||||
label('ScaleAspectFill'),
|
||||
image({
|
||||
imageUrl,
|
||||
width: 300,
|
||||
height: 300,
|
||||
border: {
|
||||
width: 2,
|
||||
color: Color.GRAY,
|
||||
},
|
||||
scaleType: ScaleType.ScaleAspectFill,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
}),
|
||||
label('ImageBase64'),
|
||||
image({
|
||||
imageBase64: img_base64[0],
|
||||
width: 300,
|
||||
height: 300,
|
||||
border: {
|
||||
width: 2,
|
||||
color: Color.GRAY,
|
||||
},
|
||||
scaleType: ScaleType.ScaleAspectFill,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
}),
|
||||
label('StretchInset'),
|
||||
image({
|
||||
imageBase64: img_base64[1],
|
||||
height: 60,
|
||||
width: 134,
|
||||
scaleType: ScaleType.ScaleAspectFill,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
}),
|
||||
image({
|
||||
imageBase64: img_base64[1],
|
||||
height: 60,
|
||||
width: 294,
|
||||
scaleType: ScaleType.ScaleToFill,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
stretchInset: {
|
||||
left: 0.85,
|
||||
top: 0,
|
||||
right: 0.149,
|
||||
bottom: 0
|
||||
}
|
||||
}),
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
|
||||
|
||||
@@ -13,8 +13,6 @@ import {
|
||||
VLayout,
|
||||
Text,
|
||||
Gravity,
|
||||
resourceLoader,
|
||||
imageDecoder,
|
||||
createRef,
|
||||
loge,
|
||||
} from "doric";
|
||||
@@ -25,6 +23,21 @@ import { img_base64 } from "./image_base64";
|
||||
export class ResourceDemo extends Panel {
|
||||
build(root: Group): void {
|
||||
const iv = createRef<Image>();
|
||||
async function click() {
|
||||
const imageInfo = await iv.current.getImageInfo(context);
|
||||
loge(imageInfo);
|
||||
const pixels = await iv.current.getImagePixels(context);
|
||||
loge(pixels.byteLength);
|
||||
const data = new Uint8Array(pixels);
|
||||
for (let i = 0; i < data.length - 4; i += 4) {
|
||||
data[i + 3] = 12;
|
||||
}
|
||||
iv.current.imagePixels = {
|
||||
width: imageInfo.width,
|
||||
height: imageInfo.height,
|
||||
pixels: pixels,
|
||||
};
|
||||
}
|
||||
<Scroller parent={root} layoutConfig={layoutConfig().most()}>
|
||||
<VLayout
|
||||
layoutConfig={layoutConfig().mostWidth().fitHeight()}
|
||||
@@ -39,7 +52,7 @@ export class ResourceDemo extends Panel {
|
||||
textAlignment={Gravity.Center}
|
||||
height={50}
|
||||
>
|
||||
Image Demo
|
||||
Resource Demo
|
||||
</Text>
|
||||
{label("Button")}
|
||||
<Image
|
||||
@@ -50,30 +63,15 @@ export class ResourceDemo extends Panel {
|
||||
}
|
||||
/>
|
||||
<Image
|
||||
ref={iv}
|
||||
image={
|
||||
new RemoteResource("https://p.upyun.com/demo/webp/webp/jpg-0.webp")
|
||||
}
|
||||
/>
|
||||
<Image
|
||||
image={new Base64Resource(img_base64[0])}
|
||||
ref={iv}
|
||||
onClick={async () => {
|
||||
const resource = new RemoteResource(
|
||||
"https://p.upyun.com/demo/webp/webp/jpg-0.webp"
|
||||
);
|
||||
const rawData = await resourceLoader(context).load(resource);
|
||||
loge(rawData.byteLength);
|
||||
const imageInfo = await imageDecoder(context).getImageInfo(
|
||||
resource
|
||||
);
|
||||
loge(imageInfo);
|
||||
const pixels = await imageDecoder(context).decodeToPixels(resource);
|
||||
const unit8Array = new Uint8Array(pixels);
|
||||
for (let i = 0; i < unit8Array.length; i += 4) {
|
||||
unit8Array[i] -= 20;
|
||||
}
|
||||
loge(pixels.byteLength);
|
||||
iv.current.image = resource;
|
||||
await click();
|
||||
}}
|
||||
/>
|
||||
</VLayout>
|
||||
|
||||
Reference in New Issue
Block a user