相关疑难解决方法(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 …

我有一个<div style="border:1px solid border;" />和帆布,使用以下方式绘制:

context.lineWidth = 1;
context.strokeStyle = "gray";

绘图看起来相当模糊(lineWidth小于1创建更糟糕的图片),并且没有任何接近div的边界.是否可以使用画布获得与HTML相同的绘图质量？

var ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 1;
ctx.moveTo(2, 2);
ctx.lineTo(98, 2);
ctx.lineTo(98, 98);
ctx.lineTo(2, 98);
ctx.lineTo(2, 2);
ctx.stroke();

div {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}
canvas, div {background-color: #F5F5F5;}
canvas {border: 1px solid white;display: block;}

<table>
<tr><td>Line on canvas:</td><td>1px border:</td></tr>
<tr><td><canvas id="canvas" width="100" height="100"/></td><td><div>&nbsp;</div></td></tr>
</table>

我知道这个问题已被多次询问过,但是我尝试了几乎所有我能在网上找到的东西,但无论在什么样的(以及任何组合)我尝试过,仍无法在画布上正确渲染文本.

对于模糊的线条和形状问题,只需在坐标上添加+ 0.5px即可解决问题:但是,此解决方案似乎不适用于文本渲染.

注意:我从不使用CSS来设置画布宽度和高度(只需尝试一次以检查HTML和CSS中的设置大小属性是否会改变任何内容).此外,问题似乎与浏览器无关.

我试过了 :

• 使用HTML创建画布,然后使用javascript而不是html
• 在HTML元素中设置宽度和高度,然后使用JS,然后使用HTML和JS
• 使用每种可能的组合将0.5px添加到文本坐标
• 更改font-family和font-size
• 更改字体大小单位(px,pt,em)
• 用不同的浏览器打开文件以检查是否有任何变化
• 禁用使用的alpha通道canvas.getContext('2d', {alpha:false}),只是让我的大部分图层消失而不解决问题

请参阅canvas和html字体渲染之间的比较:https://jsfiddle.net/balleronde/1e9a5xbf/

甚至可以将画布中的文本渲染为dom元素中的文本吗？任何建议或建议将不胜感激

我试图将300dpi图像绘制到画布对象,但在Chrome中它显示的质量非常差.当我使用下面的代码时,它没有改进,但那是因为devicePixelRatio与backingStoreRatio(两者都是1)相同.

然后我尝试强制进行一些比率更改并找到以下内容:

• 如果我改变ratio了2并强制缩放代码运行,那么它会以更好的分辨率绘制到画布.
• 如果我改变ratio任何东西大于2(例如3,4,5,6,等等),那么它有可怜的分辨率!

这一切都是在台式计算机上完成的.

如何确保画布以高分辨率绘制？

(代码来自:http://www.html5rocks.com/en/tutorials/canvas/hidpi/)

/**
* Writes an image into a canvas taking into
* account the backing store pixel ratio and
* the device pixel ratio.
*
* @author Paul Lewis
* @param {Object} opts The params for drawing an image to the canvas
*/
function drawImage(opts) { …

我正在尝试在 HTML5 画布上绘制 8 位像素文本。我试过了：

_context['imageSmoothingEnabled'] = false;
_context['mozImageSmoothingEnabled'] = false;
_context['oImageSmoothingEnabled'] = false;
_context['webkitImageSmoothingEnabled'] = false;
_context['msImageSmoothingEnabled'] = false;

以及其他一些与 HTML 和 CSS 字体有关的事情，同时谷歌搜索了一个多小时。这是字体：

@font-face {
    font-family: "undertalefont";
    src: url("bitops.ttf");
    font-style: normal;
    -webkit-font-smoothing: none;
}

当在 HTML 中使用它时，它会尝试使用奇怪形式的子像素抗锯齿。它可以按照图像编辑程序中的预期呈现字体。

所以我的问题是，我该如何阻止这个...（缩放到 200% 以查看坏的 AA）

并使其像素完美清晰？

编辑：我正在渲染文本：

_context.fillStyle = "white";
_context.font = "24px 'undertalefont'";
_context.fillText("Font rendering.", 32, 20);

我在将SVG渲染到画布中时遇到问题。在视网膜显示器上，渲染为base64 url​​并设置为SRC的画布是模糊的。

我尝试了下面列表中描述的各种方法，但没有走运：

• https://tristandunn.com/2014/01/24/rendering-svg-on-canvas/
• 如何修复HTML5画布中的模糊文本？
• 画布绘制和视网膜显示：可行吗？
• https://www.html5rocks.com/zh-CN/tutorials/canvas/hidpi/

现在我不知道该怎么做才能使它更好。请调查我的结果：jsfiddle.net/a8bj5fgj/2/

编辑：

更新了修正的小提琴：jsfiddle.net/a8bj5fgj/7/

长话短说，我正在制作一个实时折线图，并且由于每秒需要推入大量行，因此我正在使用three.js，因此，现在我需要绘制文本值对于 x 和 y 轴，经过相当长的斗争（因为我是一个完全的菜鸟@threejs），我想出了使用画布作为精灵的绝妙技术（这是该死的 rad ）。这是我使用的代码

/// 2D REALM

var canvas = document.createElement('canvas'),
        context = canvas.getContext('2d'),
        metrics = null,
        textHeight = 100,
        textWidth = 0,
        actualFontSize = 2;

        context.fillStyle = '#FF0000';
        var size = 250;
          canvas.width = size;
          canvas.height = size;

function addText(position, text) {
  context.textAlign = 'center';
  context.font = '24px Arial';
  context.fillText("Game Over", size/2, size/2);

  var texture = new THREE.Texture(canvas);
  texture.needsUpdate = true;
  var material = new THREE.SpriteMaterial( { map: texture, color: 0x333333, fog: false } );
  var …