[javascript] 캔버스에 이미지를 추가하는 방법

Program / 글쓴이

HTML의 새로운 캔버스 요소로 약간 실험하고 있습니다.

캔버스에 이미지를 추가하고 싶지만 어떤 이유로 작동하지 않습니다.

다음 코드가 있습니다.

HTML

<canvas id="viewport"></canvas>

CSS

canvas#viewport { border: 1px solid white; width: 900px; }

JS

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  context.drawImage(base_image, 100, 100);
}

이미지가 존재하고 JavaScript 오류가 발생하지 않습니다. 이미지가 표시되지 않습니다.

내가 놓친 정말 간단한 것 같군요 …

답변

그리기 전에 이미지가로드 될 때까지 기다려야 할 수도 있습니다. 대신 이것을 시도하십시오.

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function(){
    context.drawImage(base_image, 0, 0);
  }
}

즉, 이미지의 onload 콜백에 이미지를 그립니다.

답변

다음은 캔버스에 이미지를 그리는 샘플 코드입니다.

$("#selectedImage").change(function(e) {

var URL = window.URL;
var url = URL.createObjectURL(e.target.files[0]);
img.src = url;

img.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, 500, 500);
}});

위의 코드에서 selectedImage는 시스템에서 이미지를 탐색하는 데 사용할 수있는 입력 컨트롤입니다. 가로 세로 비율을 유지하면서 캔버스에 이미지를 그리는 샘플 코드에 대한 자세한 내용은 다음을 참조하세요.

http://newapputil.blogspot.in/2016/09/show-image-on-canvas-html5.html

답변

제 경우에는 다음과 같은 함수 매개 변수를 잘못 인식했습니다.

context.drawImage(image, left, top);
context.drawImage(image, left, top, width, height);

당신이 그들을 기대한다면

context.drawImage(image, width, height);

질문에서 설명한 것과 동일한 효과로 캔버스 바로 밖에 이미지를 배치합니다.

답변

.onload를 사용해야합니다.

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

const drawImage = (url) => {
    const image = new Image();
    image.src = url;
    image.onload = () => {
       ctx.drawImage(image, 0, 0)
    }
}

이유는 다음과 같습니다.

캔버스가 이미 생성 된 후 먼저 이미지를로드하는 경우 캔버스는 이미지를 그리기 위해 모든 이미지 데이터를 전달할 수 없습니다. 따라서 먼저 이미지와 함께 제공된 모든 데이터를로드 한 다음 drawImage ()를 사용할 수 있습니다.

답변