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

Затененный холст

При добавлении контента из источников за пределами вашего домена или из локальной файловой системы холст помечен как испорченный. Попытка доступа к данным пикселя или преобразование в 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 изображения сразу не загружаются. Вместо этого изображения загружаются асинхронно и в течение времени, image.src на загрузку JavaScript, он продолжает выполнять любой код, следующий за 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);
}

Единственное различие между двумя функциями - получение шкалы. Приспосабливание использует минимальную шкалу подгонки, заполнение которой использует макс.