javascript - 创建 Canvas 应用程序的原理

Closed. This question needs to be more focused。它当前不接受答案。
                        
                    
                
            
        
            
        
                
                    
                
            
                
                    想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                
                    5年前关闭。
            
        

    

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


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


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


过去，我创建了响应式画布，并且画布的尺寸根据用户设备监视器的尺寸而变化，并且用户可以在其任何设备中使用该应用程序。
但这在设计Web界面时造成了一些困难，并在Facebook中共享图像时出现了问题，众所周知，当在Facebook中共享链接（我创建共享链接的应用程序而不是图像）时，附加有图像的图像将无法正确显示（图像被裁剪）（如果它们不是Facebook指定的标准尺寸或比例）。
而且，由于在我的应用程序中创建的图像永远不会具有固定的标准尺寸，因此令人满意的Facebook预览毫无疑问。


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

我一直希望画布具有固定的尺寸，但是我一定要提供客户想要的东西，对吗？

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


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


HTML5 / JS Gurus如何解决这个问题，我真的需要对此有一些了解！

任何帮助表示赞赏，谢谢。

最佳答案

您需要做的一件事是能够接收任何尺寸的传入图像，并在保持纵横比的同时将该图像调整为当前视口的大小（画布显示尺寸），以使图像不会失真。这是执行此操作的功能：

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

是的...

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

因此，您必须随后就如何处理这种不均衡做出设计决策。


在画布的左上角绘制缩放后的图像，使接收到的图像的溢出部分被剪切。
将缩放后的图像居中于画布上，这样可以将图像均匀地裁剪在图像的外侧。这个想法是，图像中最有趣的部分可能在图像的中心附近，而图像中最不有趣的部分是在图像的侧面。
无需按比例缩放，只需垂直和水平缩放图像即可完全适合画布显示尺寸。这将导致图像失真。但是图像的任何部分都不会被剪切掉。如果失真不大，这可能是一个有用的选项。
缩放图像，以使整个图像适合画布显示。这将导致画布显示的一部分为空白。当在宽屏电视上显示较旧的（平方）电视节目时，电视通常会这样做。


祝您项目顺利！