CodePen Embed - Make A Gradient QrCode

Live

 
<div id="container" class="container" style="--colorA: #369; --colorB: #f0c; --deg: 45deg;">
    <h1>GradientQrCode -- 渐变二维码</h1>
    <div class="g-box">
        <div class="imgUpload">
            <div class="dropZone">
                <div data-reactid=".0.0.0">上传白底黑字二维码</div>
                // <input id="fileId1" type="file" accept="image/jpg, image/jpeg, image/png, image/gif" name="file" />
            </div>
        </div>
        <div class="g-init">
            <h2>原图</h2>
            <div id="init"></div>
        </div>
        <div class="g-gradient">
            <h2>渐变图</h2>
            <div id="gradient"></div>
            <div class="g-input">
                <label>渐变 A：</label>
                <input class="color-input-A" data-color="#369" value="#369" />
            </div>
            <div class="g-input">
                <label>渐变 B：</label>
                <input class="color-input-B" data-color="#F0C" value="#F0C" />
            </div>
            <div class="g-input">
                <label>角度：</label>
                <input id="gradient-deg" data-color="45" value="45" />
            </div>
            <div class="g-input">
                <label>是否需要镂空：</label>
                <input id="isMaskRadio" type="checkbox" >
            </div>
            <div class="g-input g-input-radio">
                <p>镂空类型:</p>
                <div>
                    <input type="radio" id="radius" name="maskType" value="radius" checked>
                    <label for="huey">圆角</label>
                </div>
                <div>
                    <input type="radio" id="rect" name="maskType" value="rect">
                    <label for="dewey">矩形</label>
                </div>
            </div>
            <div class="g-input g-input-range" >
                <label>镂空大小：</label>
                <input type="range" id="range" name="maskSize" min="0" max="50" value="10" />
            </div>
        </div>
        <div class="g-result">
            <h2>结果图</h2>
            <div id="result"></div>
        </div>
    </div>
</div>

Live

​x
 
h1 {
  font-weight: 100;
  font-size: 3em;
  line-height: 1;
}
​
h2 {
    margin-bottom: 12px;
}
​
.g-init,
.g-gradient,
.g-result {
    width: 250px;
    height: 250px;
    margin-left: 50px;
    margin-top: 24px;
    border-left: 1px dashed #999;
    padding: 12px;
    
    .img {
        width: 225px;
        height: 225px;
    }
}
​
.word {
  color: #666;
  font-size: 1.2em;
  line-height: 2;
}
​
.container {
  padding: 3em;
}
​
#code {
  margin-top: 2em;
  width: 100%;
  box-sizing: border-box;
  font-size: 1.2em;
  background: #ffe;
  display: block;
  padding: 2em;
  font-family: Consolas, Monaco, monospace;
  color: #333;
  text-shadow: 0 1px 1px white;
}
​
.dropZone {
  height: 150px;
  width: 150px;
  margin: 2em 0;
  text-align: center;
  border: 2px dashed #ccc;
  padding: 2em;
}
​
.dropZone > div {
  margin-top: 50px;
  width: 100%;
  line-height: 2;
  text-align: center;
}
​
.dropZone > input {
  cursor: pointer;
  display: block;
}
​
.g-box {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}
​
#gradient {
    width: 225px;
    height: 225px;
    background: linear-gradient(var(--deg), var(--colorA), var(--colorB));
}
​
#result {
    position: relative;
    width: 225px;
    height: 225px;
​
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(var(--deg), var(--colorA), var(--colorB));
        mask: var(--mask);
        mask-repeat: no-repeat;
        clip-path: var(--clip);
        mix-blend-mode: lighten;
    }
}
​
.g-input-radio,
.g-input-range {
    display: none;
}
​
.g-input {
    margin: 12px 0;
​
    input {
        width: 148px;
    }
    
    input[type=radio],
    input[type=checkbox] {
        width: 24px;
    }
}
​
​
​

Live

xxxxxxxxxx
 
