HTML Canvas Img 缩放不知何故不起作用

【问题标题】：HTML Canvas Img Scaling Somehow does Not WorkHTML Canvas Img 缩放不知何故不起作用
【发布时间】：2014-02-09 00:41:01
【问题描述】：

我正在尝试像这样通过 Javascript 缩放本地图像：

function resizeImage(file, func){
    var canvas = document.createElement('canvas');
    var img = new Image();
    img.onload = function () {
        var factor = img.width/800;
        canvas.width = 800;
        canvas.height = img.height/factor;
        ctx = canvas.getContext('2d');
        ctx.scale(factor, factor);
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        func(canvas.toDataURL());
    }
    img.src = file.dataload; //file is an json-Object and dataload a dataURI
}

canvas.toDataURL() 返回的数据不知何故没有以任何方式调整大小。我仔细检查了 canvas.width 和 canvas.height 是正确的计算尺寸。

知道出了什么问题吗？

【问题讨论】：

标签： javascript html image canvas resize

【解决方案1】：

尝试删除 scale() 方法，因为它只会影响绘制到画布位图的内容，而不影响位图本身（drawImage() 在任何情况下都会正确缩放图像）。

您需要使用width 和height 属性来缩放画布。这些是您通过toDataURL() 获得的维度的基础。

var factor = img.width/800;
var scale = 2;
canvas.width = 800 * scale; 
canvas.height = img.height/factor * scale;

如果您需要画布元素在屏幕上保持不变，也可以应用 CSS：

canvas.style.width = 800 + 'px'; 
canvas.style.height = img.height/factor + 'px';

【讨论】：