leaferjs/leafer-ui

是否支持在导出的时候再次设置整体图片的宽高?

Closed this issue · 8 comments

假设有以下场景,我需要在导出的时候再调整图片的具体大小,如发布浏览器插件时的图标,有不同的尺寸,当然,我可以在导出后再调整图片大小,但是担心会有锯齿或者模糊😂,想问一下内部是否能够做到整体设置宽高呢?

我目前是用canvas.drawImage来重新调整图片宽高的😅,但确实会有锯齿或者模糊,不然可能得放到后端,用第三方库处理了,如Lanczos.js、Bicubic.js和Pica,不过没尝试过,或者有什么更好的处理方式,求大佬支招😄

          let base64Data = await this.logoRect.export('png')
          let img = new Image();
          img.src = base64Data.data;
          img.onload = () => {
            let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d');
            let newWidth = this.logoSize // 新宽度
            let newHeight = this.logoSize; // 新高度
            canvas.width = newWidth;
            canvas.height = newHeight;
            // 缩放并绘制到canvas上
            ctx.drawImage(img, 0, 0, newWidth, newHeight);
            let newDataUrl = canvas.toDataURL('image/png',1);
            // 创建下载链接并设置属性
            const a = document.createElement('a');
            a.href = newDataUrl;
            a.download = `${this.logoName}.png`;
            a.click();
            a.remove();
          };

image

导出时设置scale需要配合别的参数一起使用吗?我的感觉有点奇怪😂,这个是否是因为我导出的是子元素,是放在Frame内的一个Box,层级App->tree(Leafer)->Frame->Box->Image,Frame超出隐藏,Box(512x512)为渐变色背景,Image为图标,而我选择Box来导出,试图通过scale来调整大小,下图的1024比上面的看起来要清晰,但只有四分之一。

this.logoBox.export('scale2.png', { scale: 2 })

image

scale的问题之前已经解决了,需要升级到rc.19版本

指定宽高的需求我先记录一下,后面再加上哈~,目前你先自己算一下scale就可以

scale的问题之前已经解决了,需要升级到rc.19版本

上次更新已经更新到rc.19了,是不是我的包没装全?导出Frame层是没问题的,导出Box层才会这样。
image

leafer-x-ruler也升级到1.0.7再看看,我这边指定scale导出box也没问题

leafer-x-ruler也升级到1.0.7再看看,我这边指定scale导出box也没问题

我知道原因了,我是想让固有宽高的Frame于tree居中,从而设置了x和y,把它设置回默认的0,0就没问题了

image

scale的问题已修复,现在设置Frame的x, y也没事~, 等待发版

宽高的需求记录了,等下个版本再添加