Skip to content

G
GaoQuYingJiH5-ASD
Commit 7719368e authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add 商户详情：二维码海报（高清）

parent 1e204885
Show whitespace changes
Inline Side-by-side
Showing with 239 additions and 113 deletions
image/code/erweimabg.png
View replaced file @ 1e204885 View file @ 7719368e
image/code/erweimabg.png

527 KB | W: | H:

image/code/erweimabg.png

280 KB | W: | H:

image/code/erweimabg.png
image/code/erweimabg.png
image/code/erweimabg.png
image/code/erweimabg.png
  • 2-up
  • Swipe
  • Onion skin
src/_shanghu_detail.css
View file @ 7719368e
......@@ -42,3 +42,8 @@
cursor: pointer;
margin-bottom: .4rem;
}
.hideEle {
/* visibility: hidden; */
display: none;
}
\ No newline at end of file
src/_shanghu_detail.html
View file @ 7719368e
......@@ -48,11 +48,16 @@
<div class="qr-card">
<!-- <canvas id="mainCanvas" width="3000" height="4000"></canvas> -->
<!-- 基础调试确认版 -->
<canvas id="mainCanvas" width="420" height="594"></canvas>
<!-- <canvas id="mainCanvas" width="420" height="594"></canvas> -->
<!-- 不晃动rev -->
<!-- <canvas id="mainCanvas" width="375" height="530"></canvas> -->
<canvas id="displayCanvas"></canvas> <!-- 页面预览用 -->
</div>
<button class="save-btn" onclick="saveCanvas()" v-if="canvasReady">保存二维码</button>
<!-- <button class="save-btn" onclick="saveCanvas()" v-if="canvasReady">保存二维码</button> -->
<button class="save-btn" onclick="saveImage()" :class="{'showEle': true}">保存二维码</button>
</div>
</body>
......
src/_shanghu_detail.js
View file @ 7719368e
var VUE = null
window.addEventListener('load', function () {
const canvas = document.getElementById('mainCanvas')
const ctx = canvas.getContext('2d')
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
ctx.fillStyle = '#1890ff'; // 或其他所需颜色
ctx.fillRect(0, 0, canvas.width, canvas.height);
// const canvas = document.getElementById('mainCanvas')
// const ctx = canvas.getContext('2d')
// ctx.imageSmoothingEnabled = true;
// ctx.imageSmoothingQuality = 'high';
// ctx.fillStyle = '#1890ff'; // 或其他所需颜色
// ctx.fillRect(0, 0, canvas.width, canvas.height);
// 配置参数
const CONFIG = {
bgSize: { width: 2480, height: 3502 }, // 背景图原始尺寸
qrSize: 1150, // 二维码尺寸
pageWidth: 375 // 页面显示宽度
};
// 初始化双Canvas
const displayCanvas = document.getElementById('displayCanvas');
const exportCanvas = document.createElement('canvas');
const displayCtx = displayCanvas.getContext('2d');
const exportCtx = exportCanvas.getContext('2d');
// 设置离屏Canvas（固定导出尺寸）
exportCanvas.width = CONFIG.bgSize.width;
exportCanvas.height = CONFIG.bgSize.height;
// 适配显示Canvas
function initDisplayCanvas() {
const dpr = window.devicePixelRatio || 1;
const displayHeight = (CONFIG.pageWidth / CONFIG.bgSize.width) * CONFIG.bgSize.height;
// 设置物理像素
displayCanvas.width = CONFIG.pageWidth * dpr;
displayCanvas.height = displayHeight * dpr;
// 调整CSS显示尺寸
displayCanvas.style.width = `${CONFIG.pageWidth}px`;
displayCanvas.style.height = `${displayHeight}px`;
// 缩放绘图上下文
displayCtx.scale(dpr, dpr);
displayCtx.imageSmoothingEnabled = true; // 抗锯齿
}
// 加载并绘制资源
async function drawPoster(bgUrl, qrUrl) {
const [bgImage, qrImage] = await Promise.all([
loadImage(bgUrl),
loadImage(qrUrl)
]);
if(!bgImage || !qrImage){
console.log('图片加载失败')
return
}
// 计算显示比例
const scale = CONFIG.pageWidth / CONFIG.bgSize.width;
// 绘制显示Canvas（适配页面宽度）
displayCtx.drawImage(bgImage, 0, 0, CONFIG.bgSize.width, CONFIG.bgSize.height,
0, 0, CONFIG.pageWidth, CONFIG.pageWidth * (CONFIG.bgSize.height/CONFIG.bgSize.width));
// 绘制二维码（居中显示）
const qrDisplaySize = CONFIG.qrSize * scale;
const qrX = (CONFIG.pageWidth - qrDisplaySize) / 2;
const qrY = displayCanvas.height/displayCtx.getTransform().a - qrDisplaySize - 50*scale -980*scale;
displayCtx.drawImage(qrImage, qrX, qrY, qrDisplaySize, qrDisplaySize);
// 绘制离屏Canvas（原始尺寸）
exportCtx.drawImage(bgImage, 0, 0);
const qrExportX = (CONFIG.bgSize.width - CONFIG.qrSize) / 2;
const qrExportY = CONFIG.bgSize.height - CONFIG.qrSize - 100 -980;
exportCtx.drawImage(qrImage, qrExportX, qrExportY, CONFIG.qrSize, CONFIG.qrSize);
// VUE.canvasReady = true
document.getElementById('saveBtn').classList.remove('hideEle')
}
// 图片加载器
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
});
}
// 导出图片
window.saveImage = function() {
// const link = document.createElement('a');
// link.download = 'poster.jpg';
// link.href = exportCanvas.toDataURL('image/jpeg', 0.9);
// link.click();
// const canvas = document.getElementById('mainCanvas')
const dataURL = exportCanvas.toDataURL('image/png', 0.9)
console.log(dataURL, '图片下载')
lightAppJssdk.media.savePhoto({
arg: dataURL,
success: function (data) {
// vant.Toast.clear()
// alert(JSON.stringify(data))
vant.Dialog.alert({
message: '保存成功',
})
},
fail: function (data) {
// vant.Toast.clear()
// alert('保存失败')
vant.Dialog.alert({
message: '保存失败',
})
},
})
}
// 初始化执行
initDisplayCanvas();
// const qrcodeUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQAAAABRBrPYAAADw0lEQVR42u2av2/TUBDHzxjViA6uOhUhESSQWLsioecMLGwI/oEiVQKJia2VAm6VoWtFF6Qi9V9JJrrlX/BQiYUh4ysNOe575xTFRIaN95A9OPbLx4ou73587xLivzmm1GEd1mEd1mH/BvMkh7we9DLmIWcjufUFDyt5TSPBCubKF9OSeZ7PyFM+kwemZcV4Kg7MUVrxiAbEY3kzw4kSOckDMWE+kc0SS5nJYYvG0zQ2jOdUmqvh6IkPRoWpv8E+XTd/G8vaKrcMFINt3uXDqnFakRwCxewY8wGJfWJpYkkgXZmiw8TUtyTMByTRgkN2DFc9xH8kGFyNCo16GiDtSsggCZDLOQ5M9mlGGvVi34AyLMm2zXq8ZGnImES9ljyp5OJvUj7E89Tf9CuIAhMjCa6GZIuTyw/EcIl6AcpIMBwLf5MdQ+6lQiJIsjDHgeEORbzOwpSwlo8ZNZNDuJioKKnfjPWRSRBhC4T+UhEPGmORTdDkqsRNShEqoO5dFJhHqdCT5iyfiKVyQtQ3UnS4GKSUepn4GzQ5L6TU+DfFFSyGyNCOQjMVokX9LRvlsWBSsG1dMq5cOUlclo+TpeQQMMamAaeDHoIHT9VathH1QWNo5IqFLvSWe7HWsDRcTNOVhnk2z4e2d2a9azR3wWI8sro35IW/YWCjV1TGgSHZIveKBEEltxZbbjH8SOPAMN6ovUw3y6G3GEnoqw/GgY1rIVhp8EgCHmgegywpI8Hm1pUy9JQ+kLLeNkImaAw9NZyONVAs7RI0+bKl4WKLiZmuqxCsJ02NQhkyVmg7jdYUbAZN7lWHzBspOljMogVOhxl+pRGks5rGMCFgzAbHqvwkXdnsFbJEon5JkweMwbcqM61usRnlHG13Y0oQLoZCV+8TQt9mNdfWx4BhtFRpXydGqg6xSm4TzCgwrp0OUW9FXPXtsNGfhozZDJ90bonxfYGRB6sm51gwtNjQsshUdWeUaY9UD/IjwNz1b1e/lLheLanB8DH0p4h10tD3tRgpY8JglSpYjXqd1fgVlgaK1b+wD0gFlE3MCvttKI0EI/tjw0znS5VmXAxh6+lTDFj3v5oOu/pUFhO3cWefe22YX1dsq1+ctX7o6Q5l7uXn/n1qw76v79DNtc2t/k4r5t98eHyxtrndf91qwnz9/cnEPb87+XrYir3dPzpyzzfo0WH7h76apG7jmB4m7V/Isy+527y3u9uKXZ7uP5i4F9vvLi7bv5C97cmT49u32j/06mTvx/mNj2fuafKHPeVzpKpvl52T/+/YTw8nrIRgQMwOAAAAAElFTkSuQmCC'
// drawPoster('../image/code/erweimabg.png', qrcodeUrl);
// 在原有Vue实例中添加
......@@ -17,40 +135,35 @@ window.addEventListener('load', function () {
canvasReady: false,
loadedImages: 0, // 记录已加载的图片数量
formData: {
id: 1,
unitName: '威海火炬高技术产业开发区沸腾小火锅店',
businessAddress: '268-7-D2-4',
smallPlaceTypeId: 2,
useNature: '餐饮店',
unifiedSocialCreditCode: '92371000MA3U6FCR02',
area: 51.61,
employeeCount: 2,
owner: '朱德艳',
merchantPhone: '13863159973',
id: '',
unitName: '',
businessAddress: '',
smallPlaceTypeId: 0,
useNature: '',
unifiedSocialCreditCode: '',
area: '',
employeeCount: 0,
owner: '',
merchantPhone: '',
qrCodeUrl: '',
community: '欧乐坊社区',
street: '田和街道',
gridMemberName: '于灏',
gridMemberPhone: '17865160657',
community: '',
street: '',
gridMemberName: '',
gridMemberPhone: '',
createBy: '',
createTime: null,
updateBy: '',
updateTime: '2025-04-02 01:30:33',
updateTime: '',
remark: '',
deptId: 209,
deptId: '',
merchantId: 0,
smallPlaceType: '',
smallPlaceTypeName: '小餐饮',
smallPlaceTypeName: '',
principal: '',
phone: '',
area: '',
businessHours: '',
type: '', // 新增类型字段
sjName1: '威海市宝威酒店有限公司',
sjName2: 'XXX',
sjName3: '0631-522221212',
sjName4: '威海市XXXXXXXXX',
sjName5: '小餐饮',
},
showTypePicker: false,
typeOptions: ['小餐饮', '酒店', '商场', '学校', '医疗机构'],
......@@ -58,7 +171,6 @@ window.addEventListener('load', function () {
},
computed: {},
mounted() {
this.detail()
},
methods: {
......@@ -100,7 +212,9 @@ window.addEventListener('load', function () {
const QR_IMAGE_URL = result.data.qrCodeUrl
// 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQAAAABRBrPYAAAD70lEQVR42u2az0sUYRjHn8na6SCtVFRSOIqGHQILoRQ3f3TqYNgf0EHo4NVuLsi8YynWJbYWlgKbOQR16xJ0sjSEfsDmBEUkBI4o7lFlg9ZY5ul9n/edSc2gS9C+7DAsw8xnZ+F5n+f7/HgX8G+OdahiVayKVbEqpgMWgjhYyaJ7ASsBw8DAQNw19cLEdWCD5RA8xgEzsM2AqUc6YeI+t4NRsugax0rAMRv4p4YYNwh/SryFZBZdMe7Y3AgGcmtYkTPoh9FNUwYyjiE69K3dY6GiMRIum0J467mrvlU0Fh8h3eefTGjXH3NW5WL0NCCboANWKE5+8OjmQa0XJhZaRHFkFqFaBlfs35JRpWNSkBlVFBTOSsQo+WqGgaguTCFZIa2+E5lo69JrgEXCJeoKvuJCqEu8rOKeEOymbxWMIRVRSNnWoUqDLuL8qxGGUpZVF8Btwg+D6kbQCwtFAiJlJt+O6g3yBNQKQ3JsCcilR6qmhGVMvTAqFEmjZL8jREzlX72wkBpYamMt6fB2dIJ2mMg7FMg2kIgpKwXbYqHyMSHRVFQYUfYhE8kZhVYYVYmqejTkNEbEskpPOmFqEGGKC3FSqy7dgKFemCRLstMR7Q/NnWSdrBUWgqwV1VRNpt14yKYbhijrYabGTXH7oxdGq2zIbGvKb/2aDGuGidqJzCKNQ5NSiyZsumEO+XnsAHYU16AXFs9e5PjFBjV+CU0M9cJUww6qVZctnnRy0AwjTWaygqKIRgrt0Nw+LNUBk9s31KEDVVDUGsBO4dIGU9usEOUmOYrRECOXlk9D2m91tg9LtcDUBpzMtnLFaad1Z4FR8Vi0UUU7j6p6ZNGkQies+heXKlbF/gX2tIh+0ShjCt9hT7Eb6h8GxrR72POx56u5EWOPBy1/iUFNCt9KbCownESdwCYKmxHm1LRtzs8yPw/J9wEUz7sjcBLLuSuWX+h6sQrJCNvTe2y+j83Wwn4YhGfNHGscms5dLeeXOy9swZ7vm+pf4sKQKkG6kG11Wc+qeSIHtfmN9r0JFv2o9+SUe2sp7ZiN1mT5TbYFDkAh6STqO/I/mhdfjljR20xITiynvQJYNevGXC1hn9ze+nn76JdEjN27c9mbLKYzLYfcPo4l3dH7q+Y3d4BjlnGuN35brt9rLxrZlrOpSwX82Oamx1auZRJ1x+dT/sKRGMsc7K09s8QyrR3D+VYs9jRcv7nyfSpnLfrDcx8SA57CblxkmZEmli10dPlDWOzuHoUmfJCbtfxXwezn+G2nV8udYT/LjhtJ30fYY9v2INwdb2hIFjZvr8TYjFiwNfDcIQ/XEGpITB+5M8gNu/Da9/5zt/wJ5zVLxjs6WyMAAAAASUVORK5CYII='
this.generateQRCode(QR_IMAGE_URL)
// this.generateQRCode(QR_IMAGE_URL)
// const qrcodeUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQAAAABRBrPYAAADw0lEQVR42u2av2/TUBDHzxjViA6uOhUhESSQWLsioecMLGwI/oEiVQKJia2VAm6VoWtFF6Qi9V9JJrrlX/BQiYUh4ysNOe575xTFRIaN95A9OPbLx4ou73587xLivzmm1GEd1mEd1mH/BvMkh7we9DLmIWcjufUFDyt5TSPBCubKF9OSeZ7PyFM+kwemZcV4Kg7MUVrxiAbEY3kzw4kSOckDMWE+kc0SS5nJYYvG0zQ2jOdUmqvh6IkPRoWpv8E+XTd/G8vaKrcMFINt3uXDqnFakRwCxewY8wGJfWJpYkkgXZmiw8TUtyTMByTRgkN2DFc9xH8kGFyNCo16GiDtSsggCZDLOQ5M9mlGGvVi34AyLMm2zXq8ZGnImES9ljyp5OJvUj7E89Tf9CuIAhMjCa6GZIuTyw/EcIl6AcpIMBwLf5MdQ+6lQiJIsjDHgeEORbzOwpSwlo8ZNZNDuJioKKnfjPWRSRBhC4T+UhEPGmORTdDkqsRNShEqoO5dFJhHqdCT5iyfiKVyQtQ3UnS4GKSUepn4GzQ5L6TU+DfFFSyGyNCOQjMVokX9LRvlsWBSsG1dMq5cOUlclo+TpeQQMMamAaeDHoIHT9VathH1QWNo5IqFLvSWe7HWsDRcTNOVhnk2z4e2d2a9azR3wWI8sro35IW/YWCjV1TGgSHZIveKBEEltxZbbjH8SOPAMN6ovUw3y6G3GEnoqw/GgY1rIVhp8EgCHmgegywpI8Hm1pUy9JQ+kLLeNkImaAw9NZyONVAs7RI0+bKl4WKLiZmuqxCsJ02NQhkyVmg7jdYUbAZN7lWHzBspOljMogVOhxl+pRGks5rGMCFgzAbHqvwkXdnsFbJEon5JkweMwbcqM61usRnlHG13Y0oQLoZCV+8TQt9mNdfWx4BhtFRpXydGqg6xSm4TzCgwrp0OUW9FXPXtsNGfhozZDJ90bonxfYGRB6sm51gwtNjQsshUdWeUaY9UD/IjwNz1b1e/lLheLanB8DH0p4h10tD3tRgpY8JglSpYjXqd1fgVlgaK1b+wD0gFlE3MCvttKI0EI/tjw0znS5VmXAxh6+lTDFj3v5oOu/pUFhO3cWefe22YX1dsq1+ctX7o6Q5l7uXn/n1qw76v79DNtc2t/k4r5t98eHyxtrndf91qwnz9/cnEPb87+XrYir3dPzpyzzfo0WH7h76apG7jmB4m7V/Isy+527y3u9uKXZ7uP5i4F9vvLi7bv5C97cmT49u32j/06mTvx/mNj2fuafKHPeVzpKpvl52T/+/YTw8nrIRgQMwOAAAAAElFTkSuQmCC'
drawPoster('../image/code/erweimabg.png', QR_IMAGE_URL);
}
})
......@@ -112,97 +226,99 @@ window.addEventListener('load', function () {
this.showTypePicker = false
},
generateQRCode(QR_IMAGE_URL) {
this.canvasReady = false
// 加载二维码图片
const img = new Image()
img.crossOrigin = 'Anonymous' // 处理跨域问题
img.src = '../image/code/erweimabg.png' // QR_IMAGE_URL;
// generateQRCode(QR_IMAGE_URL) {
// this.canvasReady = false
// // 加载二维码图片
// const img = new Image()
// img.crossOrigin = 'Anonymous' // 处理跨域问题
// img.src = '../image/code/erweimabg.png' // QR_IMAGE_URL;
const img4erweima = new Image()
img4erweima.crossOrigin = 'Anonymous' // 处理跨域问题
img4erweima.src = QR_IMAGE_URL // QR_IMAGE_URL;
// const img4erweima = new Image()
// img4erweima.crossOrigin = 'Anonymous' // 处理跨域问题
// img4erweima.src = QR_IMAGE_URL // QR_IMAGE_URL;
img.onload = () => {
this.loadedImages++
this.drawImages(img, img4erweima)
}
// img.onload = () => {
// this.loadedImages++
// this.drawImages(img, img4erweima)
// }
img4erweima.onload = () => {
this.loadedImages++
this.drawImages(img, img4erweima)
}
},
drawImages(img, img4erweima) {
if (this.loadedImages === 2) {
// 画布的宽度和高度
const canvasWidth = canvas.width
const canvasHeight = canvas.height
// img4erweima.onload = () => {
// this.loadedImages++
// this.drawImages(img, img4erweima)
// }
// },
// drawImages(img, img4erweima) {
// if (this.loadedImages === 2) {
// // 画布的宽度和高度
// const canvasWidth = canvas.width
// const canvasHeight = canvas.height
// 图片的原始宽度和高度
const imgWidth = img.width
const imgHeight = img.height
// // 图片的原始宽度和高度
// const imgWidth = img.width
// const imgHeight = img.height
// 计算宽度和高度的缩放比例
const scaleX = canvasWidth / imgWidth
const scaleY = canvasHeight / imgHeight
// // 计算宽度和高度的缩放比例
// const scaleX = canvasWidth / imgWidth
// const scaleY = canvasHeight / imgHeight
// 取较小的缩放比例作为最终的缩放比例
const scale = Math.min(scaleX, scaleY)
// // 取较小的缩放比例作为最终的缩放比例
// const scale = Math.min(scaleX, scaleY)
// 计算缩放后的图片宽度和高度
const scaledWidth = imgWidth * scale
const scaledHeight = imgHeight * scale
// // 计算缩放后的图片宽度和高度
// const scaledWidth = imgWidth * scale
// const scaledHeight = imgHeight * scale
// 计算图片在画布上的绘制位置，使其居中显示
const x = (canvasWidth - scaledWidth) / 2
const y = (canvasHeight - scaledHeight) / 2
// // 计算图片在画布上的绘制位置，使其居中显示
// const x = (canvasWidth - scaledWidth) / 2
// const y = (canvasHeight - scaledHeight) / 2
// 绘制图片到 canvas 上
ctx.drawImage(img, x, y, scaledWidth, scaledHeight)
// // 绘制图片到 canvas 上
// ctx.drawImage(img, x, y, scaledWidth, scaledHeight)
// 绘制前景图标
const fgIconSize = 180 // 假设前景图标显示的尺寸
const fgX = (canvasWidth - fgIconSize) / 2
const fgY = ((canvasHeight - fgIconSize) / 2 ) + 15
// // 绘制前景图标
// const fgIconSize = 180 // 假设前景图标显示的尺寸
// const fgX = (canvasWidth - fgIconSize) / 2
// const fgY = ((canvasHeight - fgIconSize) / 2 ) + 15
// 绘制二维码
ctx.drawImage(img4erweima, fgX, fgY, fgIconSize, fgIconSize)
// // 绘制二维码
// ctx.drawImage(img4erweima, fgX, fgY, fgIconSize, fgIconSize)
this.canvasReady = true
}
},
// this.canvasReady = true
// }
// },
},
})
})
function saveCanvas() {
if (!VUE.canvasReady) return
vant.Toast.loading({
message: '图片保存中...',
forbidClick: true,
loadingType: 'spinner',
});
// function saveCanvas() {
// if (!VUE.canvasReady) return
// vant.Toast.loading({
// message: '图片保存中...',
// forbidClick: true,
// loadingType: 'spinner',
// });
// const canvas = document.getElementById('mainCanvas')
// const dataURL = canvas.toDataURL('image/png')
// console.log(dataURL, '图片下载')
// lightAppJssdk.media.savePhoto({
// arg: dataURL,
// success: function (data) {
// // vant.Toast.clear()
// // alert(JSON.stringify(data))
// vant.Dialog.alert({
// message: '保存成功',
// })
// },
// fail: function (data) {
// // vant.Toast.clear()
// // alert('保存失败')
// vant.Dialog.alert({
// message: '保存失败',
// })
// },
// })
// }
const canvas = document.getElementById('mainCanvas')
const dataURL = canvas.toDataURL('image/png')
console.log(dataURL, '图片下载')
lightAppJssdk.media.savePhoto({
arg: dataURL,
success: function (data) {
// vant.Toast.clear()
// alert(JSON.stringify(data))
vant.Dialog.alert({
message: '保存成功',
})
},
fail: function (data) {
// vant.Toast.clear()
// alert('保存失败')
vant.Dialog.alert({
message: '保存失败',
})
},
})
}
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