cornerstoneJS默认加载dicom影像数据,将识别到的dicom数据转换成imageData数据,在界面上展示。故,cornerstoneJS也可直接加载imageData。
imageData数据的data是一个数组,每四个元素代表一个点,四个元素分别表示R、G、B、A,即三元素 + 透明度。
具体代码如下:
function getExampleImage(imgId,pixelData) {
const width = 512
const height = 512
function loadPixelData () {
const canvas = document.createElement('canvas')
const img = document.createElement('img')
img.src = imgId
// 用canvas获取图像数据的像素矩阵(数组)
canvas.width = width
canvas.height = height
canvas.getContext('2d').drawImage(img, 0, 0)
const pixelDataObj = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height) // 获取画布上的图像像素矩阵
return pixelDataObj.data
// 若是imageData数据,假如矩阵数据为:pixelData,则函数中以上操作直接取消,直接返回pixelData
// return pixelData
}
const image = {
imageId: imageId,
minPixelValue: 0,
maxPixelValue: 255,
slope: 1.0,
intercept: 0,
windowCenter: 127,
windowWidth: 256,
getPixelData: loadPixelData, // 要求图像的像素矩阵
rows: height,
columns: width,
height: height,
width: width,
color: true, // 注意:为彩色图像
rgba: false, // 注意:使用rgbs表示(canvas直接导出)
columnPixelSpacing: 0.8984375,
rowPixelSpacing: 0.8984375,
sizeInBytes: width * height * 4
}
return {
promise: new Promise((resolve) => {
resolve(image)
}),
cancelFn: undefined
}
}
应用:
/**
* base64:图片的base64数据
*/
const image = getExampleImage(base64).promise // 矩阵数据
/**
* fil1:1:自定义名称,可以随意更改
* matrix:矩阵数据
*/
// const image = getExampleImage('fil1:1', matrix).promise // 矩阵数据
// 以上两种方式都可使用
const viewport = cornerstone.getDefaultViewportForImage(this.element, image)
// this.element:元素,代表在此元素下创建canvas,渲染图片
cornerstone.displayImage(this.element, image, viewport)