彩色二维码

2020-02-26 19:04:11 作者：互联网

配合qrcode使用

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
</head>
<body>
<div id="output"></div>
<div style="width: 500px;height: 500px;" id="can">
    <img src="" id="img" style="width: 100%;">
</div>

var out = $('#output').qrcode("http://qq932.com?name=name&aaa=asdasdasd").find('canvas')[0];

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
// 1000是最好的
var w = 1000;
var h = 1000;
canvas.width = w;
canvas.height = h;
ctx.drawImage(out,0,0,w,h)
// 返回像素数据
var imgData = ctx.getImageData(0, 0, w, h);
// 整个底色
var imgData = differentReplace(imgData,0,0,w,h,{r:255,g:255,b:255},{r:10,g:166,b:210})
// 三个点
imgData = differentReplace(imgData,0,0,w*0.4,h*0.4,{r:255,g:255,b:255},{r:20,g:210,b:150})
imgData = differentReplace(imgData,w*0.6,0,w*0.4,h*0.4,{r:255,g:255,b:255},{r:250,g:120,b:20})
imgData = differentReplace(imgData,0,h*0.6,w*0.4,h*0.4,{r:255,g:255,b:255},{r:120,g:120,b:210})
// 新上色
ctx.putImageData(imgData, 0, 0);
var base64 = canvas.toDataURL('image/jpeg');
$('#img').attr("src",base64)

// 空白填充，这里没用用到
function blankFill(imageData,x,y,width,height,fillColor){
    var x = x || 0,
        y = y || 0,
        w = x + w || imageData.width,
        h = y + h || imageData.height;
    if(x<0 || y<0 || w>imageData.width || h>imageData.height){
        throw new Error("error params!");
    }
    for(var j=y;j<h;j++){
        for(var i=x;i<w;i++){
            var index = j * imageData.width + i,
                a = imageData.data[4*index+3];
            if(a == 0){
                imageData.data[4*index] = fillColor.r;
                imageData.data[4*index+1] = fillColor.g;
                imageData.data[4*index+2] = fillColor.b;
                imageData.data[4*index+3] = 255;
            }
        }
    }
    return imageData;
}

// 相同替换，这里没有用到
function sameReplace(imageData,x,y,w,h,sourceColor,replaceColor){
    var x = x || 0,
        y = y || 0,
        w = x + w || imageData.width,
        h = y + h || imageData.height;
    if(x<0 || y<0 || w>imageData.width || h>imageData.height){
        throw new Error("error params!");
    }
    for(var j=y;j<h;j++){
        for(var i=x;i<w;i++){
            var index = j * imageData.width + i,
                r = imageData.data[4*index],
                g = imageData.data[4*index+1],
                b = imageData.data[4*index+2];
            if(r==sourceColor.r && g==sourceColor.g && b==sourceColor.b){
                if(replaceColor){
                    imageData.data[4*index] = replaceColor.r;
                    imageData.data[4*index+1] = replaceColor.g;
                    imageData.data[4*index+2] = replaceColor.b;
                    imageData.data[4*index+3] = 255;
                }else{
                    imageData.data[4*index+3] = 0;
                }
            }
        }
    }
    return imageData;
}

// 不同替换
function differentReplace(imageData,x,y,w,h,sourceColor,replaceColor){
    var x = x || 0,
        y = y || 0,
        w = x + w || imageData.width,
        h = y + h || imageData.height;
    if(x<0 || y<0 || w>imageData.width || h>imageData.height){
        throw new Error("error params!");
    }
    for(var j=y;j<h;j++){
        for(var i=x;i<w;i++){
            var index = j * imageData.width + i,
                r = imageData.data[4*index],
                g = imageData.data[4*index+1],
                b = imageData.data[4*index+2];
            if(r!=sourceColor.r && g!=sourceColor.g && b!=sourceColor.b){
                if(replaceColor){
                    imageData.data[4*index] = replaceColor.r;
                    imageData.data[4*index+1] = replaceColor.g;
                    imageData.data[4*index+2] = replaceColor.b;
                    imageData.data[4*index+3] = 255;
                }else{
                    imageData.data[4*index+3] = 0;
                }
            }
        }
    }
    return imageData;
}

// 整个替换，这里没有用到
function blockReplace(imageData,x,y,w,h,replaceColor){
    var x = x || 0,
        y = y || 0,
        w = x + w || imageData.width,
        h = y + h || imageData.height;
    if(x<0 || y<0 || w>imageData.width || h>imageData.height){
        throw new Error("error params!");
    }
    for(var j=y;j<h;j++){
        for(var i=x;i<w;i++){
            var index = j * imageData.width + i;
            if(replaceColor){
                imageData.data[4*index] = replaceColor.r;
                imageData.data[4*index+1] = replaceColor.g;
                imageData.data[4*index+2] = replaceColor.b;
                imageData.data[4*index+3] = 255;
            }
        }
    }
    return imageData;
}

标签：canvas,imageData,彩色,width,二维码,var,imgData,255
来源： https://www.cnblogs.com/pengdt/p/12368440.html