我目前正在使用 ionic 和 cordova 在移动设备(android 和 iPhone)上开发应用程序。我想编辑图片。我使用 fabric.js 库来做到这一点。 Fabric.js 将图像和其他项目转换为 Canvas 。然后我在 Canvas 上添加一些图像(贴纸)并将其导出为图像(dataURL)。所以 Canvas 的大小非常重要，因为它是一个质量因素(导出基于小 Canvas 的图像会导致质量不佳)。 Canvas 大小约为 607*1080 像素(取决于拍摄照片的设备)。我想在不损失质量的情况下将其放入屏幕(如下所述，我无法在不损失质量的情况下调整 Canvas 的大小)。

我尝试了 3 个想法，但没有一个可行。

1. 调整 Canvas 大小:导致质量下降(导出的图像将具有 Canvas 大小)
2. Adapt viewport:cordova 不允许更改移动设备上的视口(viewport)。有一个解决方法，但它会破坏我的设计(非常小的导航栏、较小的菜单……)
3. 使用 CSS3 缩放属性:它在桌面上的效果很好，但在移动设备上存在事件映射问题(我没有在 ios 上尝试，但问题发生在 android Webview 上)。事件映射未缩放。 Canvas 已缩小，但无法与 Canvas 元素进行交互。如果 Canvas 元素(贴纸)位于 x:100 y:100，当我将缩放属性设置为 0.5 时，该元素将位于 (50,50) 而不再位于 (100,100)。有什么方法可以根据 android webview 的缩放属性更正事件映射？

我不知道是否还有其他方法可以做到这一点，但我已经被这个问题困扰了 3 天，我在论坛、fabricjs 文档和谷歌上花了很多时间，但我没有找到任何方法工作解决方案或其他可以帮助我的东西。

编辑:下面有 2 个可行的解决方案。查看我的答案，了解如何使用 css 实现这一点。

最佳答案

1。使用 css 为 Canvas 设置正确的分辨率:

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = 800;
canvas.height = 600;

CSS:

/* media query 1 */
    #canvas{
       width: 400px;
       height: 250px; 
    }

/* media query 2 */
#canvas{
       width: 200px;
       height: 120px; 
    }

优点:

All the resolution is given by canvas width and height (800/600)

缺点:

Fit well for square canvases aspect ration (1:1), problems with output for weird aspect ratios where you need to compute your css height based,

original height / original width * new width = new height;

this is out of my league in css...

Read some time ago on fabric.js git issues section where, technique (css resize) isn't recommended due to slowness and incorrect objects transactions, this may be changed I know I tested and objects were incorrect re-sized (random colored pixels, transactions shadows remain in canvas , in other words a mess)

2。当你需要提交时，将你的 Canvas 重新调整到精确的尺寸(分辨率)，然后生成图像

只需在调整窗口大小时调整 Canvas 大小(响应式 Canvas )，当您需要导出到精确尺寸时，您需要将 Canvas 大小调整为精确像素分辨率，或者创建另一个隐藏 Canvas 。

此示例适用于 1:1 比率 Canvas (您需要将宽高比应用于 Canvas 和内部对象):

$(window).resize(function (){
 if (canvas.width != $(".container").width()) {
            var scaleMultiplier = $(".container").width() / canvas.width;
            var objects = canvas.getObjects();
            for (var i in objects) {
                objects[i].scaleX = objects[i].scaleX * scaleMultiplier;
                objects[i].scaleY = objects[i].scaleY * scaleMultiplier;
                objects[i].left = objects[i].left * scaleMultiplier;
                objects[i].top = objects[i].top * scaleMultiplier;
                objects[i].setCoords();
            }

            canvas.setWidth(canvas.getWidth() * scaleMultiplier);
            canvas.setHeight(canvas.getHeight() * scaleMultiplier);
            canvas.renderAll();
            canvas.calcOffset();
        }
});

在提交导出 Canvas 数据时将 Canvas 大小调整为所需的分辨率，瞧:

function GetCanvasAtResoution(newWidth)
  {
    if (canvas.width != newWidth) {
                var scaleMultiplier = newWidth / canvas.width;
                var objects = canvas.getObjects();
                for (var i in objects) {
                    objects[i].scaleX = objects[i].scaleX * scaleMultiplier;
                    objects[i].scaleY = objects[i].scaleY * scaleMultiplier;
                    objects[i].left = objects[i].left * scaleMultiplier;
                    objects[i].top = objects[i].top * scaleMultiplier;
                    objects[i].setCoords();
                }

                canvas.setWidth(canvas.getWidth() * scaleMultiplier);
                canvas.setHeight(canvas.getHeight() * scaleMultiplier);
                canvas.renderAll();
                canvas.calcOffset();
            }
     return canvas.toDataURL();
   }
   );

与 1:1 不同的口粮不是什么大问题，您还需要计算高度的比例多人游戏，易于理解的比例:http://andrew.hedges.name/experiments/aspect_ratio/

关于javascript - fabric.js 调整 Canvas 大小以适合屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30862356/