使用 HTML5 Canvas 调整图像大小 - 失真

Question

我正在开发一个 Webworks 应用程序，我需要调整图像大小以上传到服务器。我正在使用 JQuery Mobile，该应用程序需要在 OS6 及更高版本上运行。用户可以使用相机或从设备中选择图像。相关代码如下：

function handleOpenedFile(fullPath, blobData) {
            var image = new Image();
            image.src = fullPath; //path to image
            image.onload = function () {
                var resized = resizeMe(image); // send it to canvas
                //Do stuff with the DataURL returned from resizeMe()
            };
    }

function resizeMe(img) {

        var canvas = document.createElement('canvas');
        var width = Math.round(img.width / 2);
        var height = Math.round(img.height / 2);
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);
        return canvas.toDataURL("image/jpeg", 0.8);
    }

然后我使用 DataURL 中的 Base64 来上传到服务器。图像被缩放，但它们出现乱码。部分图像四处移动，颜色变得奇怪。如果您在画布上绘制而不进行任何缩放，图像就会出现乱码，并不是缩放本身会弄乱图像。

我已经广泛搜索了 SO 和 BB Dev 论坛，但没有成功。

有没有人知道如何解决这个问题或有其他建议来调整图片大小以供上传？

Answer 1

我已经设法解决了这个问题，尽管我不知道它为什么起作用。简单替换

return canvas.toDataURL("image/jpeg", 0.8);

与

return canvas.toDataURL();

这将返回一个 base64 编码的字符串，其中包含正确调整大小的图像，没有任何奇怪的视觉伪影。

Answer 2

无法帮助 JQuery 移动、在 OS6 上运行的应用程序或在 DataURL 中使用 Base64 上传到服务器，但您的函数 resizeMe 的代码不会将画布放在 HTML 文档中的任何位置。

下面添加了必填行。

函数 resizeMe(img) {

    var canvas = document.createElement('canvas');
    var width = Math.round(img.width / 2);
    var height = Math.round(img.height / 2);
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);   //append canvas child to body <<<<-----------
    ctx.drawImage(img, 0, 0, width, height);
    return canvas.toDataURL("image/jpeg", 0.8);
}

如果在下面的 jsfiddle 中遗漏了这条额外的行，您将根本看不到任何图像，使用它您会得到正确形成的缩放图像。小提琴适用于我的安卓智能手机。

http://jsfiddle.net/FeALQ/