导入word无法显示图片

[Tsick]

mammoth将word的图片转成了base64，但是在canvas里面不显示

[qq1066536]

word导出的img元素上没有宽和高，所以看不见

[onlymetmh]

导入word文件，文本样式丢失，并且图片也丢失了

[onlymetmh]

word导出的img元素上没有宽和高，所以看不见

那请问怎么解决这个问题呢？

[douglasmatheus]

Hello, is it possible to get the original image dimensions when creating an html image element. However, the sizes obtained are the original sizes of the image itself, and nothing more, so the final size of the image may be different from what is displayed in the docx when opened with any other program.

Here is an example of how to obtain the image dimensions:

const htmlResult = await mammoth.convertToHtml({ arrayBuffer }, {...})
transformHTML(htmlResult.value)

funciton transformHTML(stringHtml: string) {
  // ...before convert the html string into html elements to process element by element, at the end remove all...
  if (node.nodeName === 'IMG') {
    // ... get the src of the image
    const getImgSizes = function (src: string) {
      return new Promise(function(resolve) {
        const i = new Image();
        i.onload = function(){
          resolve({width: i.width, height: i.height})
        };
        i.src = src;
      });
    }
    const sizes: any = await getImgSizes(src).then((datas) => {
      return datas
    })
  }
}

You need to be aware that this process occurs asynchronously, in this example I used await, but depending on your implementation you need to adapt so that your code works asynchronously too.

I hope this helps, I'm at your disposal for anything.

Edit: I believe it is possible to do this by configuring it in mammoth itself (not tested), instead of doing the process after the html has already been converted:

mammoth.images.imgElement(function(image) {
    return image.readAsBase64String().then(function(imageBuffer) {
        // ... here you do the process of creating the html image element and getting its dimensions
        return {
            src: "data:" + image.contentType + ";base64," + imageBuffer
        };
    });
})

[zhihaoge]

找到 docx 插件的 src\docx\importDocx.ts 文件，改为以下，保存 run build，替换掉node_modules中的对应dist文件夹，删除 node_modules 中的.vite文件夹（缓存），重启项目。

import mammoth from 'mammoth'

declare module '@hufe921/canvas-editor' {
interface Command {
executeImportDocx(options: IImportDocxOption): void
}
}

export interface IImportDocxOption {
arrayBuffer: ArrayBuffer
}

const waitImgWH = (value: string): Promise => new Promise((resolve) => {
const dom = document.createElement('div')
dom.innerHTML = value
setTimeout(() => {
resolve(dom.innerHTML)
}, 0)
})

export default function (command: Command) {
return async function (options: IImportDocxOption) {
const { arrayBuffer } = options
const result = await mammoth.convertToHtml({
arrayBuffer
})
const value = result.value.includes('<img') ? await waitImgWH(result.value) : result.value
command.executeSetHTML({
main: value
})
}
}

[lizhongyue248]

找到 docx 插件的 src\docx\importDocx.ts 文件，改为以下，保存 run build，替换掉node_modules中的对应dist文件夹，删除 node_modules 中的.vite文件夹（缓存），重启项目。

import mammoth from 'mammoth'

declare module '@hufe921/canvas-editor' {
interface Command {
executeImportDocx(options: IImportDocxOption): void
}
}

export interface IImportDocxOption {
arrayBuffer: ArrayBuffer
}

const waitImgWH = (value: string): Promise => new Promise((resolve) => {
const dom = document.createElement('div')
dom.innerHTML = value
setTimeout(() => {
resolve(dom.innerHTML)
}, 0)
})

export default function (command: Command) {
return async function (options: IImportDocxOption) {
const { arrayBuffer } = options
const result = await mammoth.convertToHtml({
arrayBuffer
})
const value = result.value.includes('<img') ? await waitImgWH(result.value) : result.value
command.executeSetHTML({
main: value
})
}
}

大佬nb，现在就差格式不对的问题了

[woshiqqq]

找到 docx 插件的 src\docx\importDocx.ts 文件，改为以下，保存 run build，替换掉node_modules中的对应dist文件夹，删除 node_modules 中的.vite文件夹（缓存），重启项目。

import mammoth from 'mammoth'

declare module '@hufe921/canvas-editor' {
interface Command {
executeImportDocx(options: IImportDocxOption): void
}
}

export interface IImportDocxOption {
arrayBuffer: ArrayBuffer
}

const waitImgWH = (value: string): Promise => new Promise((resolve) => {
const dom = document.createElement('div')
dom.innerHTML = value
setTimeout(() => {
resolve(dom.innerHTML)
}, 0)
})

export default function (command: Command) {
return async function (options: IImportDocxOption) {
const { arrayBuffer } = options
const result = await mammoth.convertToHtml({
arrayBuffer
})
const value = result.value.includes('<img') ? await waitImgWH(result.value) : result.value
command.executeSetHTML({
main: value
})
}
}

为什么改了未生效呢

[Nyx2022]

找到 docx 插件的 src\docx\importDocx.ts 文件，改为以下，保存 run build，替换掉node_modules中的对应dist文件夹，删除 node_modules 中的.vite文件夹（缓存），重启项目。

import mammoth from 'mammoth'

declare module '@hufe921/canvas-editor' {
interface Command {
executeImportDocx(options: IImportDocxOption): void
}
}

export interface IImportDocxOption {
arrayBuffer: ArrayBuffer
}

const waitImgWH = (value: string): Promise => new Promise((resolve) => {
const dom = document.createElement('div')
dom.innerHTML = value
setTimeout(() => {
resolve(dom.innerHTML)
}, 0)
})

export default function (command: Command) {
return async function (options: IImportDocxOption) {
const { arrayBuffer } = options
const result = await mammoth.convertToHtml({
arrayBuffer
})
const value = result.value.includes('<img') ? await waitImgWH(result.value) : result.value
command.executeSetHTML({
main: value
})
}
}

@zhihaoge 我在最新的0.9.118版本中是 1、概率性显示图片，这时就需要反复导入多次之后才有图片 2、对于页眉页脚中的图片还是没有显示， 大佬再看一下?