时间戳

首页 > 解决方案 > 增强织物 js 中重图像缩放的性能

javascript - 增强织物 js 中重图像缩放的性能

问题描述

我想为我的 activeObject 提供一个功能，我可以在其中放大照片。我尝试了下面的代码，但问题是它需要大约 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;
        },

我看到其他一些人有这个问题，但找不到任何解决方案。当然这里有答案， 但我不知道如何使用它

标签： javascriptcanvasfabricjs

解决方案

我为缩放照片所做的工作，我更改了照片的比例并重置了对象的cropX、和cropY，以便容器大小相同。它非常适合我 heightwidth

您可以试试这个，记住我只对缩放进行了更改，正如您在获得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();
},

推荐阅读