let img2div = function (imgElem) {
        return new img2div.prototype.init(imgElem);
    },
    container = document.getElementById("container"),
    init = document.getElementById("init"),
    result = document.getElementById("result"),
    radio = document.getElementById("isMaskRadio"),
    maskInput = document.querySelectorAll(".g-input-radio, .g-input-range"),
    imgSrc = null,
    colorPropertyA = "#369",
    colorPropertyB = "#F0C",
    colorDeg = "45",
    maskSize = 10,
    maskType = "radius",
    isNeedMask = false;
​
/**
 * 监听图片上传事件
 * @return {[type]} [description]
 */
function eventBindAndInit() {
    var input = document.getElementById("fileId1");
​
    if (typeof FileReader === "undefined") {
        document.write = "抱歉，你的浏览器不支持，请尝试使用高级浏览器";
    } else {
        // input.click();
        input.addEventListener("change", readFile, false);
    }
​
    const colorA = new Huebee(".color-input-A", {
        // options
        setBGColor: true,
        saturations: 2
    });
​
    const colorB = new Huebee(".color-input-B", {
        // options
        setBGColor: true,
        saturations: 2
    });
​
    colorA.on("change", function (color) {
        colorPropertyA = color;
        setColorAttribute();
    });
​
    colorB.on("change", function (color) {
        colorPropertyB = color;
        setColorAttribute();
    });
    
    document.querySelectorAll('#gradient-deg')[0].addEventListener('change', (event) => {
        colorDeg = event.target.value;
        setColorAttribute();
    });
    
    radio.addEventListener('change', (event) => {
        isNeedMask =  event.target.checked;
        
        showMaskDom(isNeedMask);
        setColorAttribute();
    });
    
    document.querySelectorAll('.g-input-radio')[0].addEventListener('change', (event) => {
        maskType = event.target.value;
        setColorAttribute();
    }, false);
    
    document.querySelectorAll('#range')[0].addEventListener('change', (event) => {
        maskSize = parseInt(event.target.value);
        setColorAttribute();
    }, false);
}
​
/**
 * 上传图片处理
 * @return {[type]} [description]
 */
function readFile() {
    var file = this.files[0];
    console.log("file", file);
    if (!/image\/\w+/.test(file.type)) {
        alert("文件必须为图片！");
        return false;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        init.innerHTML = '<img class="img" src="' + this.result + '" alt=""/>';
        result.innerHTML =
            '<img class="img" src="' + this.result + '" alt=""/>';
    };
}
​
function setColorAttribute () {
    let colorStyle = `--colorA: ${colorPropertyA}; --colorB: ${colorPropertyB}; --deg: ${colorDeg}deg;`;
    
    if (isNeedMask) {
        
        if (maskType === "radius") {
            colorStyle += `--mask: radial-gradient(transparent, transparent ${maskSize}%, #000 ${maskSize + 0.2}%)`;
        } else {
            colorStyle += `--clip: polygon(0% 0%, 0% 100%, ${50 - maskSize}% 100%, ${50 - maskSize}% ${50 - maskSize}%, ${50 + maskSize}% ${50 - maskSize}%, ${50 + maskSize}% ${50 + maskSize}%, ${50 - maskSize}% ${50 + maskSize}%, ${50 - maskSize}% 100%, 100% 100%, 100% 0%);`;
        }
        
    }
    
    container.setAttribute('style', colorStyle);
};
​
function showMaskDom(isShow) {
    [...maskInput].forEach(dom => {
        if (isShow) {
            dom.style.display = "flex";
        } else {
            dom.style.display = "none";
        }
​
    });
}
​
eventBindAndInit();
​

This Pen is owned by mafqla on CodePen. It is a fork of this Pen.

See more by @mafqla on CodePen

External CSS

https://unpkg.com/huebee@2/dist/huebee.min.css

External JavaScript

https://unpkg.com/huebee@2/dist/huebee.pkgd.min.js