XCKJ
/
irc_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

去除视频插件
continuous-integration/drone/push Build is passing Details

uat_us
DESKTOP-6C3NK6N\WXS 2024-08-08 13:45:57 +08:00
parent 06e86994ea
commit 9700bd4c31
5 changed files with 19 additions and 436 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
src/components/videos/index.vue
View File

@ -1,180 +0,0 @@
<template>
<div style="text-align: center">
<div style="display: flex;justify-content: center">
<video v-if="videoSrc" id="video" controls crossorigin="anonymous" width="400" height="270"">
<source :src="videoSrc" type="video/mp4">
无法播放，请点击转码
</video>
<div v-else style="border:2px dashed #999;border-radius: 10px;cursor:pointer;width:400px;height:270px;display: flex;justify-content: center;align-items: center" @click="$refs.fileInput.click()">
请选择视频文件
</div>
</div>
<input v-show="false" ref="fileInput" type="file" accept="video/*" @change="fileChange">
<div v-if="isVideoToMp4" style="display: flex;align-items: center;justify-content: right;margin-top: 10px;">
<div>转码进度: </div>
<el-progress style="width: 200px" :percentage="percentage" :format="() => {return percentage + '%'}" />
</div>
<div style="margin-top: 10px;display: flex;justify-content: right;align-items: center">
<el-button size="small" type="primary" :disabled="isVideoToMp4 || isDisabled" @click="$refs.fileInput.click()">选择文件</el-button>
<el-button v-if="isNeedToMp4" size="small" type="primary" :disabled="(videoSrc ? false : true) || isVideoToMp4 || isDisabled" @click="videoToMp4">转码</el-button>
<el-button size="small" type="primary" :disabled="(videoSrc ? false : true) || isVideoToMp4 || isDisabled" @click="upload">上传</el-button>
</div>
</div>
</template>
<script>
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'
const ffmpeg = createFFmpeg({
log: true,
corePath: './ffmpeg-core.js'
})
export default {
props: {
},
data() {
return {
isDisabled: false,
imgList: [],
fileObj: null,
videoList: [],
videoSrc: null,
file: null,
dataBuffer: null,
percentage: 0,
isVideoToMp4: false,
isNeedToMp4: false
}
},
watch: {
},
mounted() {
},
methods: {
async uploadVideo(objectName, file) {
try {
this.isDisabled = true
const result = await this.OSSclient.put(objectName, file)
this.$emit('uploadOver', true, result, this.file.name)
} catch (e) {
console.log(e)
this.isDisabled = false
this.$emit('uploadOver', false)
}
},
upload() {
if (document.querySelector('#video').readyState === 0 && document.querySelector('#video').buffered.length === 0) {
this.$alert(this.$t('components:uploadvideo:message:xf2'))
this.isNeedToMp4 = true
return
}
this.uploadVideo(`file/videofile/${this.file.name.split('.')[0]}${new Date().getTime()}.mp4`, this.dataBuffer)
},
async videoToMp4() {
// 页面是否在安全上下文中
// https 或者 本地开发环境才是安全上下文
if (!window.isSecureContext) {
this.$alert(this.$t('components:uploadvideo:message:xf3'))
return
}
// 顶部文档是否开启跨源隔离
if (!window.crossOriginIsolated) {
this.$alert(this.$t('components:uploadvideo:message:xf4'))
return
}
this.$message.success(this.$t('components:uploadvideo:message:xf5'))
if (!ffmpeg.isLoaded()) {
await ffmpeg.load()
}
this.percentage = 0
this.isVideoToMp4 = true
ffmpeg.setProgress(({ ratio }) => {
console.log(ratio)
if (ratio * 100 < 1) {
this.percentage = parseInt(0)
} else {
this.percentage = parseInt(ratio * 100)
}
})
ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(this.videoSrc))
await ffmpeg.run('-i', 'input.mp4', 'output.mp4')
this.videoSrc = null
const data = ffmpeg.FS('readFile', 'output.mp4')
this.dataBuffer = new Blob([data.buffer], { type: 'video/mp4' })
this.$message.success(this.$t('components:uploadvideo:message:xf6'))
setTimeout(() => {
this.videoSrc = URL.createObjectURL(this.dataBuffer)
this.isVideoToMp4 = false
this.isNeedToMp4 = false
process.exit(0)
}, 50)
},
fileChange(e) {
this.videoSrc = null
const files = e.target.files || e.dataTransfer.files
this.file = files[0]
var reader = new FileReader()
reader.readAsArrayBuffer(this.file)
reader.onloadend = async(e) => {
this.dataBuffer = new Blob([e.target.result], { type: 'video/mp4' })
this.videoSrc = URL.createObjectURL(this.dataBuffer)
this.$message.success(this.$t('components:uploadvideo:message:xf7'))
e.target.files = []
}
},
deleteimg(index) {
this.imgList.splice(index, 1)
},
jietu() {
this.screenShot('video')
},
screenShot(id) {
var player = document.getElementById(id)
var canvas = document.createElement('canvas')
var img = document.createElement('img')
canvas.width = player.videoWidth
canvas.height = player.videoHeight
canvas.getContext('2d').drawImage(player, 0, 0, canvas.width, canvas.height)
var dataURL = canvas.toDataURL('image/png')
img.src = dataURL
img.width = player.clientWidth
img.height = player.clientHeight
img.style.objectFit = 'contain'
this.imgList.push(dataURL)
},
downFile(data, fileName) {
var save_link = document.createElementNS(
'http://www.jumi.com',
'a'
)
save_link.href = data
save_link.download = fileName
var event = document.createEvent('MouseEvents')
event.initMouseEvent(
'click',
true,
false,
window,
0,
0,
0,
0,
0,
false,
false,
false,
false,
0,
null
)
save_link.dispatchEvent(event)
}
}
}
</script>
<style lang='scss'>
#cutImage{
img{
}
}
</style>

