Question

我最近制作并主持了Catifier.com。

它工作得很好，除了我有一个保存我必须解决的错误，当你将它们设置为背景时它会拉伸图像。

肖像图片看起来很糟糕。

是否可以检测用户在框中粘贴的图像的宽度和高度，然后相应地调整画布大小？

Answer 1

您必须在DOM元素中加载图片以了解其大小。

基本上，当你想要这样做时，步骤如下：

在不可见的DOM元素中添加图片。
当启动onload事件时，您将能够获得图片宽度和高度。
然后根据这两个变量创建画布。

所有这些都可以在很少的javascript行中完成。

Answer 2

要写一个非常通用且可能不完全正常的方法来快速做到这一点只是为了给出更多的想法。

var img = document.getElementByTagName('img');
for (var i = 0; i < img.length; i++) {
  var width = img[i].width,
      height = img[i].height;

  // do some stuff with the img[i] width and height here if you like. for each image on the page... 
}

不是你最终如何实际做到这一点，但它就像做，img.width或高度一样简单。如果这有助于更多。

HTML5 - 检测图像大小，调整画布大小

2 个答案: