小编Mar*_*ark的帖子

HTML5 - 调整画布大小时图像质量不佳

我正在制作和图像上传页面,客户端图像大小调整(使用HTML5画布).一切正常,但问题是图像质量不是很好.

这是一个指向(正在进行中)照片库的链接,其中包含我调整大小/上传代码生成的图像.

你能看出我质量差的意思吗?锯齿状边缘很多,特别是在缩略图上.有关如何解决此问题的任何想法?

这是我生成缩略图的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 …
Run Code Online (Sandbox Code Playgroud)

javascript html5 canvas

9
推荐指数
2
解决办法
9528
查看次数

标签 统计

canvas ×1

html5 ×1

javascript ×1