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)
相关推荐
天天进步201518 分钟前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz28 分钟前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇34 分钟前
HTML常用表格与标签
前端·html
疯狂的沙粒38 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员1 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐1 小时前
前端图像处理(一)
前端
程序猿阿伟1 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒1 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背1 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript