Cordova iOS - 画布图像分辨率答案

【问题标题】：Cordova iOS - CANVAS image resolutionCordova iOS - 画布图像分辨率
【发布时间】：2013-12-29 14:19:38
【问题描述】：

我有一个应用程序，用户可以在其中拍摄或选择一张图片，然后使用 Cordova Camera API 将其显示在 canvas（Cordova 3、iPhone4S）上。

现在我遇到了图像尺寸问题。 iPhone 截图、风景照片、人像照片都有不同的分辨率和大小。在我的画布中，图像经常被剪切或拉伸。

我之前尝试过使用图像标签。那效果很好。但我在使用 canvas 时遇到问题。

目前有

var canvas = document.getElementById("myCanvas");
canvas.width = 640;
canvas.height = 960;
canvas.style.width = "100%";
canvas.style.height = "100%";

如果我在画布中加载屏幕截图，它会起作用，但如果我在画布中加载照片，它会被剪切。

这是从 iPhone 的照片库加载的两张照片示例（纵向和横向）。

怎么样：

应该如何：

（底部的那个）

怎么样：

应该如何：

知道如何让画布以各种尺寸/分辨率显示完整图像吗？

谢谢。

【问题讨论】：

请同时显示您使用drawImage() 的代码。我假设您正在尝试实现某些目标like this?
canvas.drawImage(img, 0, 0); 但我已经设法找到解决方案。我现在在 camera.getPicture 函数中使用 targetWidth 和 targetHeight 参数。但是我现在有另一个问题，关于获取点击的像素颜色（见下文）。我不知道我是否应该为此提出一个新问题。
一个新问题可能最适合这个问题，因为它与原始问题不同。

标签： javascript image canvas cordova resolution

【解决方案1】：

我自己想通了。我刚刚在 camera.getPicture 函数中添加了 targetWidth 和 targetHeight

var canvas = document.getElementById("myCanvas");
canvas.width = 600;
canvas.height = 960;
canvas.style.width = "300px";
canvas.style.height = "480px";

相机功能

navigator.camera.getPicture(funcSuccess, funcError, { quality: 100, targetWidth: 600, targetHeight: 960, destinationType: destinationType.FILE_URI, sourceType: source });

在成功函数中：

canvas.drawImage(img, 0, 0);

无论如何...因为我使用不同的 Caves.width/height 和 canvas.style.with/height（针对视网膜优化）我现在遇到了另一个问题。我的获取点击像素颜色的功能无法正常工作。

我在我的画布点击事件中使用这个（第一个答案）：Get pixel color from canvas, on mouseover。但是当使用视网膜尺寸时，它总是返回错误的颜色。就像它读取的像素期望图像是 600x960 而不是 600x960 像素画布中的 300x480 一样。

有人有什么想法吗？

【讨论】：