139
src/views/test/videos/index.vue
View File

@ -1,139 +0,0 @@
<template>
<div>
<el-button plain @click="open">上传视频文件</el-button>
<el-button plain @click="$refs.file.click()">选择dicom文件</el-button>
<input
ref="file"
type="file"
name="file"
webkitdirectory
multiple
@change="beginScanFiles($event)"
/>
<div>
<canvas id="img"></canvas>
</div>
<el-dialog title="上传视频" :close-on-click-modal="false" :visible.sync="IsOpen" width="450px" append-to-body>
<my-videos @uploadOver="uploadOver" />
</el-dialog>
</div>
</template>
<script>
import MyVideos from '@/components/videos'
import * as cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader'
// import charLS from '@cornerstonejs/codec-charls';
import * as cornerstone from 'cornerstone-core'
import dicomParser from "dicom-parser";
import { Anonymizer } from "dicomedit";
console.log(Anonymizer)
const script = `version "6.3"
temp := "chany"
(0008,0008) := "test"
(0010,0010) := temp
`;
const CharLs = require('@cornerstonejs/codec-charls')
const codecWrapper = {
codec: undefined,
Decoder: undefined,
Encoder: undefined,
encoderName: "JpegLSEncoder",
decoderName: "JpegLSDecoder",
};
function setCodec(codecConfig, encoderName, decoderName, codec = {}) {
codecConfig.Encoder = codec[encoderName];
codecConfig.Decoder = codec[decoderName];
codecConfig.codec = codec;
}
CharLs().then(res => {
setCodec(codecWrapper, codecWrapper.encoderName, codecWrapper.decoderName, res);
})
export default {
components: { MyVideos },
data() {
return {
IsOpen: false,
videoUrl: null,
videoName: null
}
},
methods: {
async upload(name, file) {
let res = await this.OSSclient.put(name, file)
return res
},
beginScanFiles(e) {
var files = e.target.files
console.log(e.target.files)
if (files.length > 0) {
files.forEach(async (item, index) => {
const reader = new FileReader();
reader.onload = async (event) => {
let buffer = event.target.result;
const anonymizer = new Anonymizer(script, { test: 'hello' });
anonymizer.loadDcm(new Uint8Array(buffer))
await anonymizer.applyRules();
let buffer1 = anonymizer.write()
let data1 = dicomParser.parseDicom(new Uint8Array(buffer1))
let data = dicomParser.parseDicom(new Uint8Array(buffer))
// 传输语法 0002 0010
// if(1.2.840.10008.1.2.1) 才压缩 => 1.2.840.10008.1.2.4.80
let height = data.uint16('x00280011')
let width = data.uint16('x00280010')
let bitsPerSample = data.uint16('x00280100')
let componentCount = data.string('x00280004')
let transportSyntax = data.string('x00020010')
// let pixel = data.byteArrayParser.readUint16('x7fe0x0010')
let pixelDataElement = data.elements.x7fe00010;
let pixelDataOffset = pixelDataElement.dataOffset;
let pixelDataLength = pixelDataElement.length;
let pixelDataBytes = data.byteArray.subarray(pixelDataOffset, pixelDataOffset + pixelDataLength)
if (transportSyntax === '1.2.840.10008.1.2.1' && ~componentCount.indexOf('MONOCHROME')) {
let encoder = new codecWrapper.Encoder();
let decodedBytes = encoder.getDecodedBuffer({width: width, height: height, bitsPerSample: bitsPerSample, componentCount: 1})
encoder.setNearLossless(0);
// 像素数据 7fe0 0010
decodedBytes.set(pixelDataBytes);
let startTime = performance.now()
encoder.encode()
let endTime = performance.now();
// dicom替换压缩像素 组装
let encodeDurationInSeconds = endTime - startTime
let encodedBytes = encoder.getEncodedBuffer();
data.elements['x00020010'].value = '1.2.840.10008.1.2.4.80'
console.log(data.elements['x7fe00010'].length)
data.elements['x7fe00010'].length = encodedBytes.length
console.log(data.elements['x7fe00010'].length)
let mateDataBytes = data.byteArray.subarray(0, pixelDataOffset)
let modifiedByteArray = new Uint8Array([...mateDataBytes, ...encodedBytes])
let newData = new dicomParser.ByteStream(data.byteArrayParser, modifiedByteArray, 0)
console.log(data)
console.log(newData)
console.log(dicomParser.parseDicom(new Uint8Array(newData.byteArray)))
await this.upload(`test/${index}`, newData)
encoder.delete();
return
}
};
reader.readAsArrayBuffer(item);
})
}
},
open() {
this.IsOpen = true
},
uploadOver(isSuccess, res) {
if (isSuccess) {
this.IsOpen = false
this.videoUrl = res.url
this.videoName = res.name
}
}
}
}
</script>
<style scoped>
</style>

