# Based on the ImageCPRMapper example, get a screenshot of the cross section of the blood vessel at a central point
**URL:** https://discourse.vtk.org/t/based-on-the-imagecprmapper-example-get-a-screenshot-of-the-cross-section-of-the-blood-vessel-at-a-central-point/14390
**Category:** vtk.js
**Created:** [August 12, 2024, 2:27am UTC](https://discourse.vtk.org/t/based-on-the-imagecprmapper-example-get-a-screenshot-of-the-cross-section-of-the-blood-vessel-at-a-central-point/14390 "2024-08-12T02:27:45Z")
**Posts on this page:** 15
**Page:** 1
### Author:  [@flourishing](https://discourse.vtk.org/u/flourishing)
#### Post date: [August 12, 2024, 2:27am UTC](https://discourse.vtk.org/t/based-on-the-imagecprmapper-example-get-a-screenshot-of-the-cross-section-of-the-blood-vessel-at-a-central-point/14390/1 "2024-08-12T02:27:45Z")
Hey vtk community,
according to the ImageCPRMapper example, how do I get a screenshot of the cross section of the blood vessel at this center point based on the point of the center line of the blood vessel, and a cross section of the different layers above and below the cross section of this center line
---
### Author:  [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [August 12, 2024, 6:12am UTC](https://discourse.vtk.org/t/based-on-the-imagecprmapper-example-get-a-screenshot-of-the-cross-section-of-the-blood-vessel-at-a-central-point/14390/2 "2024-08-12T06:12:56Z")
You need to create as many cente-lines as you want screenshots. The ImageCPRMapper example shows how to create the first screenshot. For the next screenshots (above and below), you need to manually/programmaticaly create new centerlines with points translated above and below the original centerline.
---
### Author:  [@flourishing](https://discourse.vtk.org/u/flourishing)
#### Post date: [August 12, 2024, 6:19am UTC](https://discourse.vtk.org/t/based-on-the-imagecprmapper-example-get-a-screenshot-of-the-cross-section-of-the-blood-vessel-at-a-central-point/14390/3 "2024-08-12T06:19:38Z")
I’m not correct. I’m getting a cross-section of the blood vessels near the center line
---
### Author:  [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [August 12, 2024, 6:36am UTC](https://discourse.vtk.org/t/based-on-the-imagecprmapper-example-get-a-screenshot-of-the-cross-section-of-the-blood-vessel-at-a-central-point/14390/4 "2024-08-12T06:36:36Z")
my bad, you meant “cross-sections”, (so the vessel appears as a “circle”).
Then you simply need to use the ResliceCursorWidget example. You can feed it with an origin and a plane normal (both extracted from the centerline).
---
### Author:  [@flourishing](https://discourse.vtk.org/u/flourishing)
#### Post date: [August 12, 2024, 9:06am UTC](https://discourse.vtk.org/t/based-on-the-imagecprmapper-example-get-a-screenshot-of-the-cross-section-of-the-blood-vessel-at-a-central-point/14390/6 "2024-08-12T09:06:43Z")
Thanks. I’ll try
---
### Author:  [@flourishing](https://discourse.vtk.org/u/flourishing)
#### Post date: [August 21, 2024, 5:40am UTC](https://discourse.vtk.org/t/based-on-the-imagecprmapper-example-get-a-screenshot-of-the-cross-section-of-the-blood-vessel-at-a-central-point/14390/7 "2024-08-21T05:40:25Z")
Here’s how I implemented it, but for some reason no pictures appear，
```auto
let normals = []
const referenceDirection = [0, 0, 1]
for (let i = 0; i < mapper.getCenterlineTangentDirections().length / 3; i++) {
const tangent = [
mapper.getCenterlineTangentDirections()[i],
mapper.getCenterlineTangentDirections()[i + 1],
mapper.getCenterlineTangentDirections()[i + 2]
]
const normal = [0, 0, 0]
vtkMath.cross(tangent, referenceDirection, normal)
vtkMath.normalize(normal)
normals.push(normal)
}
const genericRenderWindow = GenericRenderWindow.newInstance()
const renderer = genericRenderWindow.getRenderer()
const renderWindow = genericRenderWindow.getRenderWindow()
renderer.setBackground([0, 0, 0])
genericRenderWindow.setContainer(HtmlElement)
const slicePlane = vtkPlane.newInstance()
slicePlane.setNormal(...this.normals[0])
slicePlane.setOrigin(imageData.getCenter())
const mapper2 = vtkImageResliceMapper.newInstance()
mapper2.setSlicePlane(slicePlane)
mapper2.setSlabType(1) // SlabTypes.MAX
mapper2.setInputData(imageData)
const actor = vtkImageSlice.newInstance()
actor.setMapper(mapper2)
renderer.addActor(actor)
renderer.setBackground(0.2, 0.3, 0.4)
renderWindow.render()
```
---
### Author:  [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [August 21, 2024, 6:00am UTC](https://discourse.vtk.org/t/based-on-the-imagecprmapper-example-get-a-screenshot-of-the-cross-section-of-the-blood-vessel-at-a-central-point/14390/8 "2024-08-21T06:00:30Z")
I don’t see anything wrong with your code. You might want to check your plane normal.
Alternatively, you can try modifying the ImageResliceMapper example progressively with your code to see when it stops working.
---
### Author:  [@flourishing](https://discourse.vtk.org/u/flourishing)
#### Post date: [August 22, 2024, 1:59am UTC](https://discourse.vtk.org/t/based-on-the-imagecprmapper-example-get-a-screenshot-of-the-cross-section-of-the-blood-vessel-at-a-central-point/14390/9 "2024-08-22T01:59:12Z")
Now the plane can display the image, but the plane normal vector “normals” of my center point calculates the wrong value such as [0,-0,0]. How to calculate the plane normal vector of the center point? And how should the camera’s angle of view be calculated (renderer.getActiveCamera().elevation(angle)), so that it can look at the section of the center point
---
### Author:  [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [August 22, 2024, 6:41am UTC](https://discourse.vtk.org/t/based-on-the-imagecprmapper-example-get-a-screenshot-of-the-cross-section-of-the-blood-vessel-at-a-central-point/14390/10 "2024-08-22T06:41:57Z")
For the normal vector computation, please consider “geometry” forums.
For the camera, you can set its focal point (center of your image) and its position (center of your image + plane vector if you are in parrallel projection)
---
### Author:  [@flourishing](https://discourse.vtk.org/u/flourishing)
#### Post date: [December 31, 2024, 7:48am UTC](https://discourse.vtk.org/t/based-on-the-imagecprmapper-example-get-a-screenshot-of-the-cross-section-of-the-blood-vessel-at-a-central-point/14390/12 "2024-12-31T07:48:16Z")
Referring to the example “[vtk.js](https://kitware.github.io/vtk-js/examples/ImageResliceMapper.html)”, why is the following code for obtaining the cross-section of a blood vessel not quite right?
```auto
const mapper = vtkImageResliceMapper.newInstance()
const slicePlane = vtkPlane.newInstance()
slicePlane.setNormal(normal)
mapper.setSlicePlane(slicePlane)
mapper.setSlabType(SlabTypes.MAX)
const actor = vtkImageSlice.newInstance()
actor.setMapper(mapper)
renderer.addActor(actor)
mapper.setInputData(currentImage)
slicePlane.setOrigin(...currentPoint)
renderer.getActiveCamera().setParallelProjection(false)
renderer.getActiveCamera().setFocalPoint(...focalPoint)
renderer.getActiveCamera().setPosition(...currentPoint)
renderer.getActiveCamera().setViewUp(...normal)
renderer.resetCamera()
renderer.resetCameraClippingRange()
renderWindow.render()
```
---
### Author:  [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [December 31, 2024, 8:40am UTC](https://discourse.vtk.org/t/based-on-the-imagecprmapper-example-get-a-screenshot-of-the-cross-section-of-the-blood-vessel-at-a-central-point/14390/13 "2024-12-31T08:40:36Z")
Your code seems to be very different from the VTK.js example. Where is `currentImage` coming from ?
---
### Author:  [@flourishing](https://discourse.vtk.org/u/flourishing)
#### Post date: [January 2, 2025, 6:35am UTC](https://discourse.vtk.org/t/based-on-the-imagecprmapper-example-get-a-screenshot-of-the-cross-section-of-the-blood-vessel-at-a-central-point/14390/14 "2025-01-02T06:35:35Z")
The currentImage is obtained from the link([vtk-js/Sources/Rendering/Core/ImageCPRMapper/example/index.js at master · Kitware/vtk-js · GitHub](https://github.com/Kitware/vtk-js/blob/master/Sources/Rendering/Core/ImageCPRMapper/example/index.js#L320)). The result obtained will be used to crop the cross-section of the blood vessel with the above code.
---
### Author:  [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [January 2, 2025, 8:16am UTC](https://discourse.vtk.org/t/based-on-the-imagecprmapper-example-get-a-screenshot-of-the-cross-section-of-the-blood-vessel-at-a-central-point/14390/15 "2025-01-02T08:16:20Z")
Gotcha.
How about `currentPoint` ?
I doubt that the camera `view up` should be the plane `normal`. It should be orthogonal to it…
---
### Author:  [@flourishing](https://discourse.vtk.org/u/flourishing)
#### Post date: [January 2, 2025, 9:20am UTC](https://discourse.vtk.org/t/based-on-the-imagecprmapper-example-get-a-screenshot-of-the-cross-section-of-the-blood-vessel-at-a-central-point/14390/16 "2025-01-02T09:20:45Z")
currentPoint is a point on the center of a certain blood vessel. Currently, now, the camera `view up` is normal.The code is as follows
```auto
let direction1 = vec3.subtract([], point1, point2)
let direction2 = vec3.subtract([], point2, point3)
vec3.normalize(direction1, direction1)
vec3.normalize(direction2, direction2)
let normal = vec3.subtract([], direction1, direction2)
vec3.normalize(normal, normal)
let Bnormal = vec3.cross([], direction2, normal)
```
the camera `view up` is set to Bnormal ? Or how to change
---
### Author:  [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [January 2, 2025, 9:48am UTC](https://discourse.vtk.org/t/based-on-the-imagecprmapper-example-get-a-screenshot-of-the-cross-section-of-the-blood-vessel-at-a-central-point/14390/17 "2025-01-02T09:48:51Z")
you have a high chance of having normal to be [0,0] if point1, point2 and point3 are on the same line.
I would do:
```auto
focalPoint = point2;
normal = normalize( direction1 + direction2 )
currentPoint = focalPoint + normal
viewUp = normalize( direction2 - direction1 ) // or something like vtkMath.perpendiculars(normal, [], viewUp)
```