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);
}

我的图片变成了画布，然后我跑到了dataURL（）。但是当我尝试保存这个非常长的图像数据字符串时，它不会保存。

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

Answer 1

不幸的是，这不会奏效。这就是原因。 BuildFire使用图像处理服务器在下载图像之前进行这些更改。因此，您将Image Manipulation服务器的URL发送到Raw图像，以便它可以拉动它并调整它的大小。但是，由于您的图像是本地图像，因此我们的图像服务器无法访问它。

更好的方法是使用html5 canvas

的本地实现

这是一个示例实现：

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/

希望这会有所帮助

Buildfire - 在窗口小部件上保存图像

1 个答案: