повысить производительность при большом увеличении изображения в ткани JS - PullRequest
Новая
       11

повысить производительность при большом увеличении изображения в ткани JS

0 голосов
/ 24 апреля 2018

Я хочу иметь функцию для моего активного объекта, в которой я могу увеличить фотографию. Я попробовал код ниже, но проблема в том, что это занимает около 5 секунд, чтобы сделать это. Как я могу увеличить производительность для увеличения и уменьшить это время. 

zoomBy: function (x, y, z, canvasFabric, callback) {

            debugger;

            if (x || y) { this.zoomedXY = true; }
            this.cx += x;
            this.cy += y;

            if (z) {
                this.cw -= z;
                this.ch -= z / (this.width / this.height);
            }

            if (z && !this.zoomedXY) {
                // Zoom to center of image initially
                this.cx = this.width / 2 - (this.cw / 2);
                this.cy = this.height / 2 - (this.ch / 2);
            }

            if (this.cw > this.width) { this.cw = this.width; }
            if (this.ch > this.height) { this.ch = this.height; }
            if (this.cw < 1) { this.cw = 1; }
            if (this.ch < 1) { this.ch = 1; }
            if (this.cx < 0) { this.cx = 0; }
            if (this.cy < 0) { this.cy = 0; }
            if (this.cx > this.width - this.cw) { this.cx = this.width - this.cw; }
            if (this.cy > this.height - this.ch) { this.cy = this.height - this.ch; }

            this.rerender(canvasFabric, callback);
        },

        rerender: function (canvasFabric, callback) {

            var img = new Image(), obj = this;
            img.onload = function () {

                debugger;

                var canvas = fabric.util.createCanvasElement();

                canvas.width = obj.width;
                canvas.height = obj.height;
                canvas.getContext('2d').drawImage(this, obj.cx, obj.cy, obj.cw, obj.ch, 0, 0, obj.width, obj.height);

                img.onload = function () {
                    obj.setElement(this);
                    obj.applyFilters(canvasFabric.renderAll.bind(canvasFabric));
                    obj.set({
                        left: obj.left,
                        top: obj.top,
                        angle: obj.angle
                    });
                    obj.setCoords();
                    if (callback) { callback(obj); }
                };
                debugger;
                img.src = canvas.toDataURL('image/png');
            };
            debugger;
            img.src = this.orgSrc;
        },

Я видел, что у некоторых других есть эта проблема, но не мог найти никакого решения для этого. конечно есть ответ здесь но я понятия не имею, как его использовать

1 Ответ

0 голосов
/ 01 мая 2018

Что я сделал для увеличения фотографии, я изменил масштаб фотографии и сбросил cropX, cropY, height и width объекта, чтобы размер контейнера был таким же. У меня отлично работает

Вы можете попробовать это, помните, что я только вносил изменения для увеличения, как вы можете видеть в своем состоянии, где вы получаете значение z. Также некоторые изменения в HTML.

HTML 

<button type="button" onclick="demo.zoomBy(0,0,0.01)">Zoom in</button>
<button type="button" onclick="demo.zoomBy(0,0,-0.01)">Zoom out</button>

JS 

zoomBy: function(x, y, z, callback) 
{
    if (x || y) { this.zoomedXY = true; }
    this.cx += x;
    this.cy += y;

    if (z) {
        this.cw -= z;
        this.ch -= z/(this.width/this.height);
    }

    if (z && !this.zoomedXY) { 
        // Zoom to center of image initially
   console.info(this)
var origScale = this.scaleX;
 var currentScale = (origScale+z);
 var origWidth = this.cw, origHeight = this.ch;
            this.scaleX = currentScale;
            this.scaleY = currentScale;
            this.cx =  this.cx - (origWidth/(currentScale/origScale)-this.cw)/2;
            this.cy =  this.cy - (origHeight/(currentScale/origScale)-this.ch)/2;
            this.cw = origWidth/(currentScale/origScale);
            this.ch = origHeight/(currentScale/origScale);
        /* this.cx = this.width / 2 - (this.cw / 2);
        this.cy = this.height / 2 - (this.ch / 2); */
    }

    if (this.cw > this.width) { this.cw = this.width; }
    if (this.ch > this.height) { this.ch = this.height; }
    if (this.cw < 1) { this.cw = 1; }
    if (this.ch < 1) { this.ch = 1; }
    if (this.cx < 0) { this.cx = 0; }
    if (this.cy < 0) { this.cy = 0; }
    if (this.cx > this.width - this.cw) { this.cx = this.width - this.cw; }
    if (this.cy > this.height - this.ch) { this.cy = this.height - this.ch; }

    //this.rerender(callback);
this.canvas.renderAll();
},
...