Ich möchte eine "Zoom" -Funktion in meiner Web-App implementieren, um die Größe eines Canvas und seines Inhalts proportional zu ändern (schmutzige Qualität ist mir egal).

Hier ist mein Code. Jedes Mal, wenn wir zoomen möchten, wird die Zeichenfläche zurückgesetzt, um ein Bildobjekt zu erhalten (für die Verwendung der drawImage-Methode), die Größe der Zeichenfläche zu ändern und dann die drawImage-Methode zu verwenden, um die Größe des Inhalts proportional zu ändern ...

var Editor = {
    // The following variables contains informations
    // about the original canvas
    data: ..., // imageData
    width: 200,
    height: 50,

    // Zoom canvas
    zoomCanvas: function(zoom){ // zoom in percents
        var canvas = $('#canvas').get(0);
        var context = canvas.getContext();
        var data = this.data;
        var scale = zoom / 100;
        var width = this.width * scale;
        var height = this.height * scale;

        // Reset canvas to original size and imageData
        this.resizeCanvas(this.width, this.height); 
        context.scale(1, 1);
        context.putImageData(data, 0, 0);

        // Get Image from original canvas data
        var url = canvas.toDataURL();
        var img = $('<img src="' + url + '">').get(0);

        // Resize canvas, apply scale and draw Image with new proportions
        this.resizeCanvas(width, height);
        context.scale(scale, scale);
        context.drawImage(img, 0, 0);
    },

    // Resize canvas
    resizeCanvas: function(width, height){
        // NOTE : I don't know exactly how to resize it so...
        var canvas = $('#canvas').get(0);
        canvas.width = width;
        canvas.height = height;
        $(canvas).width(width).attr('width', width);
        $(canvas).height(height).attr('height', height);

        var context = canvas.getContext('2d');
        context.width = width;
        context.height = height;
    }
}

Es funktioniert für Zoom +, aber nicht für Zoom -.

Anyway, ich denke nicht, dass es die beste Möglichkeit ist, das zu tun, was ich erwarte. Es wäre besser, eine Möglichkeit zu finden, direkt von Editor.data aus zu arbeiten, ohne die Zeichenfläche jedes Mal zurücksetzen oder das Image-Objekt speichern zu müssen. Außerdem bin ich mir nicht sicher, ob ich die Skalierungsmethode verwenden soll ...

Jede Hilfe wäre dankbar

(Entschuldige mein Englisch