1

我正在开发一个 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 论坛，但没有运气。

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

4

2 回答 2

1

我已经设法解决了这个问题，尽管它的工作原理让我难以理解。只需更换

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

和

return canvas.toDataURL();

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

于 2013-07-22T09:56:00.457 回答
0

无法帮助 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/

于 2013-07-19T16:50:51.067 回答