You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
4.5 KiB
HTML
134 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>二维码图合成</title>
|
|
<style>
|
|
/* 美化样式 */
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f5f5f5;
|
|
margin: 0;
|
|
padding: 20px;
|
|
}
|
|
|
|
h1 {
|
|
color: #333;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="file"], input[type="text"], button {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
border: 1px solid #ccc;
|
|
box-sizing: border-box;
|
|
font-size: 16px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
button {
|
|
background-color: #007BFF;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #0056b3;
|
|
transition: background-color 0.3s ease-in-out;
|
|
}
|
|
input[type="file"]:focus,
|
|
input[type="text"]:focus {
|
|
outline: none;
|
|
border-color: #007BFF;
|
|
transition: border-color 0.3s ease-in-out;
|
|
}
|
|
button:active {
|
|
transform: scale(0.98);
|
|
transition: transform 0.1s ease-out;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>二维码图合成</h2>
|
|
<label for="origin">请选择图片:</label>
|
|
<input id="origin" type="file" accept="image/*">
|
|
<label for="qr_text">请输入二维码内容:</label>
|
|
<input id="qr_text" type="text">
|
|
<button onclick="onGendClick()">生成</button>
|
|
<script src="./qrcode.min.js"></script>
|
|
<script>
|
|
function test(origin_img,code_img){
|
|
let img = new Image();
|
|
img.src = URL.createObjectURL(origin_img);
|
|
img.onload = function(){
|
|
let img2 = new Image();
|
|
img2.src = code_img;
|
|
img2.onload = function(){
|
|
let canvas = document.createElement("canvas");
|
|
canvas.width = img.width;
|
|
canvas.height = img.height;
|
|
let ctx = canvas.getContext('2d');
|
|
ctx.drawImage(img, 0, 0);
|
|
let imageData = ctx.getImageData(0, 0, img.width, img.height);
|
|
let pixelData = imageData.data;
|
|
ctx.fillStyle = 'rgba(255,255,255,0)';
|
|
ctx.fillRect(0,0, img.width, img.height);
|
|
|
|
let x = img.width /2 - img2.width / 2;
|
|
let y = img.height / 2 - img2.height / 2;
|
|
|
|
x = x+img2.width>img.width?0:x;
|
|
y = y+img2.height>img.height?0:y;
|
|
|
|
ctx.drawImage(img2, x, y);
|
|
let pixelData2 = ctx.getImageData(0, 0, img.width, img.height).data;
|
|
ctx.clearRect(0,0, img.width, img.height);
|
|
|
|
for(let i = 0; i < pixelData2.length; i += 4){
|
|
if(!pixelData2[i]){
|
|
let alpha = 150;
|
|
pixelData[i] = parseInt((pixelData[i] - (255-alpha)) / alpha * 255);
|
|
pixelData[i+1] = parseInt((pixelData[i+1] - (255-alpha)) / alpha * 255);
|
|
pixelData[i+2] = parseInt((pixelData[i+2] - (255-alpha)) / alpha * 255);
|
|
pixelData[i+3] = alpha;
|
|
}
|
|
}
|
|
|
|
imageData.data.set(pixelData);
|
|
ctx.putImageData(imageData, 0, 0);
|
|
|
|
let dataUrl = canvas.toDataURL("image/png");
|
|
let a = document.createElement("a");
|
|
a.href = dataUrl;
|
|
a.download = "合成图.png";
|
|
a.click();
|
|
}
|
|
}
|
|
}
|
|
|
|
async function onGendClick(event) {
|
|
let origin_files = document.getElementById('origin').files;
|
|
let qr_text = document.getElementById('qr_text').value;
|
|
if(qr_text == ''){
|
|
alert('请输入二维码内容.');
|
|
return;
|
|
}
|
|
if (origin_files.length > 0) {
|
|
let url = await QRCode.toDataURL(qr_text, {height: 200,width: 200});
|
|
test(origin_files[0],url);
|
|
} else {
|
|
alert('请选择图片.');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |