分类导航

程序问答发布时间：2022-06-01 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了我可以使用 Javascript 将我的 SVG 中所有图像标签的文件大小作为其宽度和高度的一个因素吗？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决我可以使用 Javascript 将我的 SVG 中所有图像标签的文件大小作为其宽度和高度的一个因素吗？？

开发过程中遇到我可以使用 Javascript 将我的 SVG 中所有图像标签的文件大小作为其宽度和高度的一个因素吗？的问题如何解决？下面主要结合日常开发的经验，给出你关于我可以使用 Javascript 将我的 SVG 中所有图像标签的文件大小作为其宽度和高度的一个因素吗？的解决方法建议，希望对你解决我可以使用 Javascript 将我的 SVG 中所有图像标签的文件大小作为其宽度和高度的一个因素吗？有所启发或帮助；

我正在将大型 SVG 照片导入我的图像编辑器。一些 SVG 图像包含 <image> 标签，这些标签又包含大的 PNG 字符串。我的一些文件超过 25MB，因此编辑速度非常慢。

我尝试在图像编辑器中手动缩放/缩小对象，突然编辑速度很快，然后我可以将它们缩放回原始大小，似乎仍然保持最新的编辑并且不会损失任何质量（这种感觉就像黑魔法一样，有人可以解释一下这是如何工作的吗？）

所以这让我想到是否可以让系统在加载时缩小所有图像，但就在显示新图像之前（无论如何，它们中的大多数都是 4500 x 3000 像素，因此将它们缩小 4 倍不会不影响其显示），当用户点击保存时，我们会自动将所有内容重新缩放到其原始大小，希望不损失质量，这甚至有效吗？

我尝试了各种疯狂来完成这项工作，但似乎没有任何效果。这是我最近的尝试。这段代码是我试图减少像素大小，从而减少所有对象的文件大小。

      new Promise(resolve => fabric.loadSVGFromURL(imageUrl,(objects,options) => {
        const group = new fabric.Group(objects)
        objects.forEach(obj => {
            console.log(obj.height)
            var scaleX = obj.scaleX;
            var scaleY = obj.scaleY;
            // Scale to 10% of its original size
            var tempScaleX = scaleX * 0.1;
            var tempScaleY = scaleY * 0.1;
            obj.scaleX = tempScaleX;
            obj.scaleY = tempScaleY;
            obj.height = obj.height * 0.1
            obj.wIDth = obj.wIDth * 0.1
            console.log(obj.height)
        })
        group.height = group.height * 0.1
        group.wIDth = group.wIDth * 0.1
        resolve(getRatio(group,canvas))
      }))
      .then(({ ratio,wIDth,height }) => {
        fabric.loadSVGFromURL(imageUrl,options) => {
          try {
            objects.forEach(obj => {
              obj.set({
                left: (obj.left * ratio) + ((canvas.wIDth / 2) - ((wIDth * ratio) / 2)),top: (obj.top * ratio) + ((canvas.height / 2) - ((height * ratio) / 2)),})
              obj.scale(ratio)
              canvas.add(obj)
            })
            canvas.renderAll()
            onCanvasModifIEd(canvas)
          } catch(err) {
            console.log('Could not retrIEve that image');
          }
        })
      })