| 1 | // import { Ppt2Canvas } from './ppt2canvas.js' |
| 2 | |
| 3 | async function drawPptxFun(pptxObj, idx) { |
| 4 | let canvas = document.createElement('canvas') |
| 5 | let width = pptxObj.width |
| 6 | let height = pptxObj.height |
| 7 | canvas.width = width * 2 |
| 8 | canvas.height = height * 2 |
| 9 | canvas.style.width = width + 'px' |
| 10 | canvas.style.height = height + 'px' |
| 11 | let ctx = canvas.getContext('2d') |
| 12 | ctx.scale(2, 2) |
| 13 | ctx.imageSmoothingEnabled = true |
| 14 | ctx.imageSmoothingQuality = 'high' |
| 15 | let ppt2Canvas = new Ppt2Canvas(canvas, 'anonymous') |
| 16 | await ppt2Canvas.drawPptx(pptxObj, idx) |
| 17 | return ppt2Canvas.getCanvas() |
| 18 | } |
| 19 | |
| 20 | // drawPptxFun = async (pptxObj, idx) => return canvas |
| 21 | async function drawCover(pptxObj, drawPptxFun, grayScale) { |
| 22 | let pages = pptxObj.pages |
| 23 | if (pages.length == 1) { |
| 24 | let _canvas = await drawPptxFun(pptxObj, 0, pptxObj.width, pptxObj.height) |
| 25 | return _canvas.toDataURL() |
| 26 | } |
| 27 | async function drawPptxImage(pptxObj, idx) { |
| 28 | let _canvas = await drawPptxFun(pptxObj, idx) |
| 29 | let imgSrc = _canvas.toDataURL() |
| 30 | return new Promise(resolve => { |
| 31 | let image = new Image() |
| 32 | image.src = imgSrc |
| 33 | image.onload = async function() { |
| 34 | resolve(image) |
| 35 | } |
| 36 | }) |
| 37 | } |
| 38 | // let width = 1200, height = 676 |
| 39 | let width = 600, height = 338 |
| 40 | let canvas = document.createElement('canvas') |
| 41 | canvas.width = width |
| 42 | canvas.height = height |
| 43 | let ctx = canvas.getContext('2d') |
| 44 | ctx.imageSmoothingEnabled = true |
| 45 | ctx.imageSmoothingQuality = 'high' |
| 46 | |
| 47 | ctx.fillStyle = 'rgb(212, 212, 212)' |
| 48 | ctx.fillRect(0, 0, width, height) |
| 49 | |
| 50 | let size = 0 |
| 51 | let w = width / 3.3, h = height / 3.3 |
| 52 | for (let i = 1; i < pages.length; i++) { |
| 53 | size++ |
| 54 | let x = 0 |
| 55 | let y = 0 |
| 56 | if (size == 2 || size == 7) { |
| 57 | x = w + (width - w * 3) / 2 |
| 58 | } else if (size == 3 || size == 5 || size == 8) { |
| 59 | x = width - w |
| 60 | } |
| 61 | if (size == 4 || size == 5) { |
| 62 | y = h + (height - h * 3) / 2 |
| 63 | } else if (size > 5) { |
| 64 | y = height - h |
| 65 | } |
| 66 | let image = await drawPptxImage(pptxObj, i) |
| 67 | ctx.drawImage(image, x, y, w, h) |
| 68 | if (size == 8) { |
| 69 | break |
| 70 | } |
| 71 | } |
| 72 | w = width * 0.65 |
| 73 | h = height * 0.65 |
| 74 | let image = await drawPptxImage(pptxObj, 0) |
| 75 | ctx.drawImage(image, (width - w) / 2, (height - h) / 2, w, h) |
| 76 | ctx.rect((width - w) / 2, (height - h) / 2, w, h) |
| 77 | ctx.lineWidth = 1 |
| 78 | ctx.strokeStyle = 'rgb(212, 212, 212)' |
| 79 | ctx.stroke() |
| 80 | if (grayScale) { |
| 81 | // 灰度 |
| 82 | let imageData = ctx.getImageData(0, 0, width, height) |
| 83 | let data = imageData.data |
| 84 | for (let i = 0; i < data.length; i += 4) { |
| 85 | let luminance = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114 |
| 86 | data[i] = luminance |
| 87 | data[i + 1] = luminance |
| 88 | data[i + 2] = luminance |
| 89 | } |
| 90 | ctx.putImageData(imageData, 0, 0) |
| 91 | } |
| 92 | return canvas.toDataURL() |
| 93 | } |
| 94 | |
| 95 | // export { drawPptxFun, drawCover } |