Question

我正在使用Phonegap来允许用户从他们的库中选择一张照片，然后进行编辑。

当我使用Phonegap检索照片时，我将图像存储在我页面上已有的html img元素中：

  sourceImage = document.getElementById('smallImage');  
  sourceImage.style.display = 'block';  
  sourceImage.src = "data:image/jpeg;base64," + imageData;

当然，当照片加载时，它可能比手机屏幕大，所以我在我的img元素中缩小它。我修改了实际的img元素宽度和高度，而不是css属性，并且图像正确显示在屏幕上（大约288 x 200，而不是原始的1024 x 768）。所以，我的img元素现在正在显示图片（作为预览），当用户前进到下一个屏幕时，图像会在画布上绘制，因此可以修改：

sourceImage.onload = function(){  
    myCanvas.drawImage(sourceImage, 0, 0);  
}

图像绘制正确，但是，它绘制从库中检索到的原始1024 x 768图像，而不是我在页面上显示的实际img元素中的修改后的较小图像。我假设这是因为实际的image.src引用了一个1024 x 768的图像，即使我将它缩小了。

我没有找到任何支持在将图像存储到phonegap之前重新调整图像大小。有没有人知道我可以修改这个图像src大小的方式，以便我能够在将它绘制到画布之前缩小它？（请记住，用户正在从他们的库中即时加载图片。我更喜欢有一个客户端解决方案，但我找不到一个。）

Answer 1

当您在画布上绘制图像时，您可以在画布上指定目标坐标，以及您想要绘制的图像部分，如下所示：

context.drawImage(image, source_x1, source_y1, source_x2, source_y2, dest_x1, dest_y1, dest_x2, dest_y2);

所以你可以用你喜欢的任何尺寸绘制图像......

Phonegap - 画布上的源图像比在html页面上大

1 个答案: