使用HTML5画布调整图像大小-变形

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文档中的任何位置。

在下面添加了必填行。

函数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中错过了这条额外的行，那么您根本不会获得任何图像，并且可以得到正确形成的缩放图像。 小提琴可在我的Andriod智能手机上使用。

http://jsfiddle.net/FeALQ/