|
@@ -360,11 +360,12 @@ export default {
|
|
|
editor.config.menus = editor.config.menus.concat(canvasDraw);
|
|
|
},
|
|
|
|
|
|
-
|
|
|
+
|
|
|
/* 移除上传的音视频富文本src中的HOST */
|
|
|
doRemoveMideaHost(exerciseItem) {
|
|
|
console.log(exerciseItem)
|
|
|
- let isSubjective = exerciseItem.type === 'complete' || exerciseItem.type === 'subjective' || exerciseItem.type === 'compose'
|
|
|
+ let isSubjective = exerciseItem.type === 'complete' || exerciseItem.type === 'subjective' || exerciseItem.type ===
|
|
|
+ 'compose'
|
|
|
let richTextObj = {
|
|
|
question: exerciseItem.question,
|
|
|
answer: Array.isArray(exerciseItem.answer) && exerciseItem.answer.length ? exerciseItem.answer[0] : exerciseItem.answer,
|
|
@@ -376,20 +377,20 @@ export default {
|
|
|
// 遍历题目的所有富文本内容
|
|
|
for (let key in richTextObj) {
|
|
|
promiseArr.push(new Promise((r, j) => {
|
|
|
- let videoSrcList = this.getRichTextSrc(richTextObj[key],'video')
|
|
|
- let audioSrcList = this.getRichTextSrc(richTextObj[key],'audio')
|
|
|
+ let videoSrcList = this.getRichTextSrc(richTextObj[key], 'video')
|
|
|
+ let audioSrcList = this.getRichTextSrc(richTextObj[key], 'audio')
|
|
|
let srcList = videoSrcList.concat(audioSrcList)
|
|
|
- if(srcList.length){
|
|
|
+ if (srcList.length) {
|
|
|
srcList.forEach(src => {
|
|
|
richTextObj[key] = richTextObj[key].replace(src, src.split('/')[src.split('/').length - 1]);
|
|
|
})
|
|
|
- if(key === 'answer' && Array.isArray(exerciseItem.answer) && exerciseItem.answer.length){
|
|
|
+ if (key === 'answer' && Array.isArray(exerciseItem.answer) && exerciseItem.answer.length) {
|
|
|
exerciseItem.answer[0] = richTextObj[key]
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
exerciseItem[key] = richTextObj[key]
|
|
|
}
|
|
|
r(200)
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
r(200)
|
|
|
}
|
|
|
}))
|
|
@@ -401,7 +402,7 @@ export default {
|
|
|
},
|
|
|
|
|
|
/* 转换富文本内容中的base64数据 进行压缩处理 */
|
|
|
- transBase64Src(exerciseItem) {
|
|
|
+ transBase64Src(exerciseItem, editorWidth) {
|
|
|
var srcReg = /<img [^>]*src=['"]([^'"]+)[^>]*>/g;
|
|
|
var heightReg = /<img [^>]*height=['"]([^'"]+)[^>]*>/g;
|
|
|
var widthReg = /<img [^>]*width=['"]([^'"]+)[^>]*>/g;
|
|
@@ -418,7 +419,7 @@ export default {
|
|
|
// 遍历题目的所有富文本内容
|
|
|
for (let key in richTextObj) {
|
|
|
if (key === 'option') {
|
|
|
- if(richTextObj[key].length){
|
|
|
+ if (richTextObj[key].length) {
|
|
|
promiseArr.push(new Promise(async (r2, j2) => {
|
|
|
let optionsPromiseArr = []
|
|
|
/* 如果是试题选项里面的富文本 */
|
|
@@ -447,11 +448,28 @@ export default {
|
|
|
srcWidth = capture
|
|
|
});
|
|
|
let newBase64 = await this.compressImg(src, srcWidth, srcHeight)
|
|
|
- console.log('压缩后', newBase64)
|
|
|
item = item.replace(src, newBase64)
|
|
|
r(item)
|
|
|
+ } else if (!heightReg.test(item) && widthReg.test(item)) {
|
|
|
+ // 取到宽度的百分比
|
|
|
+ let srcWidth = ''
|
|
|
+ item.replace(widthReg, async (match, capture) => {
|
|
|
+ srcWidth = parseInt(capture)
|
|
|
+ });
|
|
|
+ let img = new Image();
|
|
|
+ img.src = src;
|
|
|
+ // 如果是宽度 则需要根据编辑器的宽度来计算出 拉伸后的高度和宽度
|
|
|
+ img.onload = async () => {
|
|
|
+ let newWidth = editorWidth.optionWidth * srcWidth * 0.01
|
|
|
+ let newHeight = newWidth * (img.height / img.width)
|
|
|
+ let newBase64 = await this.compressImg(src, newWidth, newHeight)
|
|
|
+ item = item.replace(src, newBase64)
|
|
|
+ r(item)
|
|
|
+ }
|
|
|
} else {
|
|
|
- console.log('没有需要压缩的')
|
|
|
+ // 如果没有拉伸或者点击百分比显示 则按照原图进行压缩 宽高不变
|
|
|
+ let newBase64 = await this.compressImg(src, 0, 0)
|
|
|
+ item = item.replace(src, newBase64)
|
|
|
r(item)
|
|
|
}
|
|
|
}
|
|
@@ -470,7 +488,7 @@ export default {
|
|
|
console.log('选项转换完', richTextObj[key])
|
|
|
})
|
|
|
}))
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
promiseArr.push(new Promise(async (r2, j2) => {
|
|
|
r2(200)
|
|
|
}))
|
|
@@ -481,10 +499,10 @@ export default {
|
|
|
let imgList = [];
|
|
|
let srcList = []
|
|
|
let item = richTextObj[key]
|
|
|
- if(!item){
|
|
|
+ if (!item) {
|
|
|
r('')
|
|
|
return
|
|
|
- }else if(Array.isArray(item) && !item.length){
|
|
|
+ } else if (Array.isArray(item) && !item.length) {
|
|
|
r([])
|
|
|
return
|
|
|
}
|
|
@@ -511,8 +529,27 @@ export default {
|
|
|
console.log('压缩后', newBase64)
|
|
|
item = item.replace(src, newBase64)
|
|
|
r(item)
|
|
|
+ } else if (!heightReg.test(item) && widthReg.test(item)) {
|
|
|
+ // 取到宽度的百分比
|
|
|
+ let srcWidth = ''
|
|
|
+ item.replace(widthReg, async (match, capture) => {
|
|
|
+ srcWidth = parseInt(capture)
|
|
|
+ });
|
|
|
+ let img = new Image();
|
|
|
+ img.src = src;
|
|
|
+ // 如果是宽度 则需要根据编辑器的宽度来计算出 拉伸后的高度和宽度
|
|
|
+ img.onload = async () => {
|
|
|
+ let newWidth = editorWidth.optionWidth * srcWidth * 0.01
|
|
|
+ let newHeight = newWidth * (img.height / img.width)
|
|
|
+ let newBase64 = await this.compressImg(src, newWidth, newHeight)
|
|
|
+ item = item.replace(src, newBase64)
|
|
|
+ r(item)
|
|
|
+ }
|
|
|
} else {
|
|
|
- console.log('没有需要压缩的')
|
|
|
+ // 如果没有拉伸或者点击百分比显示 则按照原图进行压缩 宽高不变
|
|
|
+ let newBase64 = await this.compressImg(src, 0, 0)
|
|
|
+ console.log('压缩后', newBase64)
|
|
|
+ item = item.replace(src, newBase64)
|
|
|
r(item)
|
|
|
}
|
|
|
}
|
|
@@ -528,13 +565,12 @@ export default {
|
|
|
console.log('处理后的富文本集合')
|
|
|
console.log(result)
|
|
|
exerciseItem.question = result[0]
|
|
|
- if(Array.isArray(exerciseItem.answer) && exerciseItem.answer.length){
|
|
|
+ if (Array.isArray(exerciseItem.answer) && exerciseItem.answer.length) {
|
|
|
exerciseItem.answer[0] = result[1]
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
exerciseItem.answer = result[1]
|
|
|
}
|
|
|
exerciseItem.explain = result[2]
|
|
|
-
|
|
|
const doRemoveItem = await this.doRemoveMideaHost(exerciseItem)
|
|
|
resolve(doRemoveItem)
|
|
|
})
|
|
@@ -550,36 +586,47 @@ export default {
|
|
|
*/
|
|
|
compressImg(imgSrc, targetWidth, targetHeight) {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- try {
|
|
|
- //创建一个img对象
|
|
|
- var img = new Image();
|
|
|
- img.src = imgSrc
|
|
|
- // base64地址图片加载完毕后执行
|
|
|
- img.onload = function() {
|
|
|
- // 缩放图片需要的canvas(也可以在DOM中直接定义canvas标签,这样就能把压缩完的图片不转base64也能直接显示出来)
|
|
|
- var canvas = document.createElement('canvas');
|
|
|
- var context = canvas.getContext('2d');
|
|
|
- // canvas对图片进行缩放
|
|
|
- canvas.width = targetWidth;
|
|
|
- canvas.height = targetHeight;
|
|
|
- // 图片压缩
|
|
|
- /*第一个参数是创建的img对象;第二三个参数是左上角坐标,后面两个是画布区域宽高*/
|
|
|
- context.drawImage(img, 0, 0, targetWidth, targetHeight);
|
|
|
- //压缩后的图片转base64 url
|
|
|
- //canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/png';
|
|
|
- //qualityArgument表示导出的图片质量,只有导出为jpeg和webp格式的时候此参数才有效,默认值是0.92
|
|
|
- var base64_url = canvas.toDataURL('image/png', 0.92); //base64 格式
|
|
|
- resolve(base64_url);
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- console.log(e)
|
|
|
- }
|
|
|
+ // 调用压缩接口返回
|
|
|
+ $api.newEvaluation.imageQuant([{
|
|
|
+ base64: imgSrc,
|
|
|
+ width: parseInt(targetWidth),
|
|
|
+ height: parseInt(targetHeight)
|
|
|
+ }]).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ resolve(res[0].base64);
|
|
|
+ }).catch(err => {
|
|
|
+ reject(err)
|
|
|
+ })
|
|
|
+ // try {
|
|
|
+ // //创建一个img对象
|
|
|
+ // var img = new Image();
|
|
|
+ // img.src = imgSrc
|
|
|
+ // // base64地址图片加载完毕后执行
|
|
|
+ // img.onload = function() {
|
|
|
+ // // 缩放图片需要的canvas(也可以在DOM中直接定义canvas标签,这样就能把压缩完的图片不转base64也能直接显示出来)
|
|
|
+ // var canvas = document.createElement('canvas');
|
|
|
+ // var context = canvas.getContext('2d');
|
|
|
+ // // canvas对图片进行缩放
|
|
|
+ // canvas.width = targetWidth;
|
|
|
+ // canvas.height = targetHeight;
|
|
|
+ // // 图片压缩
|
|
|
+ // /*第一个参数是创建的img对象;第二三个参数是左上角坐标,后面两个是画布区域宽高*/
|
|
|
+ // context.drawImage(img, 0, 0, targetWidth, targetHeight);
|
|
|
+ // //压缩后的图片转base64 url
|
|
|
+ // //canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/png';
|
|
|
+ // //qualityArgument表示导出的图片质量,只有导出为jpeg和webp格式的时候此参数才有效,默认值是0.92
|
|
|
+ // var base64_url = canvas.toDataURL('image/png', 0.92); //base64 格式
|
|
|
+ // resolve(base64_url);
|
|
|
+ // }
|
|
|
+ // } catch (e) {
|
|
|
+ // console.log(e)
|
|
|
+ // }
|
|
|
})
|
|
|
},
|
|
|
|
|
|
/* 获取富文本的资源src数据 */
|
|
|
- getRichTextSrc(richText,type) {
|
|
|
- if(!richText){
|
|
|
+ getRichTextSrc(richText, type) {
|
|
|
+ if (!richText) {
|
|
|
return []
|
|
|
}
|
|
|
var videoReg = /<video.*?(?:>|\/>)/gi;
|
|
@@ -589,9 +636,9 @@ export default {
|
|
|
var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
|
|
|
var arr = richText.match(type === 'img' ? imgReg : type === 'video' ? videoReg : audioReg);
|
|
|
var result = []
|
|
|
- if(!arr || !arr.length){
|
|
|
+ if (!arr || !arr.length) {
|
|
|
return []
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
for (var i = 0; i < arr.length; i++) {
|
|
|
var src = arr[i].match(srcReg);
|
|
|
//获取图片地址
|
|
@@ -601,6 +648,6 @@ export default {
|
|
|
}
|
|
|
return result
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|