html语言 图片大小,调整HTML 5画布中的图像大小

b7a0e6e3667f320c15ed6c06bc678ace.png

天涯尽头无女友

那么,如果所有的浏览器(实际上,Chrome 5给了我相当好的浏览器)都不能给你足够好的重采样质量,你会怎么做?你自己动手吧!得了吧,我们正在进入Web3.0,符合HTML 5的浏览器,超级优化的JITjavascript编译器,多核(†)机器,拥有大量内存的新时代,你害怕什么?嘿,javascript中有java这个词,所以这能保证性能,对吧?请看,缩略图生成代码:// returns a function that calculates lanczos weightfunction lanczosCreate(lobes) {

    return function(x) {

        if (x > lobes)

            return 0;

        x *= Math.PI;

        if (Math.abs(x) 

            return 1;

        var xx = x / lobes;

        return Math.sin(x) * Math.sin(xx) / x / xx;

    };}// elem: canvas element, img: image element, sx: scaled width, lobes: kernel radiusfunction thumbnailer(elem, img, sx, lobes) {

    this.canvas = elem;

    elem.width = img.width;

    elem.height = img.height;

    elem.style.display = "none";

    this.ctx = elem.getContext("2d");

    this.ctx.drawImage(img, 0, 0);

    this.img = img;

    this.src = this.ctx.getImageData(0, 0, img.width, img.height);

    this.dest = {

        width : sx,

        height : Math.round(img.height * sx / img.width),

    };

    this.dest.data = new Array(this.dest.width * this.dest.height * 3);

    this.lanczos = lanczosCreate(lobes);

    this.ratio = img.width / sx;

    this.rcp_ratio = 2 / this.ratio;

    this.range2 = Math.ceil(this.ratio * lobes / 2);

    this.cacheLanc = {};

    this.center = {};

    this.icenter = {};

    setTimeout(this.process1, 0, this, 0);}thumbnailer.prototype.process1 = function(self, u) {

    self.center.x = (u + 0.5) * self.ratio;

    self.icenter.x = Math.floor(self.center.x);

    for (var v = 0; v 

        self.center.y = (v + 0.5) * self.ratio;

        self.icenter.y = Math.floor(self.center.y);

        var a, r, g, b;

        a = r = g = b = 0;

        for (var i = self.icenter.x - self.range2; i <= self.icenter.x + self.range2; i++) {

            if (i = self.src.width)

                continue;

            var f_x = Math.floor(1000 * Math.abs(i - self.center.x));

            if (!self.cacheLanc[f_x])

                self.cacheLanc[f_x] = {};

            for (var j = self.icenter.y - self.range2; j <= self.icenter.y + self.range2; j++) {

                if (j = self.src.height)

                    continue;

                var f_y = Math.floor(1000 * Math.abs(j - self.center.y));

                if (self.cacheLanc[f_x][f_y] == undefined)

                    self.cacheLanc[f_x][f_y] = self.lanczos(Math.sqrt(Math.pow(f_x * self.rcp_ratio, 2)

                            + Math.pow(f_y * self.rcp_ratio, 2)) / 1000);

                weight = self.cacheLanc[f_x][f_y];

                if (weight > 0) {

                    var idx = (j * self.src.width + i) * 4;

                    a += weight;

                    r += weight * self.src.data[idx];

                    g += weight * self.src.data[idx + 1];

                    b += weight * self.src.data[idx + 2];

                }

            }

        }

        var idx = (v * self.dest.width + u) * 3;

        self.dest.data[idx] = r / a;

        self.dest.data[idx + 1] = g / a;

        self.dest.data[idx + 2] = b / a;

    }

    if (++u 

        setTimeout(self.process1, 0, self, u);

    else

        setTimeout(self.process2, 0, self);};thumbnailer.prototype.process2 = function(self) {

    self.canvas.width = self.dest.width;

    self.canvas.height = self.dest.height;

    self.ctx.drawImage(self.img, 0, 0, self.dest.width, self.dest.height);

    self.src = self.ctx.getImageData(0, 0, self.dest.width, self.dest.height);

    var idx, idx2;

    for (var i = 0; i 

        for (var j = 0; j 

            idx = (j * self.dest.width + i) * 3;

            idx2 = (j * self.dest.width + i) * 4;

            self.src.data[idx2] = self.dest.data[idx];

            self.src.data[idx2 + 1] = self.dest.data[idx + 1];

            self.src.data[idx2 + 2] = self.dest.data[idx + 2];

        }

    }

    self.ctx.putImageData(self.src, 0, 0);

    self.canvas.style.display = "block";};.这样你就能产生这样的结果!因此,无论如何,下面是您的示例的“固定”版本:img.onload = function() {

    var canvas = document.createElement("canvas");

    new thumbnailer(canvas, img, 188, 3); //this produces lanczos3

    // but feel free to raise it up to 8. Your client will appreciate

    // that the program makes full use of his machine.

    document.body.appendChild(canvas);};现在是时候让你最好的浏览器,看看哪一个最不可能增加你的客户的血压!我的讽刺标签呢?(因为代码的许多部分是基于Anrieff阶梯发生器它是否也包括在GPL 2中?我不知道)† 实际上,由于javascript的限制,不支持多核。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值