fix(web): design1/2 缩略图与 design2 设为背景交互修复
- design1:预览/最近文件缩略图按 background 边界截取,去掉多余白盘 - design2:设为背景贴齐 1012x648 卡框,保存/打开保留用户背景 src - design2:列表可选中锁定对象并加载完整属性,缩略图叠加 front_bg 模板 - design2:固定卡框锚点,避免选中背景时标尺/蒙版随属性面板漂移 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -52,6 +52,62 @@ async function saveImageAsPNG(buffer) {
|
||||
}
|
||||
}
|
||||
|
||||
/** 从画布像素截取光盘外接方(含 after:render 圆外暗蒙版),与编辑器所见一致 */
|
||||
function soonDesign1CaptureCanvasRect(canvas, outW, outH, format, quality) {
|
||||
var bg = window.background_image1 || window.background_image;
|
||||
if (!canvas || !bg) return '';
|
||||
var srcEl = canvas.lowerCanvasEl;
|
||||
if (!srcEl || !srcEl.getContext) return '';
|
||||
var sx = bg.scaleX == null ? 1 : bg.scaleX;
|
||||
var sy = bg.scaleY == null ? 1 : bg.scaleY;
|
||||
var sw = bg.width * sx;
|
||||
var sh = bg.height * sy;
|
||||
var retina = (typeof canvas.getRetinaScaling === 'function') ? canvas.getRetinaScaling() : 1;
|
||||
outW = outW || Math.round(sw);
|
||||
outH = outH || Math.round(sh);
|
||||
var tmp = document.createElement('canvas');
|
||||
tmp.width = outW;
|
||||
tmp.height = outH;
|
||||
var tctx = tmp.getContext('2d');
|
||||
tctx.drawImage(
|
||||
srcEl,
|
||||
bg.left * retina, bg.top * retina, sw * retina, sh * retina,
|
||||
0, 0, outW, outH
|
||||
);
|
||||
if (format === 'jpeg') return tmp.toDataURL('image/jpeg', quality == null ? 0.75 : quality);
|
||||
return tmp.toDataURL('image/png');
|
||||
}
|
||||
|
||||
function soonBuildDesign1SavePreviewPic(canvas) {
|
||||
var THUMB_MAX = 102400;
|
||||
var c1 = window.canvas1;
|
||||
if (!canvas || (c1 && canvas !== c1)) return '';
|
||||
var hidden = [];
|
||||
canvas.getObjects().forEach(function (obj) {
|
||||
if (obj.isGuideLine) {
|
||||
hidden.push(obj);
|
||||
obj.visible = false;
|
||||
}
|
||||
});
|
||||
if (canvas.discardActiveObject) canvas.discardActiveObject();
|
||||
canvas.renderAll();
|
||||
|
||||
var url = '';
|
||||
var sizes = [320, 280, 240, 200];
|
||||
var quals = [0.82, 0.68, 0.52, 0.38];
|
||||
for (var i = 0; i < sizes.length; i++) {
|
||||
url = soonDesign1CaptureCanvasRect(canvas, sizes[i], sizes[i], 'jpeg', quals[i]);
|
||||
if (url && url.indexOf('data:image/') === 0 && url.length <= THUMB_MAX) break;
|
||||
url = '';
|
||||
}
|
||||
|
||||
hidden.forEach(function (obj) { obj.visible = true; });
|
||||
canvas.renderAll();
|
||||
if (canvas.requestRenderAll) canvas.requestRenderAll();
|
||||
return url;
|
||||
}
|
||||
window.soonBuildDesign1SavePreviewPic = soonBuildDesign1SavePreviewPic;
|
||||
|
||||
window.display_func = function display_func(img1, img2, img3) {
|
||||
$("#base_control").hide();
|
||||
$("#line_control").hide();
|
||||
@@ -217,13 +273,18 @@ window.display_func = function display_func(img1, img2, img3) {
|
||||
left: all_left
|
||||
});
|
||||
|
||||
g3.push(img1);
|
||||
let url3 = new fabric.Group(g3).toDataURL({
|
||||
height: 2787,
|
||||
width: 2787,
|
||||
top: all_top,
|
||||
left: all_left
|
||||
var hiddenForPreview = [];
|
||||
canvas1.getObjects().forEach(function (o) {
|
||||
if (o.isGuideLine) {
|
||||
hiddenForPreview.push(o);
|
||||
o.visible = false;
|
||||
}
|
||||
});
|
||||
canvas1.discardActiveObject();
|
||||
canvas1.renderAll();
|
||||
let url3 = soonDesign1CaptureCanvasRect(canvas1, 2787, 2787, 'png');
|
||||
hiddenForPreview.forEach(function (o) { o.visible = true; });
|
||||
canvas1.renderAll();
|
||||
let url5 = new fabric.Group(g5).toDataURL({
|
||||
height: 2787,
|
||||
width: 2787,
|
||||
|
||||
Reference in New Issue
Block a user