Question

我创建了一些Web应用程序，这些应用程序更多地围绕着canvas应用程序，更具体地说，我创建了以下应用程序：

允许用户拖放元素并创建图像，然后保存它们。

现在可能会出现一些问题，例如画布的响应性：

过去我创建了自适应画布，并且画布的尺寸根据用户设备监视器尺寸而变化，用户可以在任何设备中使用该应用程序。
但这造成了一些设计网页界面的难度，以及在Facebook上分享图片时出现的问题，因为大家都知道在Facebook上分享链接（我创建的共享链接而不是图片的应用）图像如果它们不是由facebook指定的标准尺寸或比率，那么附加它将无法正确显示（图像被裁剪）。
由于在我的应用程序中创建的图像永远不会有固定的标准尺寸，因此令人满意的Facebook预览是不可能的。

我是否一直遵循开发应用程序的正确原则？

我一直希望画布具有固定的尺寸，但我必须给出客户想要的东西，对吧？

现在我必须创建另一个应用程序，通常拖放创建图像和东西。但是这种情况有点不同，现在人们将能够在画布中加载自己的图像并将其中的内容拖放到其中。所以这是我可能出现的问题：

首先，由于图像将由用户上传，因此尺寸将是未知的。
如果图片太小或太大或太矩形，上传的图片实际上将被视为画布的BG或者太正方，比较画布的当前尺寸我要做什么？
由于图像应该充当BG，我需要它来填充整个空间，如果它对于当前的画布尺寸来说太大，也不会裁剪它的任何部分。

HTML5 / JS大师们如何解决这个问题，我真的需要对这个问题有所了解!!

感谢任何帮助，谢谢。

Answer 1

您需要的一件事是能够接收任何尺寸的传入图像，并将该图像调整为当前视口（画布显示尺寸），同时保持纵横比，使图像不会出现扭曲。这是一个功能：

function scalePreserveAspectRatio(imgW,imgH,maxW,maxH){
    return(Math.min((maxW/imgW),(maxH/imgH)));
}

当您在屏幕大小的画布上绘制图像时，您使用context.drawImage的缩放版本，如下所示：

var iw=image.width;
var ih=image.height;
var cw=canvas.width;
var ch=canvas.height;

var scale=scalePreserveAspectRatio(iw,ih,cw,ch);

context.drawImage(image, 0,0,iw,ih, 0,0,iw*scale,ih*scale);

是的......

如果接收的图像与画布显示的比例不相同，则图像的某些部分将不适合画布显示。无论您如何调整图像大小，方形图像都不能完全适合矩形显示。

因此，您必须做出如何处理这种不成比例的设计决定。

在画布的左上角绘制缩放图像，使得所接收图像的溢出部分被剪裁。
将缩放后的图像置于画布中心，使图像在图像的外侧均匀剪裁。我们的想法是，图像中最有趣的部分可能位于图像的中心附近，图像中最不感兴趣的部分位于图像的两侧。
忘记比例缩放，只需垂直缩放图像。水平到完全适合画布显示尺寸。这将导致图像失真。但是图像的任何部分都不会被剪掉。如果失真不大，这可能是一个有用的选择。
缩放图像，使整个图像适合画布显示。这将导致画布显示的一部分为空白。这是电视在宽屏电视上显示较旧（方形）电视节目时经常做的事情。

祝你的项目好运！

创建画布应用程序的原则

1 个答案: