字填充圖片的兩種方法：

·第一種方法：

→首先新建一個空白的幻燈片，點擊插入圖片，先插入一張圖片進來。

→圖片插入進來之后插入一個文本框，插入一個文字，插入文本框輸入A，放大文字，字體可以改粗一點的。

→然后把圖片移動到左邊，文字放到圖片上面，先選中圖片，然后按住Ctrl鍵，再選中文字。

→在繪圖工具下有一個合并形狀，點擊下三角，選擇相交，這個文字就填充上圖片了。

這種方法有一個不好的地方，就是這個文字就沒法修改了。

·第二種方法：

→同樣插入一張圖片進來，圖片插入一欄之后按Ctrl鍵加x鍵剪切。

→然后點擊插入文本框，插入這個字母，放大一點，然后給它改個粗點的字體。

→到這一步之后點擊右邊的對象屬性，在這個文本選項這里下方有一個文本填充，選擇圖片或紋理填充。

→在圖片填充這里選擇剪切板，就是剛才剪切這個圖片，這樣這個圖片就填充完成了。

這種后期還可以增加文字或者刪除文字、修改文字，它都會自動填充圖片。

s-image-compressor

js-image-compressor 是一個實現輕量級圖片壓縮的 javascript 庫，壓縮后僅有 5kb，在前端頁面即可實現對圖片的壓縮。在提供基本圖片壓縮功能同時，還暴露出圖片處理相關公用方法

特點

• 可以對待轉化圖片大小設置一定的閾值，使得圖片轉化成 png 格式在不理想情況下不至于過大，同時大于這個閾值則可以自動轉化成 jpeg 格式，實現更優壓縮；
• 可以限制輸出圖片寬高大小，從而防止意外情況發生，比如壓縮運算過大使得瀏覽器奔潰；
• 默認對 png 輸出圖片添加透明底色，其他格式設為白色，避免“黑屏”發生；
• 讀取 jpeg 格式圖片的 EXIF 信息，矯正圖片方位；
• 提供一些圖片處理的常用工具函數（image2Canvas、canvas2Blob 和 canvas2DataUrl 等），用戶還可以自定義圖片輸出的樣式特征（比如可以灰度處理、加水印）。

安裝

npm安裝

npm install js-image-compressor --save-dev

使用

簡單配置

import ImageCompressor from 'js-image-compressor';

function imageCompress(file: any) {
  const size = file.size / 1024
    return new Promise((resolve, reject) => {
    const options = {
      file: file,
      quality: 0.8, // 圖片質量
      mimeType: 'image/jpeg',
      maxWidth: file.height,
      maxHeight: file.width,
      minWidth: 10, // 指定壓縮圖片最小寬度
      width: 1080, // 指定壓縮圖片寬度
      convertSize: Infinity,
      loose: true,
      redressOrientation: true,
      success: (result) => {
        resolve(result)
      },
      error: (msg) => {
        reject(msg)
      },
    }
    new ImageCompressor(options)
  })
 }

其中，鉤子函數 beforeCompress 發生在讀取圖片之后，創建畫布之前；鉤子函數 success 函數發生在壓縮完成生成圖片之后。它們回調參數 result 是整合來尺寸、圖片類型和大小等相關信息的 blob 對象。

輸出的壓縮圖片符合以下特征：

• 默認按照 0.8 壓縮率配置；
• 輸出圖片寬/高維持源圖片寬/高；
• 一般的，輸出圖片格式保持源圖片格式；
• 當 png 圖片的 size 大于 2m 時，默認轉化成 jpeg 格式圖片；
• 給 png 圖片填充透明色；
• 當輸出圖片 size 大于源圖片時，將源圖片當作輸出圖片返回；
• jpeg 格式圖片，矯正翻轉/旋轉方向；

其他回調函數

在壓縮輸出圖片之前，我們還可以對畫布進行一些自定義處理，融入元素。

var options = {
  file: file,

  // 圖片繪畫前
  beforeDraw: function (ctx) {
    vm.btnText = '準備繪圖...';
    console.log('準備繪圖...');
    ctx.filter = 'grayscale(100%)';
  },

  // 圖片繪畫后
  afterDraw: function (ctx, canvas) {
    ctx.restore();
    vm.btnText = '繪圖完成...';
    console.log('繪圖完成...');
    ctx.fillStyle = '#fff';
    ctx.font = (canvas.width * 0.1) + 'px microsoft yahei';
    ctx.fillText(vm.watermarkText, 10, canvas.height - 20);
  },
};

new ImageCompressor(options);

beforeDraw 是在畫布創建后，圖片繪畫前的鉤子函數，afterDraw 是在圖繪畫后的鉤子函數。

這里有張圖歸納了從本地上傳到對圖片壓縮的詳細過程