天给小伙伴们分享一个超棒的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 端使用，也支持在服务端使用