cornerstoneJS加载图片(base、矩阵)

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)
相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js