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

不确定此链接是否安全，或者以后是否会被垃圾收集..

如何将相机拍摄的实际图像保存到 buildfire 的数据库中？

编辑：

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

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

我的图像变成了画布，然后我运行 toDataURL()。但是当我尝试保存这个很长的图像数据字符串时，它并没有保存。

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

Answer 1

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

更好的方法是使用 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.jshttps://github.com/jwagner/smartcrop.js/

希望对你有帮助