前端将⽹页保存为图⽚，再发送给⽤户的流程
第⼀步：将⽹页图⽚保存为图⽚
saveQrcode(){
this.loadingFlag =true;
window.pageYOffset =0;
document.documentElement.scrollTop =0;
document.body.scrollTop =0;
//你想要⽣成的图⽚的最外层div加⼀个id=qrCodeContainer
let htmlDom = ElementById("qrCodeContainer");
html2canvas(htmlDom,{
backgroundColor:null,// null 表⽰设置背景为透明⾊
width: htmlDom.clientWidth,//dom 原始宽度
height: htmlDom.clientHeight,
scrollY:0,
日本出国留学的条件scrollX:0,
allowTaint:false,
useCORS:true,// 解决需要⽣成的html中有img，⽣成的图⽚不显⽰
}).then((canvas)=>{
//imgUrl是⽣成的base64，放到浏览器可直接查看图⽚，不过特别长，若调接⼝的时候传给后端，会有卡顿，所以将base64转成file⽂件const imgUrl = DataURL("image/jpeg");
诸葛亮草船借箭歇后语//把base64转成file⽂件
let picFile =this.dataURLtoBlob(imgUrl,"图⽚");
// 调⽤cos上传
this.upload(picFile,"medAdvice/").then((res)=>{
//调接⼝获取MediaId，传参是图⽚url
});
});
},
将base64转换为blob（上⾯代码⾥要⽤到）
dataURLtoBlob(dataurl, fileName){
var arr = dataurl.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr =atob(arr[1]),
n = bstr.length,
u8arr =new Uint8Array(n);
while(n--){
u8arr[n]= bstr.charCodeAt(n);
}
var fileBlob =new Blob([u8arr],{ type: mime });
//将blob转换为file
fileBlob.lastModifiedDate =new Date();
fileBlob.name = fileName;
return fileBlob;
},
图⽚上传到COS上
upload(e,cosFilePath){
let _this =this;
return new Promise((resolve, reject)=>{
var file = e;
if(!file)return;// 分⽚上传⽂件
let slotImgName =md5(file.name +new Date().getTime());
_s.putObject(
{
京东自营店Bucket: _sKeyJson.bucket,
Region: _ion,
嗜睡的8个危险征兆
Key: cosFilePath + slotImgName,
Body: file,
onProgress:function(progressData, callback){
logger.log(JSON.stringify(progressData));
}
},
function(err, data){
//下⾯这个⽅法是vue中获取你上传成功后的Url地址，别⼈可以通过这个地址来查看，下载你上传的⽂件
_ObjectUrl(
{
Key: cosFilePath + slotImgName,
Bucket: _sKeyJson.bucket,
Sign:false,
Region: _ion
},
function(err, data){
resolve(data);
reject(err);
}
梦见站在悬崖边上);
}
)
});
};
第⼆步：⽤调后端接⼝，传参是图⽚（看后端需要什么格式，需要base64格式则传上⾯的imgUrl，若需要file⽂件格式，则传上⾯的picFile），获取mediaId。
getMediaId(url){
let needData ={
fileStream: url,//图⽚URL
};
BaseHttpS.uploadFileToWeChat(needData).then((res)=>{
if(de =="0000000"){
console.log('前端拿到的mediaId：',res.data.data)
//调发送图⽚接⼝，传参是mediaId，发送给⽤户
this.sendQRcode(res.data.data);
}else{
this.loadingFlag =false;
this.$toast.fail(ssage);
}
});
},
第三步：调发企业API，使⽤mediaId把图⽚发送给⽤户
sendQRcode(mediaId){
var local = location.href.split("#")[0];// 获取页⾯url
let params ={
任务栏图标
url: local,
};
BaseHttpS.qiyeWeiXinUrlSignature(params).then((res)=>{
this.loadingFlag =false;
let sdkConfigInfo = res.data.data;
let sdkConfigInfo = res.data.data;
beta:true,// 必须这么写，否则wx.invoke调⽤形式的jsapi会有问题
debug:false,// 开启调试模式，调⽤的所有api的返回值会在客户端alert出来，若要查看传⼊的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: pid,// 必填，企业的corpID
timestamp: sdkConfigInfo.timestamp,// 必填，⽣成签名的时间戳
nonceStr: Str,// 必填，⽣成签名的随机串
signature: sdkConfigInfo.signature,// 必填，签名，见附录1
jsApiList:[
"getCurExternalChat",
"sendChatMessage",
"openEnterpriseChat",
],// 必填，需要使⽤的JS接⼝列表，所有JS接⼝列表见附录2
openTagList:["wx-open-launch-weapp"],// 可选，需要使⽤的开放标签列表，例如['wx-open-launch-app']
success:function(res){
// 回调
},
fail:function(res){
Msg.indexOf("function not exist")>-1){
_this.$toast.fail("版本过低请升级");
}
},
});
wx.agentConfig({
corpid: pid,// 必填，企业的corpID
agentid: sdkConfigInfo.agentid,// 必填，企业的应⽤id （e.g. 1000247）
timestamp: sdkConfigInfo.timestamp,// 必填，⽣成签名的时间戳
nonceStr: Str,// 必填，⽣成签名的随机串
signature: sdkConfigInfo.signatureAgent,// 必填，签名，见附录1
jsApiList:[
"getCurExternalChat",
"sendChatMessage",
"openEnterpriseChat",
"getCurExternalContact",
],// 必填，需要使⽤的JS接⼝列表，所有JS接⼝列表见附录2
success:function(res){
// 跳转到企业的对话框
wx.invoke(
"sendChatMessage",
{
msgtype:"image",//消息类型，必填
image:{
mediaid: mediaId,//图⽚的素材id
},
},
function(res){
console.log("sendChatMessage=="+ res);
_msg =="sendChatMessage:ok"){
//发送成功
}
console.log(res);
}
);
},
fail:function(res){
Msg.indexOf("function not exist")>-1){
_this.$toast.fail("版本过低请升级");
}
},
});
});
<(function(res){
console.log(res,"error - config");
});
}); }); },
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论