javascript – HTML5 – 调整画布大小时图像质量差

前端之家收集整理的这篇文章主要介绍了javascript – HTML5 – 调整画布大小时图像质量差前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用客户端图像调整大小(使用 HTML5画布)制作和图像上传页面.一切正常,但问题是图像质量不是很好.

Here is a link到一个(工作进行中)照片库与我的调整大小/上传代码生成的图像.

你能看到我的意思是质量差吗?许多锯齿状边缘,特别是缩略图上.任何想法如何解决这个问题?

这是我生成缩略图的javascript:

img.onload = function()
{
   var canvasWidth = 150;
   var canvasHeight = 150;
   var Rz = resizeCanvasSmall(img,canvasID,canvasWidth,canvasHeight);

   ctx.drawImage(img,Rz[0],Rz[1],Rz[2],Rz[3],Rz[4],Rz[5],Rz[6],Rz[7]);
   dataurl = canvas.toDataURL("image/jpeg",0.8);  // File type and quality (0.0->1.0)
   UploadFile();
}


// Function to resize canvas (for thumbnail images)
// img = image object,canvas = canvas element ID
function resizeCanvasSmall(img,canvas,width,height)
{
var sx; //The x coordinate where to start clipping
var sy; //The y coordinate where to start clipping
var swidth; //The width of the clipped image
var sheight; //The height of the clipped image

var aspectRatio = width / height;

if (img.width > img.height) // If landscape
{
    sheight = img.height;
    swidth = img.height * aspectRatio;
    sy = 0;
    sx = (img.width - swidth) / 2;
}
else //If portrait
{
    swidth = img.width;
    sheight = img.width / aspectRatio;
    sx = 0;
    sy = (img.height - sheight) / 2;
}

document.getElementById(canvas).width = width;
document.getElementById(canvas).height = height;

return [sx,sy,swidth,sheight,height];
}

解决方法

大量调整大小的一般规则是跳过两个权力,所以你有更少的混叠文物,然后只做一个最后的调整大小的其余的方式.例如:如果你需要将1000像素缩放到68px,缩小到500像素,然后是250像素,然后是125像素,然后到68像素.直到最后一个,它总是两个权力.

此外,您应该保留宽高比,否则您会在对角线上获得时髦的别名.如果您需要来自非平方的源图像的方形缩略图,然后将尺寸缩小到尽可能接近目标广场的同时仍然较大的位置,然后将其裁剪在中心. (或更小,并垫).您必须不惜一切代价保留长宽比.

为了获得比我所描述的更好的结果,你必须实现自己的调整大小算法,这将比较慢(因为他们将在JS而不是优化的本机代码).跳到WebGL也可能是一个选项.

原文链接:https://www.f2er.com/js/154727.html

猜你在找的JavaScript相关文章