98
src/views/test/videos/index2.vue
View File

@ -1,98 +0,0 @@
<template>
<div>
<el-button plain @click="$refs.file.click()">选择dicom文件</el-button>
<input
ref="file"
type="file"
name="file"
webkitdirectory
multiple
@change="beginScanFiles($event)"
/>
</div>
</template>
<script>
import dicomParser from "dicom-parser";
import dcmjs from 'dcmjs'
const CharLs = require('@cornerstonejs/codec-charls')
const codecWrapper = {
codec: undefined,
Decoder: undefined,
Encoder: undefined,
encoderName: "JpegLSEncoder",
decoderName: "JpegLSDecoder",
};
function setCodec(codecConfig, encoderName, decoderName, codec = {}) {
codecConfig.Encoder = codec[encoderName];
codecConfig.Decoder = codec[decoderName];
codecConfig.codec = codec;
}
CharLs().then(res => {
setCodec(codecWrapper, codecWrapper.encoderName, codecWrapper.decoderName, res);
})
export default {
data() {
return {
}
},
methods: {
async upload(name, file) {
let res = await this.OSSclient.put(name, file)
return res
},
beginScanFiles(e) {
var files = e.target.files
if (files.length > 0) {
files.forEach(async (item, index) => {
const reader = new FileReader();
reader.onload = async (event) => {
let buffer = event.target.result;
let data = dicomParser.parseDicom(new Uint8Array(buffer))
let height = data.uint16('x00280011')
let width = data.uint16('x00280010')
let bitsPerSample = data.uint16('x00280100')
let componentCount = data.string('x00280004')
let transportSyntax = data.string('x00020010')
if ((transportSyntax === '1.2.840.10008.1.2.1' || transportSyntax === '1.2.840.10008.1.2') && ~componentCount.indexOf('MONOCHROME')) {
let dataset = dcmjs.data.DicomMessage.readFile(buffer)
console.log(new dcmjs.data.DicomMetaDictionary(dataset))
let pixelDataElement = data.elements.x7fe00010;
let pixelDataOffset = pixelDataElement.dataOffset;
let pixelDataLength = pixelDataElement.length;
let pixelDataBytes = data.byteArray.subarray(pixelDataOffset, pixelDataOffset + pixelDataLength)
let encoder = new codecWrapper.Encoder();
let decodedBytes = encoder.getDecodedBuffer({width: width, height: height, bitsPerSample: bitsPerSample, componentCount: 1})
encoder.setNearLossless(0);
decodedBytes.set(pixelDataBytes);
encoder.encode()
let encodedBytes = encoder.getEncodedBuffer();
dataset.dict['7FE00010'].Value[0] = encodedBytes.buffer;
dataset.meta['00020010'].Value[0] = '1.2.840.10008.1.2.4.80';
let newDicomFile = dataset.write();
const bufferArray = new Uint8Array(newDicomFile);
const blob = new Blob([bufferArray], { type: 'application/octet-stream' });
await this.upload(`test/${index}.dcm`, blob)
}
};
reader.readAsArrayBuffer(item);
})
}
},
open() {
this.IsOpen = true
},
uploadOver(isSuccess, res) {
if (isSuccess) {
this.IsOpen = false
this.videoUrl = res.url
this.videoName = res.name
}
}
}
}
</script>
<style scoped>
</style>

