我正在开发一个跨平台的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上测试过
谁能帮帮我吗!!!!
输入图像是:
解决方法
通过修改以下链接中提供的答案,我能够为我的案例创建一个解决方法,如下所示:
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); }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。