cornerstoneJS加载图片（base、矩阵）

AwoCT2023-08-19 10:46

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

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

具体代码如下：

javascript 复制代码

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
	}
}

应用：

javascript 复制代码

/**
* 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)