perf: 客户端裁剪直接缩放到 512×512 再上传,进一步节省带宽
- cropOnClient 输出尺寸从 min(size, 2048) 改为固定 512px - 服务端收到的已是 512×512,解码后 resize 和 WebP 编码近乎瞬时 - 上传体积从数十 KB~数 MB 降至 ~30-60KB
This commit is contained in:
@ -537,14 +537,14 @@
|
|||||||
if (e.target === cropOverlay) closeCrop();
|
if (e.target === cropOverlay) closeCrop();
|
||||||
});
|
});
|
||||||
|
|
||||||
// 客户端裁剪 + 压缩:用 Canvas 裁出选区,转 JPEG 后上传,大幅节省带宽
|
// 客户端裁剪 + 压缩:Canvas 裁出选区并一步到位缩放到 512px,上传体积最小
|
||||||
function cropOnClient(file, x, y, size) {
|
function cropOnClient(file, x, y, size) {
|
||||||
return new Promise(function (resolve) {
|
return new Promise(function (resolve) {
|
||||||
var url = URL.createObjectURL(file);
|
var url = URL.createObjectURL(file);
|
||||||
var img = new Image();
|
var img = new Image();
|
||||||
img.onload = function () {
|
img.onload = function () {
|
||||||
URL.revokeObjectURL(url);
|
URL.revokeObjectURL(url);
|
||||||
var out = Math.min(size, 2048); // 不超过 2048px,避免 Canvas 内存过大
|
var out = 512; // 直接缩放到服务端目标输出尺寸
|
||||||
var canvas = document.createElement('canvas');
|
var canvas = document.createElement('canvas');
|
||||||
canvas.width = out;
|
canvas.width = out;
|
||||||
canvas.height = out;
|
canvas.height = out;
|
||||||
|
|||||||
Reference in New Issue
Block a user