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

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

---

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

---

In my case, I was mistaken the function parameters, which are:

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

If you expect them to be

context.drawImage(image, width, height);

you will place the image just outside the canvas with the same effects as described in the question.

참고URL : https://stackoverflow.com/questions/6011378/how-to-add-image-to-canvas