javascript - HTML 5 - 如何缩放 Canvas 背景图像

Question

我是 HTML 5 的初学者，

我已经为 Canvas 缩放编写了代码，但我不想缩放实际的 Canvas ，而是像 http://www.customink.com/lab 中的 Canvas 背景图像。

以下是我写的代码:

var canvas = new fabric.Canvas('canvas');

canvas.setBackgroundImage('images/1front.png', function() {

    canvas.backgroundImageStretch = true;
    canvas.renderAll();
});

var canvasScale = 1;
var SCALE_FACTOR = 1.2;
function zoomIn() {
    // TODO limit the max canvas zoom in

    canvasScale = canvasScale * SCALE_FACTOR;

    canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
    canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

    var objects = canvas.getObjects();
    for (var i in objects) {
        var scaleX = objects[i].scaleX;
        var scaleY = objects[i].scaleY;
        var left = objects[i].left;
        var top = objects[i].top;

        var tempScaleX = scaleX * SCALE_FACTOR;
        var tempScaleY = scaleY * SCALE_FACTOR;
        var tempLeft = left * SCALE_FACTOR;
        var tempTop = top * SCALE_FACTOR;

        objects[i].scaleX = tempScaleX;
        objects[i].scaleY = tempScaleY;
        objects[i].left = tempLeft;
        objects[i].top = tempTop;

        objects[i].setCoords();
    }

    canvas.renderAll();
}

// Zoom Out
function zoomOut() {
    // TODO limit max cavas zoom out

    canvasScale = canvasScale / SCALE_FACTOR;

    canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR));
    canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR));

    var objects = canvas.getObjects();
    for (var i in objects) {
        var scaleX = objects[i].scaleX;
        var scaleY = objects[i].scaleY;
        var left = objects[i].left;
        var top = objects[i].top;

        var tempScaleX = scaleX * (1 / SCALE_FACTOR);
        var tempScaleY = scaleY * (1 / SCALE_FACTOR);
        var tempLeft = left * (1 / SCALE_FACTOR);
        var tempTop = top * (1 / SCALE_FACTOR);

        objects[i].scaleX = tempScaleX;
        objects[i].scaleY = tempScaleY;
        objects[i].left = tempLeft;
        objects[i].top = tempTop;

        objects[i].setCoords();
    }

    canvas.renderAll();        
}

Answer 1

您可以按照 user2422324 的建议使用 drawImage，但是在绘制图像时必须使用额外的参数来缩放图像。

此外，您必须将背景图像缩放到临时 Canvas ，因为 fabricjs 在设置背景时需要一个 imageURL

缩放的工作原理如下:

首先，创建一个临时 Canvas 并将其大小设置为您想要的缩放大小。例如，要将背景图像缩放到 200%，您可以这样做:

tempCanvas.width=myBackgroundImage.width*2.0;
tempCanvas.height=myBackgroundImage.height*2.0;

现在使用 drawImage 将背景图像绘制到 tempCanvas。通过提供最后 4 个参数，图像将缩放到所需的缩放比例(这是当前的 tempCanvas 大小)。

tempContext.drawImage(myBackgroundImage,

    // the source of the draw will be the full background image
    0,0, myBackgroundImage.width, myBackgroundImage.height,

    // and this causes the full image to be scaled to fit the resized tempCanvas
    0,0, tempCanvas.width, tempCanvas.height
);

然后使用 fabricJS 的 setBackgroundImage 应用缩放背景。我们可以使用 tempCanvas.toDataURL() 创建 fabric 期望的 imageURL:

canvas.setBackgroundImage( tempCanvas.toDataURL(), function(){
    canvas.backgroundImageStretch=true;
    canvas.renderAll();
});

请注意，backgroundImageStretch=true 可能会导致图像按比例扭曲。相反，您可能想要设置 backgroundImageStretch=false 并设置 backgroundImageLeft/backgroundImageTop 以偏移背景图像。

这是一个相当完整但完全未经测试的起始代码:

// this is the current scaling factor of the background image
// hint: originally set it at less than full size
//       so it doesn't pixelate when scaled up.
var scaleFactor=.50;

// create a background image object we can later scale
var fullBk=document.createElement("img");
fullBk.onload=function(){
    setBkZoom(scaleFactor);
}
fullBk.src="images/1front.png";

// create a temp canvas used to scale the bk image
var zoomCanvas=document.createElement("canvas");
var zoomCtx=zoomCanvas.getContext("2d");

// scale the bk image and set it as the fabric background
function setBkZoom(scaleFactor){
    // scale the temp zoomCanvas to desired bk size
    // note: changing canvas width automatically clears it
    zoomCanvas.width=fullBk.width*scaleFactor;
    zoomCanvas.height=fullBk.height*scaleFactor;
    // draw a scaled version of fullBk to zoomCanvas
    zoomCtx.drawImage(fullBk,
        0,0,fullBk.width,fullBk.height,
        0,0,zoomCanvas.width,zoomCanvas.height);
    // now use the scaled zoomCanvas to set the fabric background
    canvas.setBackgroundImage(zoomCanvas.toDataURL(),function(){
        // stretch=true may cause your image to distort proportions
        // instead you might want to set backgroundImageLeft/backgroundImageTop 
        // to offset the scaled image
        canvas.backgroundImageStretch=true;
        canvas.renderAll();
    }
}