8
src/views/trials/trials-panel/visit/crc-upload/components/uploadNonDicomFiles.vue
View File

@ -347,7 +347,7 @@
</el-dialog>
<!-- 上传非dicom视频文件 -->
<el-dialog
<!-- <el-dialog
v-if="uploadVideoVisible"
:visible.sync="uploadVideoVisible"
upload-video-visible
@ -358,7 +358,7 @@
custom-class="base-dialog-wrapper"
>
<upload-videos @uploadOver="uploadOver" />
</el-dialog>
</el-dialog> -->
<!-- 预览非DICOM视频文件 -->
<el-dialog
v-if="lookVideoVisible"
@ -410,12 +410,12 @@
import { preArchiveStudy, getNoneDicomStudyList, getNoneDicomStudyFileList, uploadNoneDicomFile, addOrUpdateNoneDicomStudy, deleteNoneDicomStudy, deleteNoneDicomStudyFile } from '@/api/trials'
import { getToken } from '@/utils/auth'
// import PreviewFiles from './previewFiles'
import uploadVideos from '@/components/videos'
// import uploadVideos from '@/components/videos'
import moment from 'moment'
import store from "@/store";
export default {
name: 'UploadNonDicomFiles',
components: { uploadVideos },
// components: { uploadVideos },
props: {
bodyParts: {
type: String,

30
vue.config.js
View File

@ -2,7 +2,7 @@
const path = require('path')
// eslint-disable-next-line no-undef
const defaultSettings = require('./src/settings.js')
const CopyPlugin = require('copy-webpack-plugin')
// const CopyPlugin = require('copy-webpack-plugin')
const WebpackAliyunOss = require('webpack-aliyun-oss')
const moment = require('moment')
var distDate = moment(new Date()).format('YYYY-MM-DD')
@ -81,20 +81,20 @@ module.exports = {
chunkFilename: `static/js/[name].[hash].js`
},
plugins: [
new CopyPlugin([
{ from: './node_modules/@cornerstonejs/codec-charls/dist/charlsjs.js', to: 'charlsjs.js' },
{ from: './node_modules/@cornerstonejs/codec-charls/dist/charlsjs.js.mem', to: './static/js/charlsjs.js.mem' },
{ from: './node_modules/@cornerstonejs/codec-charls/dist/charlswasm.js', to: './static/js/charlswasm.js' },
{ from: './node_modules/@cornerstonejs/codec-charls/dist/charlswasm.wasm', to: './static/js/charlswasm.wasm' },
{ from: './node_modules/@ffmpeg/core/dist/ffmpeg-core.js', to: 'ffmpeg-core.js' },
{ from: './node_modules/@ffmpeg/core/dist/ffmpeg-core.wasm', to: 'ffmpeg-core.wasm' },
{ from: './node_modules/@ffmpeg/core/dist/ffmpeg-core.worker.js', to: 'ffmpeg-core.worker.js' },
{
from: path.resolve(__dirname, './static'),
to: path.resolve(__dirname, './dist/static'),
ignore: ['.*']
}
]),
// new CopyPlugin([
// { from: './node_modules/@cornerstonejs/codec-charls/dist/charlsjs.js', to: 'charlsjs.js' },
// { from: './node_modules/@cornerstonejs/codec-charls/dist/charlsjs.js.mem', to: './static/js/charlsjs.js.mem' },
// { from: './node_modules/@cornerstonejs/codec-charls/dist/charlswasm.js', to: './static/js/charlswasm.js' },
// { from: './node_modules/@cornerstonejs/codec-charls/dist/charlswasm.wasm', to: './static/js/charlswasm.wasm' },
// { from: './node_modules/@ffmpeg/core/dist/ffmpeg-core.js', to: 'ffmpeg-core.js' },
// { from: './node_modules/@ffmpeg/core/dist/ffmpeg-core.wasm', to: 'ffmpeg-core.wasm' },
// { from: './node_modules/@ffmpeg/core/dist/ffmpeg-core.worker.js', to: 'ffmpeg-core.worker.js' },
// {
// from: path.resolve(__dirname, './static'),
// to: path.resolve(__dirname, './dist/static'),
// ignore: ['.*']
// }
// ]),
process.env.NODE_ENV === 'development' || process.env.VUE_APP_OSS_CONFIG_BUCKET === 'zyypacs-usa' ? function() { }
: new WebpackAliyunOss({
from: ['./dist/**'],