657 lines
21 KiB
Vue
657 lines
21 KiB
Vue
<template>
|
||
<text
|
||
:eid="eid"
|
||
:change:eid="quillEditor.watchEID"
|
||
:sid="sid"
|
||
:change:sid="quillEditor.watchStartID"
|
||
:video="videoUrl"
|
||
:change:pastemode="quillEditor.watchPasteMode"
|
||
:pastemode="pastemode"
|
||
:change:video="quillEditor.watchVideoUrl"
|
||
:cover="coverUrl"
|
||
:change:cover="quillEditor.watchCoverUrl"
|
||
:coverios="coverUrlIOS"
|
||
:change:coverios="quillEditor.watchCoverUrlIOS"
|
||
></text>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 富文本plugin特殊扩展
|
||
* @author sonve
|
||
* @version 1.0.0
|
||
* @date 2024-12-14
|
||
*/
|
||
|
||
export default {
|
||
props: {
|
||
sid: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
eid: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
videoUrl: '', // 视频地址
|
||
coverUrl: '', // 封面地址
|
||
coverUrlIOS: '', // ios端封面地址
|
||
pastemode: 'text' // 粘贴模式 text | origin
|
||
}
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
changePasteMode(e) {
|
||
this.pastemode = e
|
||
},
|
||
editorPaste(e) {
|
||
this.$emit('epaste', e)
|
||
},
|
||
createVideoThumbnail(url) {
|
||
this.videoUrl = url
|
||
},
|
||
getVideoThumbnail(e) {
|
||
// e: { video, cover }
|
||
uni.$emit(`E_EDITOR_GET_VIDEO_THUMBNAIL_${e.video}`, e)
|
||
},
|
||
createCoverThumbnail(url) {
|
||
// #ifdef H5
|
||
this.coverUrl = url
|
||
// #endif
|
||
// #ifdef APP
|
||
const isIOS = uni.getSystemInfoSync().platform == 'ios'
|
||
if (isIOS) {
|
||
this.coverUrlIOS = url // iOS用不了OffscreenCanvas
|
||
} else {
|
||
this.coverUrl = url
|
||
}
|
||
// #endif
|
||
},
|
||
getCoverThumbnail(e) {
|
||
// e: { image, cover }
|
||
uni.$emit(`E_EDITOR_GET_COVER_THUMBNAIL_${e.image}`, e)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<script module="quillEditor" lang="renderjs">
|
||
import config from '../common/config.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
editorID: '',
|
||
idStack: [], // sid栈
|
||
matcherMode: '' // 粘贴模式 text | origin
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* 注意：watch频繁触发时需要异步修改，否则可能会导致监听不到
|
||
*/
|
||
watchPasteMode(newValue, oldValue, ownerInstance, instance) {
|
||
if (newValue) {
|
||
this.matcherMode = newValue
|
||
}
|
||
},
|
||
watchStartID(newValue, oldValue, ownerInstance, instance) {
|
||
if (newValue) {
|
||
this.addMatcher(newValue)
|
||
}
|
||
},
|
||
watchEID(newValue, oldValue, ownerInstance, instance) {
|
||
if (newValue) {
|
||
this.editorID = newValue
|
||
}
|
||
},
|
||
watchVideoUrl(newValue, oldValue, ownerInstance, instance) {
|
||
if (newValue) {
|
||
this.generateVideoThumbnail(newValue).then((res) => {
|
||
this.$ownerInstance.callMethod('getVideoThumbnail', {
|
||
video: newValue,
|
||
cover: res
|
||
})
|
||
})
|
||
}
|
||
},
|
||
watchCoverUrl(newValue, oldValue, ownerInstance, instance) {
|
||
if (newValue) {
|
||
this.generateCoverThumbnail(newValue).then((res) => {
|
||
this.$ownerInstance.callMethod('getCoverThumbnail', {
|
||
image: newValue,
|
||
cover: res
|
||
})
|
||
})
|
||
}
|
||
},
|
||
/**
|
||
* Only Apple Can Do !!!
|
||
*/
|
||
watchCoverUrlIOS(newValue, oldValue, ownerInstance, instance) {
|
||
if (newValue) {
|
||
this.generateCoverThumbnailIOS(newValue).then((res) => {
|
||
this.$ownerInstance.callMethod('getCoverThumbnail', {
|
||
image: newValue,
|
||
cover: res
|
||
})
|
||
})
|
||
}
|
||
},
|
||
/**
|
||
* 保留格式粘贴内容
|
||
* @description 此方式尽可能保留原格式，易于再编辑，但是部分格式会丢失
|
||
* @param {String} sid 当前编辑器id
|
||
*/
|
||
addMatcher(sid) {
|
||
if(this.idStack.includes(sid)) return // 禁止重复添加Matcher
|
||
this.idStack.push(sid)
|
||
|
||
const el = document.querySelector(`#${sid}`);
|
||
const quill = Quill.find(el);
|
||
|
||
const getStyleAttributes = (node, style) => {
|
||
let attributes = {}
|
||
|
||
// node属性
|
||
const width = node.getAttribute('width');
|
||
const height = node.getAttribute('height');
|
||
if (width) attributes.width = width
|
||
if (height) attributes.height = height
|
||
const dataCustom = node.getAttribute('data-custom');
|
||
if (dataCustom) attributes['data-custom'] = dataCustom;
|
||
|
||
// style样式
|
||
if (style.textAlign) attributes.align = style.textAlign;
|
||
if (style.fontWeight === 'bold' || style.fontWeight === '700') attributes.bold = true;
|
||
if (style.fontStyle === 'italic') attributes.italic = true;
|
||
if (style.textDecoration.includes('underline')) attributes.underline = true;
|
||
if (style.textDecoration.includes('line-through')) attributes.strike = true;
|
||
if (style.verticalAlign === 'super') attributes.script = 'super'
|
||
if (style.verticalAlign === 'sub') attributes.script = 'sub'
|
||
if (style.fontFamily) attributes.font = style.fontFamily;
|
||
if (style.fontSize) attributes.size = parseFloat(style.fontSize);
|
||
if (style.color) attributes.color = style.color;
|
||
if (style.backgroundColor) attributes.background = style.backgroundColor;
|
||
|
||
return attributes
|
||
}
|
||
|
||
const processNode = (node) => {
|
||
let ops = [];
|
||
|
||
if (node.nodeType === Node.ELEMENT_NODE) {
|
||
const computedStyle = document.defaultView.getComputedStyle(node);
|
||
|
||
// 处理 <img> 标签
|
||
if (node.tagName === 'IMG') {
|
||
const imgSrc = node.getAttribute('src');
|
||
if (imgSrc) {
|
||
ops.push({ insert: '\n' }); // 插入换行符，确保图片前有一个空行
|
||
ops.push({
|
||
insert: { image: imgSrc },
|
||
attributes: getStyleAttributes(node, computedStyle)
|
||
});
|
||
ops.push({ insert: '\n' }); // 插入换行符，确保图片后有一个空行
|
||
|
||
return ops; // 不参与递归
|
||
}
|
||
}
|
||
|
||
// 处理 <p> 和 <div> 标签
|
||
else if (node.tagName === 'P' || node.tagName === 'DIV') {
|
||
ops.push({ insert: '\n' }); // 插入换行符
|
||
}
|
||
|
||
// 处理 <ol> 标签 有序
|
||
else if (node.tagName === 'OL') {
|
||
// ops.push({ insert: '\n', attributes: { list: 'ordered' } });
|
||
}
|
||
|
||
// 处理 <ul> 标签 无序
|
||
else if (node.tagName === 'UL') {
|
||
// ops.push({ insert: '\n', attributes: { list: 'bullet' } });
|
||
}
|
||
|
||
// 处理 <li> 标签
|
||
else if (node.tagName === 'LI') {
|
||
ops.push({ insert: '\n' });
|
||
}
|
||
|
||
|
||
// 处理 <hr> 标签
|
||
else if (node.tagName === 'HR') {
|
||
ops.push({ insert: '\n' }); // 插入换行符
|
||
ops.push({ insert: { divider: true } });
|
||
|
||
return ops; // 不参与递归
|
||
}
|
||
|
||
// 处理 <a> 标签
|
||
else if (node.tagName === 'A') {
|
||
const href = node.getAttribute('href');
|
||
const textContent = node.textContent.trim();
|
||
|
||
if (href && textContent) {
|
||
ops.push({
|
||
insert: ' ' + textContent + ' ',
|
||
attributes: {
|
||
link: href,
|
||
textDecoration: computedStyle.textDecoration,
|
||
...getStyleAttributes(node, computedStyle)
|
||
}
|
||
});
|
||
|
||
return ops; // 不参与递归
|
||
}
|
||
}
|
||
|
||
// 处理 <h1> 到 <h6> 标题
|
||
else if (['H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(node.tagName)) {
|
||
// 处理 <h1> 到 <h6> 标题，生成 header 操作
|
||
const headerLevel = parseInt(node.tagName.charAt(1), 10);
|
||
const textContent = node.textContent.trim();
|
||
|
||
if (textContent) {
|
||
ops.push({
|
||
insert: textContent + '\n', // 必须要加上换行
|
||
attributes: {
|
||
header: headerLevel,
|
||
...getStyleAttributes(node, computedStyle)
|
||
}
|
||
});
|
||
|
||
return ops; // 不参与递归
|
||
}
|
||
}
|
||
|
||
// 递归处理子节点
|
||
for (let child of node.childNodes) {
|
||
ops = ops.concat(processNode(child));
|
||
}
|
||
|
||
} else if (node.nodeType === Node.TEXT_NODE) {
|
||
const textContent = node.nodeValue.trim();
|
||
if (textContent) {
|
||
// 从父元素获取样式
|
||
const parentNode = node.parentNode;
|
||
if (parentNode) {
|
||
const computedStyle = document.defaultView.getComputedStyle(parentNode);
|
||
ops.push({
|
||
insert: textContent,
|
||
attributes: getStyleAttributes(parentNode, computedStyle)
|
||
});
|
||
} else {
|
||
// 如果没有父元素，直接插入文本
|
||
ops.push({ insert: textContent });
|
||
}
|
||
}
|
||
}
|
||
|
||
return ops;
|
||
}
|
||
|
||
quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
|
||
if (this.matcherMode == 'origin') {
|
||
let newOps = processNode(node);
|
||
if (newOps.length > 0) {
|
||
return { ops: newOps };
|
||
}
|
||
}
|
||
return delta;
|
||
})
|
||
|
||
const cleanClipboardHTML = (html, text) => {
|
||
if(!html) return text
|
||
// 使用正则表达式匹配 <!--StartFragment--> 和 <!--EndFragment--> 之间的内容
|
||
const fragmentRegex = /<!--StartFragment-->([\s\S]*?)<!--EndFragment-->/;
|
||
const match = html.match(fragmentRegex);
|
||
if (match && match[1]) {
|
||
// 返回匹配到的内容
|
||
return match[1].trim();
|
||
}
|
||
// 如果没有匹配到片段内容，返回原始 HTML
|
||
return html;
|
||
}
|
||
|
||
el.addEventListener('paste', (e) => {
|
||
let clipboardText = e.clipboardData.getData('text/plain'); // 获取剪切板中的纯文本内容
|
||
let clipboardHtml = e.clipboardData.getData('text/html'); // 获取剪切板中的 HTML 内容（如果存在）
|
||
clipboardHtml = cleanClipboardHTML(clipboardHtml, clipboardText)
|
||
|
||
setTimeout(() => {
|
||
this.$ownerInstance.callMethod('editorPaste', {
|
||
id: sid,
|
||
text: clipboardText,
|
||
html: clipboardHtml,
|
||
range: quill.getSelection() // 获取当前光标位置
|
||
})
|
||
}, 100);
|
||
});
|
||
},
|
||
/**
|
||
* 保留格式粘贴内容
|
||
* @description 此方式虽然可以极大程度保留格式，但是会导致粘贴下来的内容为一整个块，且不易再编辑
|
||
* @param {String} sid 当前编辑器id
|
||
*/
|
||
/*
|
||
addMatcher(sid) {
|
||
if(this.idStack.includes(sid)) return // 禁止重复添加Matcher
|
||
this.idStack.push(sid)
|
||
|
||
// 引入源码中的BlockEmbed
|
||
const BlockEmbed = Quill.import('blots/block/embed');
|
||
// 定义新的blot类型
|
||
class AppPanelEmbed extends BlockEmbed {
|
||
static create(value) {
|
||
const node = super.create(value);
|
||
node.setAttribute('width', '100%');
|
||
// 设置自定义html
|
||
node.innerHTML = this.transformValue(value)
|
||
return node;
|
||
}
|
||
static transformValue(value) {
|
||
let handleArr = value.split('\n')
|
||
handleArr = handleArr.map(e => e.replace(/^[\s]+/, '').replace(/[\s]+$/, ''))
|
||
return handleArr.join('')
|
||
}
|
||
// 返回节点自身的value值 用于撤销操作
|
||
static value(node) {
|
||
return node.innerHTML
|
||
}
|
||
}
|
||
// blotName
|
||
AppPanelEmbed.blotName = 'AppPanelEmbed';
|
||
// 标签类型自定义
|
||
AppPanelEmbed.tagName = 'p';
|
||
Quill.register(AppPanelEmbed, true);
|
||
|
||
const el = document.querySelector(`#${sid}`);
|
||
const quill = Quill.find(el);
|
||
|
||
const cleanClipboardHTML = (html, text) => {
|
||
if(!html) return text
|
||
// 使用正则表达式匹配 <!--StartFragment--> 和 <!--EndFragment--> 之间的内容
|
||
const fragmentRegex = /<!--StartFragment-->([\s\S]*?)<!--EndFragment-->/;
|
||
const match = html.match(fragmentRegex);
|
||
|
||
if (match && match[1]) {
|
||
// 返回匹配到的内容
|
||
return match[1].trim();
|
||
}
|
||
|
||
// 如果没有匹配到片段内容，返回原始 HTML
|
||
return html;
|
||
}
|
||
|
||
el.addEventListener('paste', (e) => {
|
||
e.preventDefault();
|
||
|
||
let clipboardText = e.clipboardData.getData('text/plain'); // 获取剪切板中的纯文本内容
|
||
let clipboardHtml = e.clipboardData.getData('text/html'); // 获取剪切板中的 HTML 内容（如果存在）
|
||
clipboardHtml = cleanClipboardHTML(clipboardHtml, clipboardText)
|
||
|
||
this.$ownerInstance.callMethod('editorPaste', {
|
||
id: sid,
|
||
text: clipboardText,
|
||
html: clipboardHtml
|
||
})
|
||
|
||
setTimeout(() => {
|
||
const range = quill.getSelection(); // 获取当前光标位置
|
||
quill.insertEmbed(range.index, 'AppPanelEmbed', clipboardHtml);
|
||
}, 100);
|
||
});
|
||
},
|
||
*/
|
||
/**
|
||
* 生成视频封面图片（不兼容iOS）
|
||
* @property {String} videoUrl 视频地址
|
||
* @returns {Promise} 视频封面图片 注意异步处理
|
||
*/
|
||
async generateVideoThumbnail(videoUrl) {
|
||
// 绘制播放按钮图标
|
||
// @param {CanvasContext} context canvas上下文
|
||
// @param {Canvas} canvas
|
||
const drawPlayButton = (context, canvas) => {
|
||
// 创建一个 <img> 元素来加载播放图标
|
||
const img = new Image();
|
||
img.src = config.video_playicon;
|
||
|
||
// 等待图像加载完成
|
||
return new Promise((resolve, reject) => {
|
||
img.onload = () => {
|
||
// 计算播放按钮的位置和大小
|
||
// const playButtonSize = Math.min(canvas.width, canvas.height) * 0.15;
|
||
const playButtonSize = canvas.width * 0.15;
|
||
const playButtonX = (canvas.width - playButtonSize) / 2;
|
||
const playButtonY = (canvas.height - playButtonSize) / 2;
|
||
|
||
// 绘制播放按钮到 canvas
|
||
context.drawImage(img, playButtonX, playButtonY, playButtonSize, playButtonSize);
|
||
|
||
resolve();
|
||
};
|
||
|
||
img.onerror = (error) => {
|
||
reject(new Error('Failed to load SVG image.'));
|
||
};
|
||
});
|
||
}
|
||
|
||
return new Promise(async (resolve, reject) => {
|
||
try {
|
||
// 创建一个新的 video 元素，并设置 crossOrigin 属性
|
||
const video = document.createElement('video');
|
||
video.crossOrigin = 'anonymous'; // 添加 crossOrigin 属性
|
||
video.preload = 'metadata';
|
||
video.src = videoUrl;
|
||
|
||
// 创建一个新的 canvas 元素
|
||
const canvas = document.createElement('canvas');
|
||
const context = canvas.getContext('2d');
|
||
|
||
// 监听视频加载元数据完成
|
||
video.onloadedmetadata = async () => {
|
||
// 设置 canvas 尺寸与视频相同
|
||
canvas.width = video.videoWidth;
|
||
canvas.height = video.videoHeight;
|
||
|
||
// 尝试绘制视频的第一帧到 canvas
|
||
video.currentTime = 0; // 确保我们从视频的第一帧开始
|
||
video.onseeked = async () => {
|
||
try {
|
||
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||
|
||
// 绘制播放按钮
|
||
await drawPlayButton(context, canvas);
|
||
|
||
// 将 canvas 内容转换为 Data URL
|
||
// resolve(canvas.toDataURL('image/png')); // base64太长了，不建议使用
|
||
|
||
// 将 canvas 内容转换为 Blob 对象
|
||
canvas.toBlob((blob) => {
|
||
resolve(URL.createObjectURL(blob));
|
||
}, 'image/png');
|
||
|
||
} catch (error) {
|
||
reject(new Error('Failed to draw image to canvas.'));
|
||
}
|
||
};
|
||
|
||
// 如果 seek 操作没有成功，尝试直接绘制当前帧
|
||
setTimeout(async () => {
|
||
if (!video.seeking) {
|
||
try {
|
||
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||
// 绘制播放按钮
|
||
await drawPlayButton(context, canvas);
|
||
|
||
// 将 canvas 内容转换为 Data URL
|
||
// resolve(canvas.toDataURL('image/png')); // base64太长了，不建议使用
|
||
|
||
// 将 canvas 内容转换为 Blob 对象
|
||
canvas.toBlob((blob) => {
|
||
resolve(URL.createObjectURL(blob));
|
||
}, 'image/png');
|
||
|
||
} catch (error) {
|
||
reject(new Error('Failed to draw image to canvas.'));
|
||
}
|
||
}
|
||
}, 1000); // 等待1秒后尝试绘制，防止 seek 操作未完成
|
||
};
|
||
|
||
// 监听视频加载错误
|
||
video.onerror = (error) => {
|
||
// reject(new Error('Failed to load video or get metadata. PS: Maybe the browser cannot play videos.'));
|
||
|
||
// 不直接抛出错误，而是抛出一个默认的封面图片，但是需要加以警告提示
|
||
console.warn('Failed to load video or get metadata. PS: Maybe the browser cannot play videos.');
|
||
resolve(config.video_thumbnail);
|
||
};
|
||
} catch (error) {
|
||
// reject(error);
|
||
// 不直接抛出错误，而是抛出一个默认的封面图片，但是需要加以警告提示
|
||
console.warn(error)
|
||
resolve(config.video_thumbnail);
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* 生成封面图片，OffscreenCanvas方式（不兼容iOS）
|
||
* @param {Object} coverUrl 封面图片地址
|
||
* @returns {Promise}
|
||
*/
|
||
async generateCoverThumbnail(coverUrl) {
|
||
return new Promise((resolve, reject) => {
|
||
|
||
// 内联 Worker 代码
|
||
const workerCode = `
|
||
self.onmessage = async function(e) {
|
||
const { imageUrl, iconBase64 } = e.data;
|
||
|
||
try {
|
||
// 加载图片并创建 ImageBitmap
|
||
let imgResponse = await fetch(imageUrl);
|
||
if (!imgResponse.ok) {
|
||
throw new Error(\`Failed to load image from \${imageUrl}: \${imgResponse.statusText}\`);
|
||
}
|
||
let imgBlob = await imgResponse.blob();
|
||
let imgBitmap = await createImageBitmap(imgBlob);
|
||
|
||
// 创建 OffscreenCanvas 并绘制图片
|
||
const offscreen = new OffscreenCanvas(imgBitmap.width, imgBitmap.height);
|
||
const ctx = offscreen.getContext('2d');
|
||
ctx.drawImage(imgBitmap, 0, 0);
|
||
|
||
// 加载图标并创建 ImageBitmap
|
||
let iconResponse = await fetch(iconBase64);
|
||
if (!iconResponse.ok) {
|
||
throw new Error(\`Failed to load icon from \${iconBase64}: \${iconResponse.statusText}\`);
|
||
}
|
||
let iconBlob = await iconResponse.blob();
|
||
let iconBitmap = await createImageBitmap(iconBlob);
|
||
|
||
// 计算图标的中心位置并绘制
|
||
const x = (imgBitmap.width - iconBitmap.width) / 2;
|
||
const y = (imgBitmap.height - iconBitmap.height) / 2;
|
||
ctx.drawImage(iconBitmap, x, y);
|
||
|
||
// 获取处理后的图像数据
|
||
const result = await offscreen.convertToBlob();
|
||
|
||
// 发送结果回主线程
|
||
self.postMessage(result);
|
||
} catch (error) {
|
||
console.error('Error processing image:', error.message);
|
||
self.postMessage({ error: error.message });
|
||
}
|
||
};
|
||
`
|
||
|
||
// 创建 Blob
|
||
const blob = new Blob([workerCode], { type: 'application/javascript' });
|
||
|
||
// 创建一个指向 Blob 的 URL
|
||
const workerUrl = URL.createObjectURL(blob);
|
||
|
||
// 实例化 Worker
|
||
const worker = new Worker(workerUrl);
|
||
|
||
// 监听来自 Worker 的消息
|
||
worker.onmessage = (e) => {
|
||
if (e.data instanceof Blob) {
|
||
resolve(URL.createObjectURL(e.data));
|
||
} else {
|
||
console.warn(e.data.error);
|
||
// 不直接抛出错误，而是抛出一个默认的封面图片，但是需要加以警告提示
|
||
resolve(config.video_thumbnail);
|
||
}
|
||
worker.terminate(); // 处理完成后终止 worker
|
||
};
|
||
|
||
// 向 Worker 发送消息
|
||
worker.postMessage({ imageUrl: coverUrl, iconBase64: config.video_playicon });
|
||
});
|
||
},
|
||
/**
|
||
* 生成封面图片，普通方式，可能影响性能（兼容iOS）
|
||
* @param {Object} coverUrl 封面图片地址
|
||
* @returns {Promise}
|
||
*/
|
||
async generateCoverThumbnailIOS(coverUrl){
|
||
return new Promise(async (resolve, reject) => {
|
||
try {
|
||
// 创建 Image 对象并加载封面图片
|
||
const img = new Image();
|
||
img.src = coverUrl;
|
||
await new Promise(resolve => img.onload = resolve);
|
||
|
||
// 创建 Canvas 并绘制封面图片
|
||
const canvas = document.createElement('canvas');
|
||
canvas.width = img.width;
|
||
canvas.height = img.height;
|
||
const ctx = canvas.getContext('2d');
|
||
ctx.drawImage(img, 0, 0);
|
||
|
||
// 加载播放按钮图标并绘制
|
||
const icon = new Image();
|
||
icon.src = config.video_playicon; // 假设这是播放按钮图标的 URL
|
||
await new Promise(resolve => icon.onload = resolve);
|
||
|
||
// 计算播放按钮的位置和大小
|
||
// const playButtonSize = Math.min(canvas.width, canvas.height) * 0.15;
|
||
const playButtonSize = canvas.width * 0.15;
|
||
const playButtonX = (canvas.width - playButtonSize) / 2;
|
||
const playButtonY = (canvas.height - playButtonSize) / 2;
|
||
|
||
// 确保播放按钮图标按比例缩放
|
||
const iconAspectRatio = icon.width / icon.height;
|
||
const iconWidth = playButtonSize;
|
||
const iconHeight = iconWidth / iconAspectRatio;
|
||
|
||
// 绘制播放按钮图标到 Canvas
|
||
ctx.drawImage(icon, playButtonX, playButtonY, iconWidth, iconHeight);
|
||
|
||
// 将 canvas 内容转换为 Blob 对象
|
||
canvas.toBlob((blob) => {
|
||
resolve(URL.createObjectURL(blob));
|
||
}, 'image/png');
|
||
|
||
} catch (error) {
|
||
// iOS Safari 的安全策略通常比其他浏览器更严格，本地file://协议也会导致跨域
|
||
console.warn('iOS createCoverThumbnail error :', error);
|
||
// reject(error);
|
||
// 不直接抛出错误，而是抛出一个默认的封面图片，但是需要加以警告提示
|
||
resolve(config.video_thumbnail);
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|