Skip to content

G
GaoQuYingJiH5-ASD
Commit 09c52f14 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

feature: 二维码

parent 035c48b8
Hide whitespace changes
Inline Side-by-side
Showing with 208 additions and 0 deletions
src/_codescan-canvas.html 0 → 100644
View file @ 09c52f14
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>安全码查询</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
<style>.container {
min-height: 100vh;
background: #f5f5f5;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.qr-card {
/* background: #1890ff; */
/* padding: 20px;
border-radius: 12px; */
/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
margin-bottom: 10px;
}
.qr-inner {
background: white;
padding: 20px;
border-radius: 8px;
text-align: center;
}
.title {
color: #fff;
font-size: 24px;
margin-bottom: 15px;
font-weight: 500;
text-align: center;
}
#qrcode {
width: 200px;
height: 200px;
margin: 0 auto;
}
.company-name {
color: #000;
font-size: 14px;
margin: 15px 0 0;
min-height: 20px;
}
.scan-tip {
color: #333;
font-size: 14px;
text-align: center;
margin-bottom: 20px;
}
.save-btn {
background: #1890ff;
color: white;
border: none;
padding: 12px 30px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(24, 144, 255, 0.2);
}
</style>
</head>
<body>
<div class="container">
<div class="qr-card">
<canvas id="mainCanvas" width="300" height="400"></canvas>
</div>
<button class="save-btn" onclick="saveCanvas()">保存二维码</button>
</div>
<script>
// 通用图片加载方法
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = "Anonymous";
img.src = '../image/code/erweima.png';
img.onload = () => resolve(img);
img.onerror = reject;
});
}
const BG_IMAGE_URL = 'https://b0.bdstatic.com/b3b0c8ffbe97c6e30f0af89ec66d401f.jpg';
const QR_IMAGE_URL = 'http://pic.616pic.com/ys_img/00/10/41/bL9gkesSxm.jpg';
let canvasReady = false;
async function initCanvas() {
const canvas = document.getElementById('mainCanvas');
const ctx = canvas.getContext('2d');
// 加载背景图
// const bgImage = await loadImage(BG_IMAGE_URL);
// 绘制背景图（平铺整个canvas）
// ctx.drawImage(bgImage, 0, 0, canvas.width, canvas.height);
// // 绘制蓝色背景
// ctx.fillStyle = '#1890ff';
// ctx.fillRect(0, 0, 300, 400);
// // 绘制白色底框
// ctx.fillStyle = 'white';
// ctx.fillRect(20, 90, 260, 260);
// 加载二维码图片
const img = new Image();
img.crossOrigin = "Anonymous"; // 处理跨域问题
img.src = '../image/code/erweima.png'; // QR_IMAGE_URL;
const img4erweima = new Image();
img4erweima.crossOrigin = "Anonymous"; // 处理跨域问题
img4erweima.src = QR_IMAGE_URL; // QR_IMAGE_URL;
await new Promise((resolve, reject) => {
img.onload = function () {
// 画布的宽度和高度
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
// 图片的原始宽度和高度
const imgWidth = img.width;
const imgHeight = img.height;
// 计算宽度和高度的缩放比例
const scaleX = canvasWidth / imgWidth;
const scaleY = canvasHeight / imgHeight;
// 取较小的缩放比例作为最终的缩放比例
const scale = Math.min(scaleX, scaleY);
// 计算缩放后的图片宽度和高度
const scaledWidth = imgWidth * scale;
const scaledHeight = imgHeight * scale;
// 计算图片在画布上的绘制位置，使其居中显示
const x = (canvasWidth - scaledWidth) / 2;
const y = (canvasHeight - scaledHeight) / 2;
// 绘制图片到 canvas 上
ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
setTimeout(()=>{
// img4erweima.onload = () => {
// 绘制二维码
// ctx.drawImage(img4erweima, 0, 0, 854, 1127);
// 绘制前景图标
const fgIconSize = 150; // 假设前景图标显示的尺寸
const fgX = (canvasWidth - fgIconSize) / 2;
const fgY = (canvasHeight - fgIconSize) / 2;
// 绘制二维码
ctx.drawImage(img4erweima, fgX, fgY, fgIconSize, fgIconSize);
// };
// img4erweima.onerror = reject;
}, 3000)
canvasReady = true;
resolve();
};
img.onerror = reject;
});
}
function saveCanvas() {
if (!canvasReady) return;
const canvas = document.getElementById('mainCanvas');
const dataURL = canvas.toDataURL('image/png');
console.log(dataURL, '图片下载')
// // 调用爱山东SDK（示例）
// window.aishandongSDK?.saveImage(dataURL);
// // 备用下载方式
// const link = document.createElement('a');
// link.download = 'aishandong_qrcode.png';
// link.href = dataURL;
// link.click();
lightAppJssdk.media.savePhoto({
arg: dataURL,
success: function(data) {
alert(JSON.stringify(data));
},
fail: function(data) {
alert(data);
}
});
}
// 初始化
window.addEventListener('DOMContentLoaded', initCanvas);
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment