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

请看下面的例子:

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会自动应用抗锯齿,但图像不会消除锯齿.我尝试了很多不同的方法,但似乎没有用.你能告诉我如何获得抗锯齿图像吗？谢谢.

我试图用帆布调整一些图像的大小,但我对如何平滑它们毫无头绪.在Photoshop,浏览器等..他们使用了一些算法(例如双三次,双线性)但我不知道它们是否内置于画布中.

这是我的小提琴:http://jsfiddle.net/EWupT/

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width=300
canvas.height=234
ctx.drawImage(img, 0, 0, 300, 234);
document.body.appendChild(canvas);

第一个是普通的已调整大小的图像标记,第二个是画布.请注意画布如何不那么平滑.我怎样才能实现'平滑'？

左边是原始的PNG,右边是使用<img width和减少到大约一半原始尺寸的版本height.请参见[已删除链接].

为什么调整后的图像在Firefox中看起来如此模糊.在不更改图像文件的情况下,我能做些什么吗？如果图像包含大量的数学或文本,则模糊性特别令人讨厌.

在您说这是一个现有问题之前,或者我需要使用的只是ms-interpolation-mode,或者我只需要在服务器上预先缩放版本的图像并提供服务,请阅读问题.请.这些都不合适.

我有一个应用程序,在所有现代浏览器的浏览器中使用HTML5画布绘制一个非常大的图像.我从画布中取出一个图像并将其显示出来(在屏幕上缩小了相当大的尺寸).无论是Windows还是Mac,Chrome,Firefox,Safari或Opera上的缩小图像都可以正常显示.然而,IE看起来非常可怕,即使我没有在旧版本的IE上测试这个(如IE-interpolation模式工作的IE 7),但仅限于IE 9,10和11.

为什么他们不能平滑缩小图像？我以为IE的后续版本可以做到这一点？

这是我的图像的截图,保存为PNG文件,并在IE 11中加载.请注意,即使我正在做的只是查看PNG,它也会被破坏.我的软件和我的网页完全不在这里.这只是IE 11显示的PNG文件.

我是否必须在画布上进行某种调整才能为IE制作缩小版本的版本,因为它们无法处理市场上其他浏览器轻松处理的图像缩放？有没有什么我可以通过CSS打开使这看起来更好？

这是与生成的图像之一的直接链接:http://i.imgur.com/T9wgHSo.png.告诉我如何在IE 9,10和11的页面中以相当小的(例如0.25x)大小使其看起来很好.

有没有人知道任何压缩JPG,GIF和PNG文件的免费脚本？

我有一个1836 x 3264的图像我想drawImage()画布并调整大小为739 x 1162.

阅读完文档后,我认为可以通过以下方式完成:

ctx.drawImage(image, 0, 0, 739, 1162);

我也尝试过:

ctx.drawImage(image, 0, 0, 1836, 3264, 0, 0, 739, 1162);

两者都只显示完整图像的一小部分而不是缩小它.

如何通过值调整大小从1836 x 3264 - > 739 x 1162？

根据此页面,任何DOM元素都可以调整大小:http://jqueryui.com/demos/resizable/

但是,似乎这对CANVAS元素不起作用.可能？

我正在加载大图像并让浏览器调整大小.我明确地设定了尺寸.

<img src="http://example.com/image1.jpg" width="240" height="360"/>

页面上有很多这样的图像.滚动非常缓慢且不连贯.滚动时,chrome中的事件时间轴看起来像这样:

Paint

* Image decode (JPEG)
* Image resize (non-cached)
* Image decode (JPEG)
* Image resize (non-cached)
* ...

Paint

* Image resize (cached)
* Image resize (cached)
* Image resize (cached)
* Image resize (cached)

Paint

* Image decode (JPEG)
* Image resize (non-cached)
* Image decode (JPEG)
* Image resize (non-cached)
* ....

Paint

* Image resize (non-cached)
* Image resize (non-cached)
* Image resize (non-cached)
* Image resize (non-cached)

Paint

* …

我目前正在创建一个使用Phonegap(Cordova)相机插件的移动应用程序.它正确捕获图像并将其显示在我想要的位置,但我似乎无法设置targetWidth和targetHeight选项,如上所述.

targetWidth:用于缩放图像的宽度(以像素为单位).必须与targetHeight一起使用.纵横比保持不变.(数)

targetHeight:以像素为单位的高度,用于缩放图像.必须与targetWidth一起使用.纵横比保持不变.(数)

据我了解,这将改变输出的图像宽度和高度.但是,他们似乎没有工作.

我在研究解决方案时发现的一个建议是说使用可选参数allowEdit.在此我可以让用户选择预设的平方图像.然而,这似乎也不起作用.

请参阅下面的代码以供参考.

camera: function() {
    //Fire up the camera!
    navigator.camera.getPicture(onSuccess, onFail, {
        destinationType: Camera.DestinationType.DATA_URL,
        allowEdit: true,
        targetWidth: 512,
        targetHeight: 512
    });
},

这两种尝试都没有按照我的意愿取得成功; 捕获图像的固定宽度和高度.

如何在此图像上设置图像宽度和高度？