【前端】【cornerstone】cornerstone.js如何编辑图像/加载已有图像数据（以画直线为例）

部分参考博客：《cornerstone.js 使用总结》

首次加载图像

基于采用url方式加载图像的代码，cornerstoneTools提供的工具组件中暂时找不到能够画出可控制颜色和粗细的直线的工具，因此考虑采用canvas方式。

loadImageData(){
     /*
     * 将图像加载到cornerstone组件
     *
     * */
     let that = this;
     const imgIdItem = 'http://'+window.location.host+'/' + img_url;
	 // 加载图像
     cornerstone.loadImage(imgIdItem).then(function(image) {
       // 返回的image主要信息为三项：getCanvas（canvas对象）、getImage（基于图像url）、getPixelData（像素级数据）
       console.log('loadImageData', image);

       that.imageHeight = image.height;
       that.imageWidth = image.width;

       var itemCanvas = image.getCanvas();
       // var itemImage = image.getImage();
       // var itemPixelData = image.getPixelData();
       // console.log(itemCanvas, itemImage, itemPixelData);
       var context = itemCanvas.getContext("2d");
	   // 采用canvas方式对图像进行编辑
       var corner_of_eyes = [[image.width*0.386, image.height*0.391], [image.width*0.668, image.height*0.391]];
       var corner_of_mouth = [[image.width*0.305, image.height*0.792], [image.width*0.697, image.height*0.792]];
       context.beginPath();
       context.moveTo(corner_of_eyes[0][0], corner_of_eyes[0][1]);      // 移端点
       context.lineTo(corner_of_mouth[0][0], corner_of_mouth[0][1]);    // 画线
       context.lineWidth = 40;      // 线宽度
       context.strokeStyle = "green";    // 线的颜色
       context.stroke();     // 画框
       context.closePath();

       var imgData = context.getImageData(0, 0, image.width, image.height);
       // console.log('imgData', imgData);

       function loadPixelData () {
         return imgData.data;
       }
	   // 将图像数据进行包装后加载
       var modified_image = {
         // imageId: imgIdItem,

         minPixelValue : 0,
         maxPixelValue : 255,
         slope: 1.0,
         intercept: 0,
         windowCenter : 127,
         windowWidth : 256,
         getPixelData: loadPixelData,	// 注意getPixelData需要一个函数对象
         rows: that.imageHeight,
         columns: that.imageWidth,
         height: that.imageHeight,
         width: that.imageWidth,
         color: true,
         rgba: true,
         columnPixelSpacing: .8984375,
         rowPixelSpacing: .8984375,
         sizeInBytes: that.imageWidth * that.imageHeight * 4
       };

       var viewport = cornerstone.getDefaultViewportForImage(that.img_show_element, image);
       // image是<img src="">形式的，并不是改动过的
       // cornerstone.displayImage(that.img_show_element, image, viewport);
       cornerstone.displayImage(that.img_show_element, modified_image, viewport);
       // cornerstone.updateImage(that.img_show_element);

     });
},

即cornerstone.loadImage()返回的对象中包含包装好的canvas对象，可直接对其进行操作，然后将渲染完成的像素级数据包装后传给cornerstone。

加载已有图像

创建canvas并获取当前图像数据

let itemCanvas = document.createElement('canvas');
let enableElement = cornerstone.getEnabledElement(that.img_show_element);
itemCanvas.width = enableElement.image.width;
itemCanvas.height = enableElement.image.height;   // XXX: 注意，扩充canvas的空间大小很重要，否则后续没有足够空间接收值

注意为canvas组件赋予width和height属性很重要，否则没有足够的空间。

构造ImageData类，使用putImageData函数接收参数。

let context = itemCanvas.getContext("2d");
let ImageDataObj = new ImageData(enableElement.image.getPixelData(), enableElement.image.width, enableElement.image.height);
context.putImageData(ImageDataObj, 0, 0);