相关疑难解决方法(0)

我使用html5 canvas元素在浏览器中调整图像大小.事实证明,质量非常低.我发现:在缩放<canvas>时禁用插值,但它无助于提高质量.

下面是我的css和js代码,以及用Photoshop调整并在画布API中缩放的图像.

在浏览器中缩放图像时,我需要做些什么才能获得最佳质量？

注意:我想将大图像缩小到一个小图像,修改画布中的颜色并将结果从画布发送到服务器.

CSS:

canvas, img {
    image-rendering: optimizeQuality;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

JS:

var $img = $('<img>');
var $originalCanvas = $('<canvas>');
$img.load(function() {


   var originalContext = $originalCanvas[0].getContext('2d');   
   originalContext.imageSmoothingEnabled = false;
   originalContext.webkitImageSmoothingEnabled = false;
   originalContext.mozImageSmoothingEnabled = false;
   originalContext.drawImage(this, 0, 0, 379, 500);
});

使用photoshop调整图像大小:

图像在画布上调整大小:

编辑:

我尝试按照以下方案中提出的多个步骤进行缩减:

调整HTML5画布和 Html5画布中的图像大小drawImage:如何应用抗锯齿

这是我用过的功能:

function resizeCanvasImage(img, canvas, maxWidth, maxHeight) {
    var imgWidth = img.width, 
        imgHeight = img.height;

    var ratio = 1, ratio1 …

我正在玩<canvas>元素,绘制线条等.

我注意到我的对角线是抗锯齿的.我更喜欢看到我正在做的事情 - 有什么方法可以关闭这个功能吗？

什么是

ctx.mozImageSmoothingEnabled = false;

对于webkit(或其他浏览器)？我需要它来消除抗锯齿,因为我试图获得像素化效果的图像.有了抗锯齿,它看起来质量很差,但没有锐边.

更新

这肯定与我如何重新缩放画布有关.如果我将相同的场景绘制到画布上并且我不改变它的宽度和高度以填充屏幕,它可以完美地工作.

为全屏环境调整画布大小的正确方法是什么？

我正在编写一个用于画布的游戏引擎,并且我遇到了图像被放大和混淆的问题,我通过几个答案为有类似问题的人阅读.我修改了我的代码,以便在我的每个画布上启用以下设置.

context.webkitImageSmoothingEnabled = false;                                                                                
context.mozImageSmoothingEnabled = false;                                                                                   
context.imageSmoothingEnabled = false;

为了确保,我还包括了这些规则的CSS替代方案.

canvas {
  image-rendering: optimizeSpeed;             // Older versions of FF
  image-rendering: -moz-crisp-edges;          // FF 6.0+
  image-rendering: -webkit-optimize-contrast; // Webkit (non standard naming)
  image-rendering: -o-crisp-edges;            // OS X & Windows Opera (12.02+)
  image-rendering: crisp-edges;               // Possible future browsers.
  -ms-interpolation-mode: nearest-neighbor;   // IE (non standard naming)
}

这是我试图绘制的原始图像之一的示例.

然后我从16x16升级到64x64,而不是看起来像使用最近邻插值,它呈现这样.

我在Chrome和Firefox中获得了相同的结果.我也不想做一个预处理步骤来升级图像.它必须是可能的,因为这个演示对我有用.

另外要提的是,引擎设计用于全屏,所以我手动保持画布的大小与此功能.

fill-screen = (canvas) ->
  canvas.width = document.body.clientWidth
  canvas.height = document.body.clientHeight

画布绝对位于其父级的左上角,除此之外,没有非浏览器CSS规则对它们进行操作.

也许我正在做一些愚蠢的事情,但我已经看了好几年了,而且我已经没有接近了.我正在创建画布和上下文的文件的代码在这里:https://gist.github.com/code-curve/9273248

我试图扩大css精灵像素艺术图像,并希望完全禁用抗锯齿/图像平滑.

根据这篇文章:缩放图像时禁用抗锯齿我尝试了以下css

image-rendering: optimizeSpeed;            
image-rendering: -moz-crisp-edges;         
image-rendering: -o-crisp-edges;           
image-rendering: -webkit-optimize-contrast; 
image-rendering: optimize-contrast;       
-ms-interpolation-mode: nearest-neighbor;   

它的工作方式与我想要的一样,但是在Chrome和IE浏览器中它有点帮助,但仍然会出现一些图像插值/平滑/抗锯齿.

我不想使用canvas元素,而只是坚持使用CSS背景图像sprite.

有没有办法在其他浏览器中实现与"-moz-crisp-edges"相同的结果？

我正在使用JavaFX制作精灵编辑器以用于桌面.

我正在尝试实现缩放功能,但我遇到了一个问题:我无法弄清楚如何禁用Canvas对象上的图像平滑.

我正在打电话,Canvas.setScaleX()并Canvas.setScaleY()按照每个实施Canvas缩放的教程.但放大时我的图像看起来很模糊.

我在这里有一些测试代码来演示.

由于这是一个精灵编辑器,因此使用清晰边缘对我来说非常重要.固定图像平滑的替代方法Canvas是使其具有非平滑性ImageView,并且具有隐藏Canvas以进行绘制,我宁愿避免使用.

感谢帮助.

(这里是相关问题的链接,但没有解决我的特定问题)