如何基于QRCode制作二维码插件（一）支持三色渐变，中心LOGO图标

QRCode

制作一款适合自己使用的QRCode插件，基于QRCode代码更改

qrcode源码:https://github.com/davidshimjs/qrcodejs

比起qrcode扩展的功能的有

• Css选择器（Qrcode仅支持id选择器）
• 二维码背景颜色渐变
• 支持中心图标（可调整图片的大小）

QRCode是如何制作二维码

三种方式：

• Canvas ：绘制成功后生成img标签，可通过css控制样式

• SVG：

  需添加useSVG：ture属性，生成的二维码是一张 svg 矢量图 无img标签

• Table构造点阵

var useSVG = document.documentElement.tagName.toLowerCase() === "svg";
// Drawing in DOM by using Table tag
var Drawing = useSVG ? svgDrawer : !_isSupportCanvas() ? (function () {
    ... }

这段代码说的是先判断是否支持SVG，如果支持则使用SVG；否则判断是否支持Canvas，如果支持则使用Canvas，如果不支持，就使用Table来构造点阵

插件扩展功能是如何实现

两种实现方式（只针对canvas生成的二维码）

一种是纯画Canvas，没有img标签，所有的属性只能通过代码控制，无法通过css控制

一种是利用canvas生成两张图片，一张二维码，一张中心图标，中心图标覆盖在二维码上方，可通过css控制

中心图标的生成

可直接参考https://blog.csdn.net/chy555chy/article/details/85785819的文章

可通过iconWidth ，iconHeight设置icon的大小

但这个方法是纯画Canvas的

QRCode = function (el, vOption) {
   
		const ratio = 0.3;
		this._htOption = {
   
			width : 256,
			height : 256,
			typeNumber : 4,
			colorDark : "#000000",
			colorLight : "#ffffff",
		};
        this._htOption.iconWidth=this._htOption.width * ratio;
        this._htOption.iconHeight=this._htOption.width * ratio;
     }

定义默认的图标大小为二维码的三分之一，默认为正方形的图标

        /**
         * Draw the icon of QR code Center
         * @param {QRCode} oQRCode
         */
        Drawing.prototype.addIcon =  async function (iconSrc) {
   
            //通过ES6的async/await语法将异步的Promise转为同步方法
            const image = await new Promise((resolve, reject) => {
   
                const image = new Image();
            image.src = iconSrc;
            image.crossOrigin='Anonymous';
            image.onload=()=>{
   resolve(image);};
        });
            const ratio  = 0.3;//三分之二开始
            const marginRatio = (1-ratio)/2;
            const x = this._htOption.width * marginRatio