相关疑难解决方法(0)

我正在尝试使用javascript和canvas元素在客户端创建缩略图图像,但是当我缩小图像时,它看起来很糟糕.它看起来好像在photoshop中缩小了,重新采样设置为"最近邻"而不是Bicubic.我知道可以让它看起来正确,因为这个网站也可以使用画布做得很好.我尝试使用他们所做的相同代码,如"[Source]"链接所示,但它仍然看起来很糟糕.有什么我缺少的东西,一些需要设置的设置或什么？

编辑:

我正在尝试调整jpg的大小.我已经尝试在链接网站和photoshop中调整相同的jpg,并且在缩小尺寸时看起来很好.

这是相关代码:

reader.onloadend = function(e)
{
    var img = new Image();
    var ctx = canvas.getContext("2d");
    var canvasCopy = document.createElement("canvas");
    var copyContext = canvasCopy.getContext("2d");

    img.onload = function()
    {
        var ratio = 1;

        if(img.width > maxWidth)
            ratio = maxWidth / img.width;
        else if(img.height > maxHeight)
            ratio = maxHeight / img.height;

        canvasCopy.width = img.width;
        canvasCopy.height = img.height;
        copyContext.drawImage(img, 0, 0);

        canvas.width = img.width * ratio;
        canvas.height = img.height * ratio;
        ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height); …

我使用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 …

请看下面的例子:

http://jsfiddle.net/MLGr4/47/

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

img = new Image();
img.onload = function(){
    canvas.width = 400;
    canvas.height = 150;
    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 150);
}
img.src = "http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg";

如您所见,虽然据说drawImage会自动应用抗锯齿,但图像不会消除锯齿.我尝试了很多不同的方法,但似乎没有用.你能告诉我如何获得抗锯齿图像吗？谢谢.

如何为MS Edge使用bicubic制作图像缩放？是否有一些可以改变行为的CSS或类似物.

见此页:http://duttongarage.com/Race-Workshop~317

在右边有两个带有纹理背景的图像,你可以非常清楚地看到奇怪的文物

左侧是Chrome,右侧是MS Edge.正如你所看到的那样,调整大小是最近邻或线性的,而不是双三次,有一些奇怪的莫尔效应.

另一个更典型的例子:

Microsoft Edge位于顶部,Chrome位于底部.请注意像素化,就像我对过去十年的浏览器所期望的那样.

我正在尝试在画布上绘制图像,然后使用css将画布调整到一定的大小.事实证明,许多浏览器都没有很好地缩放画布.OS X上的Firefox似乎是最差的之一,但我没有测试过很多.以下是问题的最小示例:

HTML

<img>
<canvas></canvas>

CSS

img, canvas {
  width: 125px;
}

JS

var image = document.getElementsByTagName('img')[0],
    canvas = document.getElementsByTagName('canvas')[0];

image.onload = function() {
  canvas.width = image.width;
  canvas.height = image.height;

  var context = canvas.getContext('2d');
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
}

image.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Helvetica_Neue_typeface_weights.svg/783px-Helvetica_Neue_typeface_weights.svg.png"

在codepen中运行:http://codepen.io/ford/pen/GgMzJd

这是Firefox中的结果(来自视网膜显示屏的截图):

发生了什么事是,无论是<img>并<canvas>开始在相同的尺寸和用CSS被缩小浏览器(图像宽度为783px).显然,浏览器会对其进行一些很好的平滑/插值<img>,但不会<canvas>.

我试过了:

• image-rendering,但默认似乎已经是我想要的.
• Hacky解决方案,例如逐步缩放图像,但这没有帮助:http://codepen.io/ford/pen/emGxrd.
• Context2D.imageSmoothingEnabled,但再次,默认描述我想要的.

如何使右侧的图像看起来像左侧的图像？最好是尽可能少的代码(例如,我宁愿不自己实现双三次插值).

我正在使用javascript函数输入图像.

这是我的HTML:

<input type="file" name="filUpload" id="filUpload" onclick="" onchange="showimagepreview(this)">
<br />
<div id="before">
<img id="imgprvw" alt="" class="img-thumbnail" style="width: 250px; height: 250px;" />

这是我的JavaScript:

function showimagepreview(input) { //image preview after select image
  if (input.files && input.files[0]) {
    var filerdr = new FileReader();
    filerdr.onload = function(e) {
      url = e.target.result;
      image = url;
      $('#imgprvw').attr('src', url);
      //console.log(url);

      //$('#imgprvw').attr('src', e.target.result);
      //url = e.target.result;
      //$("#imgpath").val(url);
    }
    filerdr.readAsDataURL(input.files[0]);
  }
}

此代码将图像转换为咬合数组,我需要使用该咬合数组调整图像大小.有没有可行的方法来做到这一点.

我将该二进制数组传递给Web服务.我的图像尺寸太高,需要很长时间,这就是我需要转换的原因.

我们提供类似于imagemagick的浏览器页面JavaScript，可帮助人们将图像转换为不同的大小和格式。但是，它需要网页交互。

是否可以让人们自动进行这种交互-无需将图像发送到我们的服务器（从而增加了带宽成本和服务器负载），并且不需要用户下载无头的浏览器库（如Puppeteer）？

例如，以下流程是否可能：

1. 通过命令行（或本地脚本）打开Chrome到特定网页。
2. 将图像上传到该网页。
3. 在网页上调用脚本。
4. 接收脚本结果并允许本地操作。

可以启动Chrome，但尚不清楚启动后是否可以与特定的浏览器窗口进行交互。

调整上传到 Blazor 客户端页面的图像大小的最佳方法是什么。这些是真正简单的图像，我只想拥有一致的宽度，并希望使用 System.Drawing，但这在 Web 程序集中不可用。我希望在客户端上执行此操作，但最好将其发送到 Controller 进行处理吗？

谢谢，迈克

我很难理解如何使用canvasJavaScript 中的元素。

我正在实现一个调整大小功能，用户可以在其中调整lightbox. 该lightbox会推出之后预览图像被点击。在lightbox元素内部，除了图像本身，还有宽度和高度两个输入字段。

目标是以base64格式生成原始图像的副本，并将其连同给定的宽度和高度作为查询参数发送到服务器，并让服务器端执行调整大小操作（我在后端使用 PHP）甚至更好的是，让 JavaScript 在前端进行调整大小操作，并返回新的调整大小的图像，准备通过ajax.

问题是我不完全知道如何处理动态创建的canvas元素以及如何使用它在前端调整我的图像大小。

下面是我迄今为止尝试过的结果不佳的方法：

index.html （省略了基本的 HTML 元素和灯箱效果）

<!-- input fields for width and height -->
<div class="container">
    <div class="form-inline">
        <div class="form-group">
            <input type="number" class="form-control" id="width" placeholder="px">
        </div>
        <div class="form-group">
            <input type="number" class="form-control" id="height" placeholder="px">
        </div>
        <button id="resize" type="button" class="btn btn-primary">Resize</button>
    </div>
</div>

<!-- preview image -->
<div class="container">
    <img src="img/img1.jpg" alt="" class="img-responsive" id="preview">
</div>

<script type="text/javascript">
    button = document.getElementById("resize"); …