javascript canvas stretch 내 이미지

Question

$.fn.imageCanvas = function() { 

    if (!document.getElementById('bgCanvas')){ 
     $('body').append($('<canvas>',{id:'bgCanvas', width:'500px', height: '500px'})) 
     var canvas = document.getElementById('bgCanvas'); 
     var ctx = canvas.getContext('2d'); 
    } 
    var img = new Image(); 
    img.onload = function() { 
     ctx.drawImage(img,0,0,438,300); 
     console.log(this.width); 
     console.log(this.height); 
    } 
    img.src= 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
} 

ctx.drawImage에서 x, y, 너비, 높이를 썼습니다. 그러나 캔버스는이 이미지를 뻗어 있습니다. 어떻게 원래 너비/높이와 이미지

Answer 1

단순히 크기 조정하지 않고 이미지를 표시 할 경우, 그냥 x와 y로 drawImage의 three-argument variant를 사용할 수 있습니다

ctx.drawImage(img,0,0); 

당신이 바닥을 클립하려면 클리핑 직사각형의 X/Y 및 폭/높이를 설정

ctx.drawImage(img,0,0,362,240,0,0,362,240); 

처음 네 개의 숫자, 다음 네 개의 숫자 /를 X/Y 및 폭을 설정하고, 지정된 크기로 우측 에지는 nine-argument variant을 사용 가두 ht는 캔버스에 그려지는 이미지 직사각형입니다.

편집 :

문제는 jQuery를 기능은 옵션에서 width 및 height 속성 CSS 속성, DOM 객체의 속성으로 하지으로 두 번째 인수에 개체를 처리하는 것입니다. 당신은 당신이 생성하는 HTML을 조사하면 확인할 수있는 것들 :

대신 당신이 원하는 것을

<canvas id="bgCanvas" style="width: 500px; height: 500px;"></canvas> 

이어야한다 :

<canvas id="bgCanvas" width="500" height="500"></canvas> 

이 문제에 대한 논의는 this question를 참조하십시오. ,

$('body').append($('<canvas>',{id:"bgCanvas"}).attr({'width':500,'height':500})) 

Answer 2

이미지를로드 할 수 있습니다 내가 최근에 만들어진이 라이브러리를 사용하여 시도는 폭 & 높이 또는 PRECENTAGE을 고정 크기를 조정하고 또는 base64로 또는 BLOB로 변환 : 솔루션으로, 내가 대신 사용하는 것이 좋습니다 것입니다.

https://github.com/vnbenny/canvawork.js

희망이 당신을 도와줍니다!