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)
相关推荐
程序媛小果3 分钟前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长8 分钟前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
阿伟来咯~34 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端39 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱42 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨1 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm