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

我正在开发一个跨平台的cordova项目,该项目涉及将图像上传到服务器并在网站上显示.用于从手机内存中获取已调整大小的图像并获取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);                

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

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

在Iphone 4s和5c上测试过
谁能帮帮我吗!!!!

输入图像是:

画布上的图像输出(作为png文件)是:

解决方法

通过修改以下链接中提供的答案,我能够为我的案例创建一个解决方法,如下所示:

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,canvas.width,scaledHeight);
        } else {
            ctx.drawImage(image,scaledWidth,canvas.height);
        }

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

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

相关文章

公司前端界面用的是vue,我要嵌入到Android中生成App第一步:...
Q:我用cordova开发项目,想在app内跳转外部链接,安装了cord...
我正在使用https://github.com/arnesson/cordova-plugin-fir...
一、Cordova的基础点在混合式应用中,我们通过现有的Cordova...
cordova自定义插件注意:存放自定义cordova插件目录不能有空...
一、问题VueAPP中有一个文件下载功能,用了各种方法来实现下...