Buildfire - 在小部件上保存图像

Posted 2023-03-14

【中文标题】Buildfire - 在小部件上保存图像

【英文标题】：Buildfire - Save an image on the widget

【发布时间】：2017-08-19 01:17:01

【问题描述】：

我正在尝试允许用户通过小部件保存图像。我正在使用以下功能：

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 查询的结果。我没有收到错误消息，但 图片 的数据没有保存。为了验证数据是否已成功保存，蓝绿色框相互匹配。字符串似乎太大而无法保存？

【问题讨论】：

只是为了清楚。处理完图像并将其转换为 base64 后，您希望将其发送到 BuildFire UserData 或 PublicData 进行保存吗？

@Daniel_Madain publicData。 buildfire.publicData.update() 是我使用的确切

【参考方案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/

希望对你有帮助

【讨论】：

你能看看我的编辑吗？似乎 dataToURL() 的结果太大，buildfire 无法保存

我还尝试将 dataURL 变成一个 blob。那也没有保存

再次，您是要保存图像还是仅显示它？如果您从widget 将其保存在datastore 中，则不能，因为它在小部件端是只读的。如果您使用userData 或publicData，那么您对大小有一些限制。如果您将新图像显示为新的 src，请确保它以 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...

之类的内容开头

我回复了你在我的帖子上发表的评论，我正在使用 publicData 试图保存。我发布的图像显示我试图保存.. 我看到其他帖子谈论将 dataUrl 保存到 Mongo，所以看起来应该是可能的，因为你们是基于 Mongo 的。如果我在 dataUrl 上运行 .length ，它的长度超过 140,000 个字符。