前端常用插件

1、clipboard（复制）

clipboard是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件，及将文本内容复制到剪贴板中

安装

npm i clipboard
// or
yarn add clipboard

使用

// 导入插件
import ClipboardJS from 'clipboard';
// 结构
<span class="copy" data-clipboard-text="要复制的内容写在这里">复制</span>
// 初始化(法一：在mounted中挂载)
mounted() {
    this.$nextTick(() => {
        let clipboard = new ClipboardJS('.copy');
        clipboard.on('success', function (e) {
            e.clearSelection();
            // 这里写复制成功逻辑
	});
    });
},
// 法二：在methods中
methods:{
    copy() {
        let clipboard = new ClipboardJS('.copy');
        // 复制成功
        clipboard.on('success', (e) => {
            e.clearSelection();
            // 这里写复制成功逻辑
        });
    }
} 

2、qrcode（生成二维码）

qrcode一个用于生成二维码的 JavaScript插件

option

参数1：canvas的dom结构（可传可不传）

参数2：需要生成二维码的字符串

其他参数：配置

Version	二维码版本（不写则自动匹配最合适的）
errorCorrectionLevel	容错率(L、M、Q、H)纸质多设置为H（磨损大也可扫）
maskPattern	掩码（不写则自动匹配最合适的）
margin	空白边距
scale	放大比例，默认4（1代表1px）
width	生成的二维码宽
hight	生成的二维码高
color	{dack:’#000000’,light:’#ffffff’}前景色，背景色
type	默认image/png(生成url时可配置)图片类型

安装

npm i  qrcode
// or
yarn add qrcode

使用

QRCode.toCanvas

// 导入
import QRCode from "qrcode";
// 结构
<!-- 无canvas结构-->
<div ref="content" id="con"></div>
<!-- 有canvas结构 -->
<canvas id="canvas"></canvas>
// 使用
methods:{
    // 有canvas结构
    let canvas = document.getElementById("canvas");
    let options = {
      width: 200,
      height: 200,
      margin: 0,
      errorCorrectionLevel: "L",
      color: {
        dark: "#000000",
        light: "#FFFFFF",
      },
    };
    QRCode.toCanvas(canvas, "https://www.baidu.com", options)
      .then((can) => {
        console.log(can);
        // this.$nextTick(()=>{
        // this.$refs.qrCodeUrl.content = ''; // 清空原先结构
        // var container = this.$refs.content;
        // container.appendChild(can);//(无canvas结构（第一个参数不传）则手动添加这两行代码,把生成的canvas添加到相应的容器中)
    	// })
      })
      .catch((err) => {
        console.error(err);
      });
}

toDataURL(canvasElement,text,options)

注：不传参数1可以用img标签的src接收，传参数1(效果与toCanvas()API相同)返回一个src地址，用img标签的src接收显示

结构

<div ref="content" id="con">
    <img :src="picUrl" alt=""/>
</div>

使用方法

let options = {
    type: "image/jpeg",
    quality: 0.3,
    width: 200,
    height: 200,
    margin: 0,
    errorCorrectionLevel: "L",
    color: {
        dark: "#000000",
        light: "#FFFFFF",
      },
    };
QRCode.toDataURL("https://www.baidu.com", options)
    .then((url) => {
        this.picUrl = url;//利用data中的数据接收
    })
    .catch((err) => {
        console.error(err);
});

3、html2canvas（截图）

是一个基于dom结构进行截图的插件

配置参数options

allowTaint	允许存储外部域的图片，默认false
userCORS	允许跨域资源共享，默认false(不能与allowTaint同时配置为true)
proxy	加载跨域图像代理地址，默认为null,为空跨域图片不会被加载
scale	默认放大倍数(window.devicePixelRatio)*1表示原来的大小
bgackgroundColor	canvas背景颜色，默认#ffffff（出现透明度问题，可设为transparent）
width/height	生成的canvas画布宽,高（dom元素的左上角开始，太小无法完整截取目标dom元素）
x/y	生成的canvas画布x/y方向的偏移（可完整截下目标dom元素，会左右留下空白）
scrollX/scrollY	dom元素定位为fixed才会生效（截图大小偏移dom元素宽高的距离）
removeContainer	是否清除html2canvas临时创建的dom元素，默认true
logging	启用日志记录，默认true
windowWidth/windowHeight	渲染元素时使用的窗口宽高，可能会影响媒体查询

问题：

截图图片模糊：不要使用背景图，使用img标签

图片截图无法显示，设置allowTaint、userCORS某一项值为true即可（原因：图片素材出现了跨域）

不要使用字体渐变色：到时候会出现问题

1、安装

npm install html2canvas

2、导入

import html2canvas from 'html2canvas';

3、使用方法(参数1：被截图的dom元素，参数2：options配置)

结构

<div id="con">
    <p>这是一张普通截图</p>
    <img src="../../img/bitCny.png" alt="" />
</div>
<button class="btn" @click="cut">点我截图</button>

cut() {
    html2canvas(document.getElementById("con"), {
        scale: window.devicePixelRatio * 2, //截图放大两倍
        useCORS: true,
        proxy: "https://xxxx.xxx.com",
    })
    .then((canvas) => {
        // document.body.appendChild(canvas);//如果不是点击下载，可以直接把canvas画布添加到相应的位置
        var imgUrl = canvas.toDataURL("image/png"); // 获取生成的图片的url
        var aLink = document.createElement("a"); //创建一个a标签
    	aLink.href = imgUrl;
            aLink.download = "图片.png"; //图片下载名称
            aLink.click(); //下载保存图片
	})
	.catch((err) => {
            console.error(err);
	});
}