vue H5项目 使用cornerstone.js技术,项目是运行在微信公众号上面,苹果手机上dcm图部分不显示,安卓手机上dcm图全部显示

vue H5项目 使用cornerstone.js技术,项目是运行在微信公众号上面,苹果手机上dcm图部分不显示,安卓手机上dcm图全部显示,有木有知道是什么原因?

参考自chatGPT:

可能是因为苹果手机默认不支持 dicom 格式的图片,在微信公众号中打开时无法正常显示,而 Android 手机则默认支持该格式的图片,因此可以正常显示。
为了解决这个问题,你可以尝试使用 cornerstoneWADOImageLoader 加载 dicom 图像,该库提供了针对 dicom 图像的解码和显示支持,可以在浏览器中显示 dicom 图像。具体使用方法如下:

安装 cornerstoneWADOImageLoader 库:

npm install cornerstone-wado-image-loader --save

在需要显示 dicom 图像的组件中引入 cornerstoneWADOImageLoader 库:


import cornerstone from 'cornerstone-core';
import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';

在组件的 mounted 钩子函数中注册 cornerstoneWADOImageLoader:

mounted() {
  cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
  cornerstoneWADOImageLoader.configure({
    beforeSend: function(xhr) {
      // 添加必要的请求头信息
      xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
    }
  });
}

加载 dicom 图像:

loadImage() {
  const imageId = 'wadouri:' + this.imageUrl;
  cornerstone.loadImage(imageId).then(image => {
    cornerstone.displayImage(this.$refs.canvas, image);
  });
}

其中,this.imageUrl 表示 dicom 图像的 URL,this.$refs.canvas 表示用于显示图像的 HTML 元素。
通过以上步骤,你可以在微信公众号中显示 dicom 图像,并且不受手机平台的限制。