Question

我正在制作一个可以在图片上应用滤镜的应用程序。我将画布设置为800 * 500，因此当我上传较大的图像时，图像将被裁剪。

在上载图像然后在将图像复制到画布上之前设置画布的尺寸时如何读取尺寸？

Answer 1

这可能有帮助

*uploading code*  
    var img = document.createElement("img");
    img.onload = ()=>{var height=this.height;
                      var width=this.width;  };

将这些值设置为画布尺寸

Answer 2

如您所说，您正在使用方法

function el(id) 
{ 
   return document.getElementById(id); // Get elem by ID 
} 

el("fileUpload").addEventListener("change", readImage, false);

您可以这样编辑它：

function el(id) 
{ 
       var element = document.getElementById(id); // Get elem by ID 
       element.height=this.height;
       element.width=this.width;
       return element;
} 
el("fileUpload").addEventListener("change", readImage, false);

在javascript this关键字中指的是全局对象

默认情况下，执行的执行上下文是全局的，这意味着如果代码是作为简单函数调用的一部分执行的，则“ this”指的是全局对象。

这意味着invokend / triggered方法的元素的值将存储在“ this”关键字中，而您要查找的属性是height和width ..：）

从jQuery 1.2.6开始，您还可以在这里使用jQuery，您可以使用CSS的核心功能之一，即height和width（或适当的externalHeight和outsideWidth）。

var height = $("#element").height();
var width = $("#element").width();

p.s我在您的代码readImage中看到的是您的事件处理程序，我看不到它在任何地方被调用。.

打开图片时如何读取图片的尺寸？

2 个答案: