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

我是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();        
}

解决方法:

您可以按照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()创建织物期望的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();
    }
}

标签：html5,html5-canvas,javascript
来源： https://codeday.me/bug/20191123/2065715.html