Question

我正在用sencha拍照并通过商店将它们添加到列表中。我以全分辨率拍摄照片（因为我必须在之后上传它们）并用这样的TPL显示它们：

<img src="{value}" width='120' height='120' />

照片代码：

var cameraOptions = {
    quality: 100,
    destinationType: Camera.DestinationType.FILE_URI,
};

navigator.camera.getPicture(successCallback, failCallback, cameraOptions);

当我用图片更新列表时，它变得慢慢。，当我拍摄第3张照片时应用程序开始崩溃......

我已经测试过如果我只在列表中显示每张照片的标题并且它完美地运行，我认为问题在于每张大照片的img标签中的调整大小......

有没有办法从照片中创建一个缩略图，以便在列表中显示？或者我该如何解决这个问题？

谢谢！

Answer 1

我已经通过在图像模型中创建一个缩略图属性来解决它，该属性包含使用此代码调整大小的图像的base64字符串表示（缩略图）：

 var PREVIEW_WIDTH = 120;  
 var PREVIEW_HEIGHT = 120;  

 var img = new Image();  
 img.src = imageUri;  

 img.onload = function ()  
 {  
   var canvas = document.createElement("canvas");  
   canvas.width = PREVIEW_WIDTH;  
   canvas.height = PREVIEW_HEIGHT;  

   var ctx = canvas.getContext("2d");  
   ctx.drawImage(img, 0, 0, PREVIEW_WIDTH, PREVIEW_HEIGHT);  

   var thumbnail = canvas.toDataURL("image/" + _formatManager.getString());  
   // thumbnail contain the base64 resized image
 };

Source

Phonegap 3 + Sencha Touch 2.3.1 +照片图库

1 个答案: