HTML 5 - 如何缩放画布背景图像

Question

我是 HTML 5 的初学者，

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

以下是我写的代码：

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，但在绘制图像时必须使用其他参数来缩放图像。

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

以下是缩放的工作原理：

首先，创建一个临时画布并将其大小设置为您想要的缩放大小。例如，要将背景图像缩放到 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();
    }
}

Answer 2

最简单的方法是将背景图像存储在Image 对象中，然后使用context.drawImage(img,X,Y,Width,Height); 进行渲染

简介：http://www.html5canvastutorials.com/tutorials/html5-canvas-image-size/