当前位置：首页 > news >正文

cornerstoneJS加载图片（base、矩阵）

news 2025/8/27 5:46:33

cornerstoneJS默认加载dicom影像数据，将识别到的dicom数据转换成imageData数据，在界面上展示。故，cornerstoneJS也可直接加载imageData。

imageData数据的data是一个数组，每四个元素代表一个点，四个元素分别表示R、G、B、A，即三元素 + 透明度。

具体代码如下：

function getExampleImage(imgId，pixelData) {const width = 512const height = 512function loadPixelData () {const canvas = document.createElement('canvas')const img = document.createElement('img')img.src = imgId// 用canvas获取图像数据的像素矩阵（数组）canvas.width = widthcanvas.height = heightcanvas.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)