配合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=" 500px;height: 500px;" id="can">
<img src="" id="img" style=" 100%;">
</div>
var out = $('#output').qrcode("http://qq932.com?name=name&aaa=asdasdasd").find('canvas')[0]
// var base64 = out.toDataURL('image/jpeg');
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
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);
// 整个底色
rectReplace(imgData,0,0,w,h,{r:255,g:255,b:255},{r:70,g:124,b:200})
// 四个角
rectReplace(imgData,0,0,w*0.4,h*0.4,{r:255,g:255,b:255},{r:4,g:88,b:200})
rectReplace(imgData,w*0.6,0,w*0.4,h*0.4,{r:255,g:255,b:255},{r:250,g:120,b:20})
triangleReplace(imgData,0,h*0.6,w*0.4,h*0.4,{r:255,g:255,b:255},{r:120,g:120,b:210},3)
rectReplace(imgData,w*0.6,h*0.6,w*0.4,h*0.4,{r:255,g:255,b:255},{r:200,g:120,b:150})
triangleReplace(imgData,w*0.1,h*0.3,w*0.5,h*0.5,{r:255,g:255,b:255},{r:220,g:0,b:200},3)
triangleReplace(imgData,w*0.2,h*0.2,w*0.5,h*0.5,{r:255,g:255,b:255},{r:180,g:25,b:210},2)
triangleReplace(imgData,w*0.3,h*0.3,w*0.6,h*0.6,{r:255,g:255,b:255},{r:210,g:63,b:110},4)
ctx.putImageData(imgData, 0, 0);
var base64 = canvas.toDataURL('image/jpeg');
$('#img').attr("src",base64)
// 矩形像素替换
function rectReplace(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 triangleReplace(imageData,x,y,w,h,sourceColor,replaceColor,type=3){
if(w!=h){
console.log("宽高传参需要一样");
return;
}
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!");
}
if(type==3){
w = x+1;
}else if(type==4){
var t = 1;
}
for(var j=y;j<h;j++){
if(type==4){
x = w-t;
}
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;
}
}
}
if(type==1){
w--;
}else if(type==2){
x++;
}else if(type==3){
w++;
}else if(type==4){
t++;
}
}
return imageData;
}