在dcloud环境中分享图片


在dcloud环境中的生成图片并分享,解决这个需求也花了我一定的时间,记录一下
注意,分享功能需要引入 plusshare.js 文件
这段代码是将base64图片分享的,如果是需要将自己的网页生成base64代码,可以看这篇文章
/*
* dcloud 环境,保存一个base64图片
* @params base64 base64编码
* @params callback 保存成功的回调(target: 保存后的图片url路径,以"file://"开头; size: 保存后图片的大小,单位为字节(Byte); width: 保存后图片的实际宽度,单位为px; height:  保存后图片的实际高度,单位为px)
* */
const  SaveImage = (base64, callback) => {
  if (!(navigator.userAgent.indexOf("Html5Plus") > -1)) {
    callback.onFail('没有环境, SaveImage 保存图片接口调用失败');
    return;
  }
  let fileName = new Date().getTime()
  let bitmap   = new plus.nativeObj.Bitmap();

  // 从本地加载Bitmap图片
  bitmap.loadBase64Data(base64, function() {
      console.log('加载图片成功');
      //bitmap.save("_doc/shareImage/" + (new Date()).getTime() + ".jpg", {
      bitmap.save("_documents/shareImage/share912_" + fileName + ".jpg", {
        overwrite: true,
        quality: 100
      }, function(i) {
        console.log('保存图片成功:', i);
        //保存相册
        plus.gallery.save("_documents/shareImage/share912_" + fileName + ".jpg", function() {
          console.log('分享图片保存相册成功');
        }, function() {
          console.log('分享图片保存相册失败');
        });

        bitmap.clear();

        if (callback.onScuess) {
          callback.onScuess(i)
        }
      }, function(e) {
        console.log('保存图片失败:', e);
        if (callback.onFail) {
          callback.onFail(e)
        }
      });
    },
    function(e) {
      console.log('加载图片失败:', e);
      if (callback.onFail) {
        callback.onFail(e)
      }
    });
};
/*
* 保存后分享
*/
document.getElementById("btnTest").addEventListener("click", function () {
  SaveImage('base64Url', {
      onScuess: function (i) {
        console.log("保存成功:", i.target)
        if (navigator.userAgent.indexOf("Html5Plus") > -1) {
          //5+ 原生分享
          window.plusShare({
            type: 'image',
            pictures: [i.target],
          }, function () {
            alert('分享成功')
          });
        } else {
          //原有wap分享实现
          alert('没有环境')
        }
      },
      onFail: function (e) {
        console.log("保存失败:", e)
        Indicator.close();
      }
    }
  );
}
)

plusshare.js

(function () {
    var plusReady = function (callback) {
        if (window.plus) {
            callback();
        } else {
            document.addEventListener('plusready', callback);
        }
    }
    var shareServices = {};
    var init = function () {
        plus.share.getServices(function (services) {
            for (var i = 0, len = services.length; i < len; i++) {
                shareServices[services[i].id] = services[i];
            }
        });
    };
    var isWechatInstalled = function () {
        return plus.runtime.isApplicationExist && plus.runtime.isApplicationExist({
            pname: 'com.tencent.mm',
            action: 'weixin://'
        });
    };

    function share(id, msg, callback) {
        var service = shareServices[id];
        if (!service) {
            callback && callback(false);
            return;
        }
        var _share = function () {
            service.send(msg, function () {
                plus.nativeUI.toast("分享到\"" + service.description + "\"成功!");
                callback && callback(true);
            }, function (e) {
                plus.nativeUI.toast("分享到\"" + service.description + "\"失败!");
                callback && callback(false);
            })
        };
        if (service.authenticated) {
            _share(service, msg, callback);
        } else {
            service.authorize(function () {
                _share(service, msg, callback);
            }, function (e) {
                console.log("认证授权失败");
                callback && callback(false);
            })
        }
    };

    function openSystem(msg, callback) {
        if (plus.share.sendWithSystem) {
            plus.share.sendWithSystem(msg, function () {
                //TODO 系统分享暂不支持回调
                //callback && callback(true);
            }, function () {
                //TODO 系统分享暂不支持回调
                //callback && callback(false);
            });
        } else {
            callback && callback(false);
        }
    }
    var open = function (msg, callback) {
        /**
         *如下情况直接打开系统分享
         * 1、未配置微信分享通道
         * 2、用户手机未安装威胁你
         * 3、360浏览器下
         */

        if (shareServices.weixin && isWechatInstalled() && !/360\sAphone/.test(navigator.userAgent)) {
            plus.nativeUI.actionSheet({
                title: '分享到',
                cancel: "取消",
                buttons: [{
                    title: "微信好友"
                }, {
                    title: "微信朋友圈"
                }]
            }, function (e) {
                var index = e.index;
                switch (index) {
                    case 1: //分享到微信好友
                        msg.extra = {
                            scene: 'WXSceneSession'
                        };
                        share('weixin', msg, callback);
                        break;
                    case 2: //分享到微信朋友圈
                        msg.title = msg.content;
                        msg.extra = {
                            scene: 'WXSceneTimeline'
                        };
                        share('weixin', msg, callback);
                        break;
                    case 3: //更多分享
                        var url = msg.href ? ('( ' + msg.href + ' )') : '';
                        msg.title = msg.title + url;
                        msg.content = msg.content + url;
                        openSystem(msg, callback);
                        break;
                }
            })
        } else {
            //系统分享
            var url = msg.href ? ('( ' + msg.href + ' )') : '';
            msg.title = msg.title + url;
            msg.content = msg.content + url;
            openSystem(msg, callback);
        }
    };
    plusReady(init);
    window.plusShare = open;
})();