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