您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何在没有抗锯齿的情况下拉伸图像

如何在没有抗锯齿的情况下拉伸图像

Canvas文档明确没有指定缩放方法-在我自己的测试中,确实确实在Firefox中对图像进行了严重的锯齿处理。

下面的代码从源图像(必须来自相同的Origin或Data URI)中逐像素复制像素,并按指定的因子缩放。

需要额外的屏幕外画布(src_canvas)来接收原始源图像,然后将其图像数据逐像素复制到屏幕画布上。

var img = new Image();
img.src = ...;
img.onload = function() {

    var scale = 8;

    var src_canvas = document.createElement('canvas');
    src_canvas.width = this.width;
    src_canvas.height = this.height;

    var src_ctx = src_canvas.getContext('2d');
    src_ctx.drawImage(this, 0, 0);
    var src_data = src_ctx.getImageData(0, 0, this.width, this.height).data;

    var dst_canvas = document.getElementById('canvas');
    dst_canvas.width = this.width * scale;
    dst_canvas.height = this.height * scale;
    var dst_ctx = dst_canvas.getContext('2d');

    var offset = 0;
    for (var y = 0; y < this.height; ++y) {
        for (var x = 0; x < this.width; ++x) {
            var r = src_data[offset++];
            var g = src_data[offset++];
            var b = src_data[offset++];
            var a = src_data[offset++] / 100.0;
            dst_ctx.fillStyle = 'rgba(' + [r, g, b, a].join(',') + ')';
            dst_ctx.fillRect(x * scale, y * scale, scale, scale);
        }
    }
};
其他 2022/1/1 18:16:13 有564人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