html5-canvas
이미지

캔버스를 사용한 이미지 자르기

이 예제는 이미지를 가져 와서 좌표를 자르고 자른 이미지를 반환하는 간단한 이미지 자르기 함수를 보여줍니다.

function cropImage(image, croppingCoords) {
    var cc = croppingCoords;
    var workCan = document.createElement("canvas"); // create a canvas
    workCan.width = Math.floor(cc.width);  // set the canvas resolution to the cropped image size
    workCan.height = Math.floor(cc.height);
    var ctx = workCan.getContext("2d");    // get a 2D rendering interface
    ctx.drawImage(image, -Math.floor(cc.x), -Math.floor(cc.y)); // draw the image offset to place it correctly on the cropped region
    image.src = workCan.toDataURL();       // set the image source to the canvas as a data URL
    return image;
}

쓰다

var image = new Image();
image.src = "image URL"; // load the image
image.onload = function () {  // when loaded
    cropImage(
        this, {
        x : this.width / 4,     // crop keeping the center
        y : this.height / 4,
        width : this.width / 2,
        height : this.height / 2,
    });
    document.body.appendChild(this);  // Add the image to the DOM
};

Tained 캔버스

도메인 외부의 소스 또는 로컬 파일 시스템에서 컨텐츠를 추가 할 때 캔버스는 오염 된 것으로 표시됩니다. 픽셀 데이터에 액세스하려고 시도하거나 dataURL로 변환하면 보안 오류가 발생합니다.

vr image = new Image();
image.src = "file://myLocalImage.png";
image.onload = function(){
    ctx.drawImage(this,0,0);
    ctx.getImageData(0,0,canvas.width,canvas.height);  // throws a security error
}

이 예는 정교한 상세한 이해로 누군가를 유도하는 데 그쳐서는 안됩니다.

"context.drawImage"가 캔버스에 이미지를 표시하지 않습니까?

context.drawImage 하여 이미지 객체를 캔버스에 그리기 전에 이미지 객체가 완전히로드되었는지 확인하십시오. 그렇지 않으면 이미지가 자동으로 표시되지 않습니다.

JavaScript에서는 이미지가 즉시로드되지 않습니다. 대신, 이미지가 비동기 적으로로드되고 JavaScript를로드하는 데 걸리는 시간 동안 image.src 다음에 image.src 코드가 계속 실행됩니다. 즉, context.drawImage 는 빈 이미지로 실행될 수 있으므로 아무 것도 표시하지 않습니다.

.drawImage로 이미지를 그리기 전에 이미지가 완전히로드되는지 확인하는 예제

var img=new Image();
img.onload=start;
img.onerror=function(){alert(img.src+' failed');} 
img.src="someImage.png";
function start(){
    // start() is called AFTER the image is fully loaded regardless 
    //     of start's position in the code
}

다중 이미지를로드하기 전에로드하는 예제

더 많은 기능을 갖춘 이미지 로더가 있지만이 예제는 어떻게 수행하는지 보여줍니다.

// first image
var img1=new Image();
img1.onload=start;
img1.onerror=function(){alert(img1.src+' failed to load.');};
img1.src="imageOne.png";
// second image
var img2=new Image();
img2.onload=start;
img1.onerror=function(){alert(img2.src+' failed to load.');};
img2.src="imageTwo.png";
//
var imgCount=2;
// start is called every time an image loads
function start(){
    // countdown until all images are loaded
    if(--imgCount>0){return;}
    // All the images are now successfully loaded
    // context.drawImage will successfully draw each one
    context.drawImage(img1,0,0);
    context.drawImage(img2,50,0);
}

이미지를 크기에 맞게 조정하거나 채 웁니다.

크기에 맞게 조정

이미지 전체가 표시되지만 이미지가 캔바스와 같은면이 아닌 경우 측면이나 위, 아래에 빈 공간이있을 수 있습니다. 이 예제는 적합하도록 크기가 조정 된 이미지를 보여줍니다. 옆면의 파란색은 이미지가 캔버스와 같은면이 아니기 때문입니다.

채우기 위해 크기 조절

모든 캔버스 픽셀이 이미지로 덮일 수 있도록 이미지의 크기가 조절됩니다. 이미지 모양이 캔버스와 같지 않으면 이미지의 일부가 잘립니다. 이 예제는 채우기 위해 크기가 조정 된 이미지를 보여줍니다. 이미지의 상단과 하단이 더 이상 보이지 않습니다.

적합 할 스케일 예

var image = new Image();
image.src = "imgURL";
image.onload = function(){
    scaleToFit(this);
}

function scaleToFit(img){
    // get the scale
    var scale = Math.min(canvas.width / img.width, canvas.height / img.height);
    // get the top left position of the image
    var x = (canvas.width / 2) - (img.width / 2) * scale;
    var y = (canvas.height / 2) - (img.height / 2) * scale;
    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
}

채울 스케일 예

var image = new Image();
image.src = "imgURL";
image.onload = function(){
    scaleToFill(this);
}

function scaleToFill(img){
    // get the scale
    var scale = Math.max(canvas.width / img.width, canvas.height / img.height);
    // get the top left position of the image
    var x = (canvas.width / 2) - (img.width / 2) * scale;
    var y = (canvas.height / 2) - (img.height / 2) * scale;
    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
}

두 기능 간의 유일한 차이점은 스케일을 얻는 것입니다. 피팅은 최소 피팅 눈금을 사용하며 채우기는 최대 피팅 눈금을 사용합니다.