天給小伙伴們分享一個超棒的Vue圖片任意裁剪插件VueImgCutter。

vue-img-cutter 基于 vue2.x 構建的輕量級剪切圖片組件。支持移動圖像、放大縮小圖片、任意移動圖片、固定比例/尺寸、遠程圖片裁剪等功能。

功能特色

• 兼容IE9+，MSEdge，Chrome，Firefox
• 兩種展現形式，行內或彈窗
• 可旋轉、縮放圖片
• 任意比例、大小裁剪
• 固定比例、大小裁剪
• 支持遠程圖片裁剪、跨域設置

安裝

$ npm i vue-img-cutter -S

使用插件

<template>
  <div id="app">
    <ImgCutter
      label="選擇圖片"
      :isModal="false"
      :boxWidth="800"
      :boxHeight="500"
      :cutWidth="300"
      :cutHeight="300"
      :sizeChange="true"
      :moveAble="true"
      WatermarkText="水印文字"
      v-on:cutDown="cutDown"
    >
      <div class="btn btn-primary" slot="open">選擇本地圖片</div>
    </ImgCutter>
  </div>
</template>
<script>
import ImgCutter from 'vue-img-cutter'
export default {
  components: { ImgCutter },
  data() {
    return {}
  },
  methods: {
    cutDown(res) {
      let imgSrc=res.dataURL;
      console.log(imgSrc);//輸出為base64數據
    }
  }
}
</script>

設置模態彈框模式

<ImgCutter :isModal="true"></ImgCutter>

參數配置

插槽Slot

<ImgCutter v-on:cutDown="cutDown">
  <button slot="open">選擇圖片</button>
</ImgCutter>

返回值

最后附上示例及項目地址

# 演示地址
https://ihtmlcss.com/demo/dist/#/croptool
# 倉庫地址
https://github.com/acccccccb/vue-img-cutter

ok，就介紹到這里。希望對你有幫助！感興趣的同學可以去了解下哈~

尋找熱愛表達的你#

"一鍵將網頁截圖制作成HTML網頁"是指一種技術，它允許用戶通過簡單的操作，將網頁的截圖轉換成HTML代碼的網頁。這通常涉及到自動布局、樣式提取和代碼生成。以下是實現這一功能的相關技術和步驟：

1. 截圖捕捉：首先，需要有一個方法來捕捉網頁的截圖，這可以通過瀏覽器插件、屏幕捕獲工具或專門的應用程序來完成。

2. 圖像處理：捕捉到的截圖可能需要進行預處理，比如裁剪、壓縮或調整分辨率，以確保圖像的質量。

3. 元素識別：使用圖像識別技術來分析截圖，識別網頁中的元素，比如文本、按鈕、圖片等。

4. 布局分析：基于識別出的元素，分析頁面的布局信息，包括元素的大小、位置和層級。

5. 樣式解析：提取頁面的樣式信息，包括顏色、字體、間距等，并將它們轉換為CSS代碼。

6. HTML生成：根據布局和樣式信息，生成HTML結構代碼，將截圖中的元素轉換為HTML標簽。

7. 代碼優化：對生成的HTML代碼進行優化，確保代碼的可讀性、維護性和性能。

8. 響應式設計：確保生成的網頁代碼能夠適應不同的屏幕尺寸和設備，實現響應式布局。

9. 交互性實現：如果截圖中的頁面包含交互元素，需要添加相應的JavaScript代碼來實現這些交互。

10. 一鍵操作：提供一個簡單的用戶界面，用戶只需點擊一個按鈕，就可以完成截圖到HTML的轉換。

11. 預覽功能：在轉換過程中提供實時預覽，讓用戶可以實時看到轉換效果。

12. 自定義選項：允許用戶對生成的HTML代碼進行自定義，比如修改布局、添加額外的樣式或功能。

13. 保存和導出：用戶可以保存或導出生成的HTML代碼，以便進一步使用或分享。

14. 錯誤處理：在轉換過程中識別和處理潛在的錯誤，比如布局沖突或樣式問題。

15. 兼容性測試：確保生成的網頁在不同的瀏覽器和設備上都能正常顯示和工作。

16. 安全性考慮：生成的代碼應遵循安全最佳實踐，避免潛在的安全風險。

17. 用戶反饋：收集用戶反饋，不斷改進轉換算法和用戶體驗。

18. 開源和社區支持：作為開源項目，鼓勵社區參與貢獻代碼和改進功能。

這種一鍵轉換技術可以大大提高網頁開發的效率，尤其是對于快速原型設計和演示目的。然而，需要注意的是，自動生成的代碼可能需要進一步的人工審查和調整，以確保最終產品的質量和性能。此外，一些復雜的網頁效果和動態交互可能需要手動編寫代碼來實現。

文章首發挑戰賽#

簡介

Vue Cropper 是一款實用的 JavaScript 圖片裁剪插件，基于 Vue.js 實現了在 web 上對圖片的放大縮小、旋轉、拖選區域裁剪、圖片壓縮上傳等功能，API 也很簡單，使用很方便。

特性

• 基于 Vue 開發，支持最新的 Vue 3.x，兼容 Vue 2.x
• 支持 Vite 和 TypeScript
• 無論是輸入和輸出圖片，圖片數據類型都支持 base 64 和 blob，對圖片輸入和導出上傳處理很友好
• 支持壓縮圖片大小，輸出主流的 JPG / PNG / WebP 圖片格式
• 除了可以在 web 端使用，也支持在服務端使用