Buildfire -在小部件上保存图像

Question

我试图允许用户通过小部件保存图像。我使用的函数如下：

buildfire.services.camera.getPicture({},
  function (err, imageData) {
    if (imageData) {
      document.getElementById("imgPic").src = imageData;
    } else {
      console.log("no image selected: " + err);
    }
  }
);

imageData从用户的电话中生成一个本地链接，类似于：

file:///storage/emulated/0/Android/data/com.buildfire.previewer/cache/1503099575571.jpg

如果我在调整大小的(buildfire.imageLib.resizeImage)中运行它，就会得到这样的结果：

http://czi3m2qn.cloudimg.io/s/width/1600/file:///storage/emulated/0/Android/data/com.buildfire.previewer/cache/1503104990327.jpg

不确定这个链接是否安全，或者它以后是否被收集到垃圾。

我如何保存相机的实际图像，以建立火灾的数据库？

编辑：

正如您所建议的，我正在使用html2canvas来保存我的图像。我将本地映像加载到DOM中，在尝试保存之前，我将其处理如下：

onrendered: canvas => {
  const img = canvas.toDataURL();
  imageList.push(img);
}

我的图像被转换成画布，然后运行toDataURL()。但是当我试图保存这个非常长的图像数据字符串时，它并没有保存。

​

​

在第一个粉色框中，在我将数据保存到buildfire之前，您可以看到我的数据。在第二个粉色框中，您可以看到buildfire查询的结果。我没有收到错误，但是图像的数据没有保存。为了验证数据是否已成功保存，teal框相互匹配。看起来字符串可能太大了，无法保存？

Answer 1

不幸的是，这是行不通的。这就是为什么。BuildFire使用图像操作服务器在下载图像之前进行这些更改。因此，您将图像操作服务器发送一个url到原始映像，以便它能够提取它并调整它的大小。但是，由于您的映像是本地的，因此我们的image无法访问它。

更好的方法是使用使用html5画布的本地实现。

下面是一个实现示例：

if (localURL) {
    var img = new Image();
    img.src = localURL;
    img.onload = function () {

        if (options.width && !options.height)
            options.height = (img.height * options.width) / img.width;
        else if (!options.width && options.height)
            options.width = (img.width * options.height) / img.width;

        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = options.width;
        canvas.height = options.height;


        ctx.drawImage(img, 0, 0, options.width, options.height);

        callback(null, canvas.toDataURL());
    };
    img.onerror = function () {
        callback(null, buildfire.imageLib.resizeImage(url, options));
    }
}

crop实现比调整大小更复杂。但是有一些库做得很好，比如SmartCrop.js https://github.com/jwagner/smartcrop.js/。

希望这能帮上忙