js生成word中图片处理

在使用js生成word文档时，有时需要在文档中插入图片，但是插入图片需要对图片进行处理，使之适应word文档。下面介绍一些js处理word中图片的方法。

1. 压缩图片

插入到word文档中的图片应该尽可能地压缩，以减小文件大小。可以使用canvas将图片压缩后再插入到word文档中。示例代码如下：

function compress(img, maxSize = 1024) {
  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext('2d')
  let width = img.width
  let height = img.height

  if (width > height) {
    if (width > maxSize) {
      height *= maxSize / width
      width = maxSize
    }
  } else {
    if (height > maxSize) {
      width *= maxSize / height
      height = maxSize
    }
  }

  canvas.width = width
  canvas.height = height

  ctx.drawImage(img, 0, 0, width, height)

  return canvas.toDataURL()
}

2. 调整图片大小

插入到word文档中的图片应该与文本一致或适当，可以使用css样式或js动态设置图片大小。以下是设置图片大小的示例代码：

let imgSrc = 'http://example.com/example.jpg'
let img = document.createElement('img')
img.src = imgSrc
img.onload = function () {
  let width = img.width
  let height = img.height
  let maxWidth = 600 // 最大宽度为600px
  if (width > maxWidth) {
    height *= maxWidth / width // 等比例缩放
    width = maxWidth
  }
  img.width = width
  img.height = height
}

3. 转换为base64编码

插入到word文档中的图片可以使用base64编码，可以使用canvas将图片转换为base64编码，示例代码如下：

function toBase64(img) {
  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext('2d')
  let width = img.width
  let height = img.height

  canvas.width = width
  canvas.height = height

  ctx.drawImage(img, 0, 0, width, height)

  return canvas.toDataURL()
}

4. 插入到word文档中

将图片插入到word文档中需要使用windows的COM接口，可以使用activexobject和wps来实现。以下是插入图片到word文档的示例代码：

try {
  var wps = new ActiveXObject("KWps.Application"); // 打开wps应用
  var doc = wps.Documents.Add(); // 添加文档
  var imgSrc = 'http://example.com/example.jpg';
  var img = new Image();
  img.src = imgSrc;
  img.onload = function () {
    var width = img.width;
    var height = img.height;
    var base64 = toBase64(img);
    var range = doc.Range();
    var shape = range.InlineShapes.AddPictureFromBase64(base64); // 插入图片到文档
    shape.Height = height;
    shape.Width = width;
    wps.visible = true; // 显示wps应用
  };
} catch (err) {
  alert("打开wps应用失败，请确认你已经安装了wps");
}

以上是使用js生成word中图片处理的方法。通过以上的处理和插入，可以让生成的word文件更加完美和美观。