实施例

Question

我正在使用html5画布开发一个图像过滤系统，但是，正如我在开始时，我已经出现了一些疑惑和错误。

这是我迄今为止开发的内容：

$(document).ready(function() {
    $("#uploadImagem").change(function(e) {
        var _URL = window.URL || window.webkitURL,
        arquivo = e.target.files[0],
        tipoImagem = /image.*/,
        reader,
        imagem;

        if(!arquivo.type.match(tipoImagem)) {
            alert("Somente imagens são aceitas!");
            return;
        }

        imagem = new Image();

        imagem.onload = function() {
            if(this.width > 600 || this.height > 400) {
                alert("Somente imagens com largura máxima de 600px e altura máxima de 400px");
                return;
            } else {
                $("#filtrarImagem").width(this.width).height(this.height);
            }
        };

        imagem.src = _URL.createObjectURL(arquivo);

        reader = new FileReader();
        reader.onload = fileOnload;
        reader.readAsDataURL(arquivo);
    });

    function fileOnload(e) {
        var $img = $("<img>", {src: e.target.result}),
        canvas = $("#filtrarImagem")[0],
        context = canvas.getContext("2d");

        $img.load(function() {
            context.drawImage(this, 0, 0);
        });
    }
});

当我做imagem.onload...我希望，如果图像像素大于600和400，他会发出警报并停在那里，但即使这样，图像也会显示在画布上。
在相同的imagem.onload...函数中，如果图像像素对应于所需的画布（id =“filtrarImagem”）是图像的大小，但画布上的图像变得小于上载的原始图像，并且她要占据所有画布并获得原始尺寸。

如何继续？

Answer 1

您有两个单独的处理程序用于图像加载。无需使用相同的URL设置两个图像源，只需重复使用单个图像来检查大小和设置画布大小，以及将其绘制到画布中。

我建议采用以下步骤（您使用jQuery标记了这个问题，但我强烈建议您在使用非DOM面向元素（如canvas）时使用vanilla JavaScript。）

实施例

＆＃13;

if (typeof window.URL === "undefined") window.URL = window.webkitURL;

$("input")[0].onchange = function(e) {
  var arquivo = e.target.files[0],
      imagem = new Image();

  if (!arquivo.type.match(/image.*/)) {
    alert("Somente imagens são aceitas!");
    return;
  }

  // STEP 1: load as image
  imagem.onload = doSetup;
  imagem.src = URL.createObjectURL(arquivo)
};

// STEP 2: now that we have the image loaded we can check size and setup canvas
function doSetup() { 
  URL.revokeObjectURL(this.src);  // clean up memory for object-URL
  
  if (this.width > 600 || this.height > 400) {
    alert("Too big!");
    return;                       // exit!
  }
  
  // image OK, setup canvas
  var c = $("canvas")[0];         // work with the element itself, not the jQuery object
  c.width = this.width;           // important: use canvas.width, not style or css
  c.height = this.height;
  
  // draw in image
  var ctx = c.getContext("2d");
  ctx.drawImage(this, 0, 0);
  // NEXT: ... from here, invoke filter etc.
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file"><br><canvas></canvas>

＆＃13;

Answer 2

jQuery height()和imagem.onload函数使用CSS来更改画布which does not do what you would expect it to do的大小。直接更改canvas元素的width和height属性。

检查尺寸不会阻止图像被绘制的原因是因为当$("#uploadImagem").change中的图形发生时，您的检查位于$img.onload reader.onload的处理程序中从target_date.setDate(currentdate.getDate()+1).setHours(16,0,0,0);分配。这两个事件是独立处理的。其中一个过早返回并不会阻止另一个人被执行。

图片小于画布上的原始图片来制作drawImage（）

2 个答案:

实施例