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 mobile，在OS6上运行的应用程序或在DataURL中使用Base64上传到服务器，但是函数resizeMe的代码不会将画布放在HTML文档中的任何位置。

下面添加了必填项。

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");
    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/

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

2 个答案: