我对数据 uri 的图像损坏了图像

My image to data-uri is damages the image

我有这张图片:

使用此代码(在图像的每个函数中):

    var image = new Image();
    var canvas = document.createElement("canvas"),
      canvasContext = canvas.getContext("2d");
    image.src = $(this).attr("src");
    canvas.width = image.width;
    canvas.height = image.height;
    canvasContext.drawImage(image, 0, 0, image.width, image.height);
    var dataURL = canvas.toDataURL("image/jpeg");

我明白了:

data:image/jpeg;base64,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

但这很糟糕,如果我在线转换它,我得到:

Much better quality

这里的品质堪称完美。我的代码有什么问题?我的数据 uri 太短了。

新: 我添加了 var dataURL = canvas.toDataURL("image/jpeg", 1.0); 品质,它在 Chrome 中完美运行。但在 IE 中它更好,但仍然很糟糕。 http://ctrlv.cz/shots/2015/02/16/lx1J.png 左:Chrome,右:IE 11。这里是如何在 IE 11 中改进它的方法?

根据HTMLCanvasElement.toDataURLMDN documentation,你可以给第二个控制质量的参数,一个介于01之间的数字。

所以尝试:

var dataURL = canvas.toDataURL("image/jpeg", 1.0);

并查看质量是否对您来说足够好,但由于 1.0 等于 "full" 质量,我希望它看起来与您在 canvas 中看到的完全一样。

注意:如果第二个参数不是01之间的Number,则浏览器特定的默认值将用于质量。我不确定任何浏览器的值是多少,但根据 this question Chrome 和 Firefox 都使用 0.92.