fix(wechat): 修复 canvas 尺寸设置失败及上下文获取时机问题
This commit is contained in:
15
js/script.js
15
js/script.js
@@ -2068,7 +2068,6 @@
|
|||||||
// 生成画布(高清无损,保持与显示容器相同的宽高比)
|
// 生成画布(高清无损,保持与显示容器相同的宽高比)
|
||||||
async function generateCanvas() {
|
async function generateCanvas() {
|
||||||
const canvas = exportCanvas;
|
const canvas = exportCanvas;
|
||||||
const ctx = canvas.getContext('2d');
|
|
||||||
const container = imageContainer;
|
const container = imageContainer;
|
||||||
|
|
||||||
// 获取显示容器的实际尺寸和宽高比
|
// 获取显示容器的实际尺寸和宽高比
|
||||||
@@ -2085,6 +2084,7 @@
|
|||||||
let TARGET_HEIGHT = Math.round(displayHeight * minScale);
|
let TARGET_HEIGHT = Math.round(displayHeight * minScale);
|
||||||
|
|
||||||
// 微信特殊处理:微信内置浏览器 canvas 限制更严格
|
// 微信特殊处理:微信内置浏览器 canvas 限制更严格
|
||||||
|
// 实测微信中 canvas 最大尺寸约为 4096,但超过 2048 可能有问题
|
||||||
const MAX_CANVAS_SIZE = isWechat() ? 2048 : 4096;
|
const MAX_CANVAS_SIZE = isWechat() ? 2048 : 4096;
|
||||||
|
|
||||||
// 如果超出限制,按宽高比等比例缩放
|
// 如果超出限制,按宽高比等比例缩放
|
||||||
@@ -2126,8 +2126,19 @@
|
|||||||
// 设置画布为高清分辨率
|
// 设置画布为高清分辨率
|
||||||
canvas.width = TARGET_WIDTH;
|
canvas.width = TARGET_WIDTH;
|
||||||
canvas.height = TARGET_HEIGHT;
|
canvas.height = TARGET_HEIGHT;
|
||||||
|
|
||||||
|
// 微信中:验证 canvas 尺寸是否设置成功
|
||||||
|
if (isWechat() && (canvas.width !== TARGET_WIDTH || canvas.height !== TARGET_HEIGHT)) {
|
||||||
|
console.warn('Canvas 尺寸设置失败,使用实际尺寸:', canvas.width, 'x', canvas.height);
|
||||||
|
TARGET_WIDTH = canvas.width;
|
||||||
|
TARGET_HEIGHT = canvas.height;
|
||||||
|
}
|
||||||
|
|
||||||
console.log('实际画布尺寸:', canvas.width, 'x', canvas.height);
|
console.log('实际画布尺寸:', canvas.width, 'x', canvas.height);
|
||||||
|
|
||||||
|
// 获取 2d 上下文(必须在设置尺寸之后)
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
// 启用最高质量渲染
|
// 启用最高质量渲染
|
||||||
ctx.imageSmoothingEnabled = true;
|
ctx.imageSmoothingEnabled = true;
|
||||||
ctx.imageSmoothingQuality = 'high';
|
ctx.imageSmoothingQuality = 'high';
|
||||||
@@ -2139,7 +2150,7 @@
|
|||||||
// 计算从显示尺寸到目标分辨率的缩放比例
|
// 计算从显示尺寸到目标分辨率的缩放比例
|
||||||
// 使用统一的缩放比例,保持宽高比,确保所见即所得
|
// 使用统一的缩放比例,保持宽高比,确保所见即所得
|
||||||
const scale = TARGET_WIDTH / displayWidth;
|
const scale = TARGET_WIDTH / displayWidth;
|
||||||
console.log('统一缩放比例:', scale);
|
console.log('统一缩放比例:', scale, '画布宽高比:', TARGET_WIDTH/TARGET_HEIGHT, '容器宽高比:', displayRatio);
|
||||||
|
|
||||||
if (currentImage) {
|
if (currentImage) {
|
||||||
console.log('背景图原始尺寸:', currentImage.naturalWidth, 'x', currentImage.naturalHeight);
|
console.log('背景图原始尺寸:', currentImage.naturalWidth, 'x', currentImage.naturalHeight);
|
||||||
|
|||||||
Reference in New Issue
Block a user