文字填充圖片的兩種方法#ppt教學(xué)

字填充圖片的兩種方法：

·第一種方法：

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

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

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

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

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

·第二種方法：

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

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

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

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

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

頁美工培訓(xùn)機(jī)構(gòu)教你用讓背景圖片拉伸填充的css屬性，比如一個容器(body,div,span)中設(shè)定一個背景。這個背景的長寬值在css2.1之前是不能被修改的。

所以實際的結(jié)果是只能重復(fù)顯示，所以出現(xiàn)了repeat,repeat-x,repeat-y,no-repeat這些屬性。就是用來

控制背景圖片的顯示的。所以一般用作背景圖片的有2類：

1.是一整張大圖，尺寸和區(qū)域大小剛好吻合

2.一個很小的條狀圖，通過repeat后，形成一個很規(guī)則的大圖背景。

但是css3出現(xiàn)以后，這個情況被改善了。background-size 屬性可以讓我們之前的希望成真。

而且這個屬性在firefox，chrome，以及ie9上都可以使用。

具體使用方法如下：（上海網(wǎng)頁美工設(shè)計培訓(xùn)）

背景圖尺寸(數(shù)值表示方式)：

#background-size{

background-size:200px 100px;

}

s-image-compressor

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

特點

可以對待轉(zhuǎn)化圖片大小設(shè)置一定的閾值，使得圖片轉(zhuǎn)化成 png 格式在不理想情況下不至于過大，同時大于這個閾值則可以自動轉(zhuǎn)化成 jpeg 格式，實現(xiàn)更優(yōu)壓縮；
可以限制輸出圖片寬高大小，從而防止意外情況發(fā)生，比如壓縮運(yùn)算過大使得瀏覽器奔潰；
默認(rèn)對 png 輸出圖片添加透明底色，其他格式設(shè)為白色，避免“黑屏”發(fā)生；
讀取 jpeg 格式圖片的 EXIF 信息，矯正圖片方位；
提供一些圖片處理的常用工具函數(shù)（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, // 圖片質(zhì)量
      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)
  })
 }

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

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

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

其他回調(diào)函數(shù)

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

var options = {
  file: file,

  // 圖片繪畫前
  beforeDraw: function (ctx) {
    vm.btnText = '準(zhǔn)備繪圖...';
    console.log('準(zhǔn)備繪圖...');
    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 是在畫布創(chuàng)建后，圖片繪畫前的鉤子函數(shù)，afterDraw 是在圖繪畫后的鉤子函數(shù)。

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

在線咨詢

上一篇：必知HTML基礎(chǔ)
下一篇：HTML中的定位

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

文字填充圖片的兩種方法#ppt教學(xué)

s-image-compressor

特點

安裝

使用

其他回調(diào)函數(shù)

您的項目需求