相关疑难解决方法(0)

调整HTML5画布中的图像大小

我正在尝试使用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); …
Run Code Online (Sandbox Code Playgroud)

javascript html5 canvas image-resizing

310
推荐指数
9
解决办法
27万
查看次数

标签 统计

canvas ×1

html5 ×1

image-resizing ×1

javascript ×1