我正在制作一个图像上传页面,使用客户端图像调整(使用HTML5画布)。一切都正常工作,但问题在于图像质量不是很好。
这里是一个(正在进行中的)照片库链接,其中包含我的调整/上传代码生成的图像。这里是链接 你能看到我所说的低质量吗?许多锯齿边缘,特别是在缩略图上。有什么想法可以解决这个问题吗?
这是我生成缩略图的JavaScript代码:
这里是一个(正在进行中的)照片库链接,其中包含我的调整/上传代码生成的图像。这里是链接 你能看到我所说的低质量吗?许多锯齿边缘,特别是在缩略图上。有什么想法可以解决这个问题吗?
这是我生成缩略图的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,0,0,width,height];
}