在cordova ios iphone中转换为base64时图像缩小答案

【问题标题】：Image shrinks on converting to base64 in cordova ios iphone在cordova ios iphone中转换为base64时图像缩小
【发布时间】：2015-04-09 07:32:03
【问题描述】：

我正在开发一个跨平台的 cordova 项目，该项目涉及将图像上传到服务器并在网站上显示它们。从手机内存中获取resize后的图片并获取base64数据的代码如下：

var image = new Image();
image.src = URL;
image.onload = function () {

var canvas = document.createElement("canvas");
var img_width = this.width;
var img_height = this.height;
canvas.width =1000;
canvas.height = 1000;

var w=(1000/img_width);
var h=(1000/img_height);

var ctx = canvas.getContext("2d");
ctx.scale(w,h);
ctx.drawImage(this,0,0);                

var dataURL = canvas.toDataURL("image/png",1);

这里的问题是，图像宽度设置为画布宽度但高度不是。此外，该代码在 android 设备和 ipad 上完美运行，但问题仅出现在 iphone 上。

在 Iphone 4s 和 5c 上测试谁能帮帮我！！！！

输入图像为：

画布上的图像输出（作为png文件）是：

【问题讨论】：

标签： ios iphone cordova html5-canvas base64

【解决方案1】：

通过将以下链接中提供的答案修改为我的需求，我能够为我的问题创建解决方法，如下所示：

When scaling and drawing an image to canvas in iOS Safari, width is correct but height is squished

我稍微调整了代码，现在看起来像这样：

    var image = new Image();
    image.src = URL;
    image.onload = function () {
        var canvas = document.createElement("canvas");
        var img_width = image.width;
        var img_height = image.height;


        canvas.width = 600;
        canvas.height = 600;
        var ctx = canvas.getContext("2d");


        var imgRatio;
        if (image.width > image.height) {
            imgRatio = image.width / image.height;
        } else {
            imgRatio = image.height / image.width;
        }


        var canRatio = canvas.width / canvas.height;

        var scaledWidth = image.width * (canvas.height / image.height);
        var scaledHeight;
        if (platformVersion.substring(0, 1) < 8) {
            scaledHeight = (image.height * (canvas.width / image.height)) * 2.1;
        } else {
            scaledHeight = (image.height * (canvas.width / image.height));
        }


        if (imgRatio > canRatio) {
            ctx.drawImage(image, 0, 0, canvas.width, scaledHeight);
        } else {
            ctx.drawImage(image, 0, 0, scaledWidth, canvas.height);
        }

        var dataURL = canvas.toDataURL("image/png", 1);
    }

这里取决于手机的操作系统是否来自cordova设备插件，我将一个值乘以缩放高度以补偿挤压效果。

【讨论】：

【解决方案2】：

看起来您获得的 img_height 值比您预期的要大得多。您确定 this 指向正确的位置吗？我假设您想要加载图像的宽度和高度，那么为什么不直接使用 image.width 和 image.height 呢？

【讨论】：

使用固定画布高度的原因是我可以将所有图像压缩到给定的分辨率，从而减小尺寸。谢谢。