Question

我目前正在使用离子和cordova在移动设备（Android和iPhone）上开发应用程序。我想编辑一张图片。我使用fabric.js库来做到这一点。 Fabric.js将图像和其他项目转换为画布。然后我在画布上添加一些图像（贴纸）并将其导出为图像（dataURL）。因此画布的大小非常重要，因为它是一个品质因素（基于小画布导出图像会导致质量差）。画布大小约为607 * 1080像素（取决于拍摄照片的设备）。我想在不丢失质量的情况下将其安装在屏幕上（如下所述，我无法在不降低质量的情况下调整画布大小）。

我尝试了3个想法，但没有人有效。

调整画布大小：导致质量丢失（导出的图片将具有画布大小）
调整视口：cordova不允许更改移动设备上的视口。有一种解决方法，但它会破坏我的设计（非常小的导航栏，更小的菜单，......）
使用CSS3缩放属性：它就像桌面上的魅力一样，但在移动设备上有一个事件映射问题（我没有尝试使用ios，但问题发生在Android Webview上）。事件映射未缩放。画布已缩小，但无法与画布元素进行交互。如果画布元素（标签）位于x：100 y：100，当我将zoom属性设置为0.5时，元素将位于（50,50）并且不再位于（100,100）。有没有办法根据android webview的缩放属性来纠正事件映射？

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

编辑：下面有2个工作解决方案。检查我的答案，看看如何用css做到这一点。

Answer 1

1。使用css为画布设置正确的分辨率：

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; 
    }

专业人士：

所有分辨率均由画布宽度和高度（800/600）
给出

缺点：

适合方形画布宽高比（1：1），输出问题对于需要计算css高度的奇怪宽高比基于，
original height / original width * new width = new height;
这是我在CSS中的联盟......

前一段时间阅读fabric.js git问题部分，技术   由于速度慢和对象不正确，不建议使用（css resize）   交易，这可能会改变我知道我测试和对象   重新调整大小不正确（随机彩色像素，交易阴影仍然存在   在画布上，换句话说是一团糟）

2。需要提交时，将画布重新调整为精确尺寸（分辨率），然后生成图像

只需在窗口重新调整尺寸（响应画布）时调整画布大小，当需要导出到精确尺寸时，您需要将画布调整为精确的像素分辨率，或者创建另一个隐藏的画布。

此示例适用于1：1定量画布（您需要将宽高比应用于画布和内部对象）：

$(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();
        }
});

在提交导出画布数据时，将画布重新调整大小到所需的分辨率，瞧：

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/

Answer 2

我找到了一个技巧，无需复制画布。此解决方案非常接近css zoom属性，但事件处理正确。

这是一个显示画布大小一半的示例：

-webkit-transform : scale(0.5);
-webkit-transform-origin : 0 0;

fabric.js调整画布大小以适应屏幕

2 个答案:

1。使用css为画布设置正确的分辨率：

2。需要提交时，将画布重新调整为精确尺寸（分辨率），然后生成图像