在 cordova 中转换为 base64 时图像会缩小 ios iphone
Image shrinks on converting to base64 in cordova ios iphone
我正在从事跨平台 cordova 项目,该项目涉及将图像上传到服务器并在网站上显示它们。从phone内存中获取调整后的图片并获取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);
这里的问题是,图像宽度设置为 canvas 宽度但高度不是。
此外,该代码在 android 设备和 ipad 上完美运行,但问题仅出现在 iphones.
在 Iphone 4s 和 5c 上测试
谁能帮帮我!!!
输入图片为:
canvas(作为 png 文件)上的图像输出是:
看起来您获得的 img_height 价值比您预期的要大得多。您确定 this 指向正确的位置吗?我假设您想要加载的图像的宽度和高度,那么为什么不只使用 image.width 和 image.height?
通过修改以下 link 中提供的答案以满足我的需要,我能够为我的案例创建解决方法,如下所示:
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);
}
这里根据 phone 的 os 是否来自 cordova 设备插件,我将一个值乘以缩放高度以补偿挤压效果。
我正在从事跨平台 cordova 项目,该项目涉及将图像上传到服务器并在网站上显示它们。从phone内存中获取调整后的图片并获取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);
这里的问题是,图像宽度设置为 canvas 宽度但高度不是。 此外,该代码在 android 设备和 ipad 上完美运行,但问题仅出现在 iphones.
在 Iphone 4s 和 5c 上测试 谁能帮帮我!!!
输入图片为:
canvas(作为 png 文件)上的图像输出是:
看起来您获得的 img_height 价值比您预期的要大得多。您确定 this 指向正确的位置吗?我假设您想要加载的图像的宽度和高度,那么为什么不只使用 image.width 和 image.height?
通过修改以下 link 中提供的答案以满足我的需要,我能够为我的案例创建解决方法,如下所示:
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);
}
这里根据 phone 的 os 是否来自 cordova 设备插件,我将一个值乘以缩放高度以补偿挤压效果。