深入研究HTML5实现图片压缩上传功能

                        };   
                        image.onload = function() {   
                            var w = image.naturalWidth,   
                                h = image.naturalHeight;   
                            canvas.width = w;   
                            canvas.height = h;   
                            ctx.drawImage(image, 0, 0, w, h, 0, 0, w, h);   
                            fileUpload();   
                        };   
                        reader.readAsDataURL(file);  

这里需要注意的是，canvas将图片画到画布上的时候需要确定canvas的尺寸，同时设定好drawImage的参数，具体如下：

XML/HTML Code复制内容到剪贴板

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);  

dx

源图像的左上角在目标canvas上 X 轴的位置。

dy

源图像的左上角在目标canvas上 Y 轴的位置。

dWidth

在目标canvas上绘制图像的宽度。 允许对绘制的图像进行缩放。 如果不说明， 在绘制时图片宽度不会缩放。

dHeight

 2/10   首页 上一页 1 2 3 4 5 6 下一页 尾页