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 小时前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君011 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie2 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20152 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦3 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆3 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding4 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui