изображение меньше оригинала на холсте, чтобы сделать drawImage()

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

1. Когда я imagem.onload... я хочу, если пиксели изображения были больше, чем 600 и 400, он дал предупреждение и остановить, но даже так изображение появляется на холсте.
2. В той же функции imagem.onload..., если пиксели изображения соответствуют требуемому холсту (id = "filtrarImagem") - это размер изображения, но изображение на холсте становится меньше, чем оригинал, загруженный, и она должна была занять все холст и получить первоначальный размер.

Как продолжить?

Answer 1

У вас есть два отдельных обработчика для загрузки изображений. Нет необходимости устанавливать два источника изображения с одним и тем же URL-адресом, просто повторно использовать одно изображение для проверки размера и размера холста, а также для рисования его в холсте.

Я бы предложил следующие шаги (вы отметили вопрос с помощью jQuery, но я настоятельно рекомендую работать с ванильным JavaScript при работе с не-DOM-ориентированными элементами, такими как холст).

Пример

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. 
 
}

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

Answer 2

Функции jQuery width() и height() используют CSS для изменения размера холста which does not do what you would expect it to do. Измените атрибуты ширины и высоты элемента canvas.

Причина, почему ваш чек на размере не мешает изображение от втягивания, потому что ваш чек в обработчике imagem.onload в $("#uploadImagem").change в то время как рисунок происходит в $img.onload присвоенного из reader.onload. Эти два события обрабатываются независимо. Один из них, преждевременно возвращающийся, не мешает другому исполнить.