执子左
- 发布：2019-11-11 11:28
- 更新：2022-02-15 19:05
- 阅读：17371
请问你这个问题是怎么解决的？
-
执子左 (作者)
<canvas canvas-id="playbillCanvas"></canvas>
drawCanvas() {
uni.showLoading({
title: "loading"
});
var _this = this;
var context = uni.createCanvasContext('playbillCanvas');
context.drawImage(_this.areaImage, 0, 0, uni.upx2px(550), uni.upx2px(750));
context.draw(true);
base64ToPath(_this.qr).then(path => {
context.save();
context.drawImage(path, _this.oldImage.imageX, _this.oldImage.imageY, uni.upx2px(_this.image_size), uni.upx2px(
_this.image_size));
context.restore();
context.draw(true);
}).catch(error => {
console.error(error)
})
context.save();
context.setFontSize(uni.upx2px(_this.textFontSize));
context.setFillStyle(_this.textColor);
context.fillText(_this.message, _this.oldText.textX, _this.oldText.textY+10);
context.restore();
context.draw(true);
setTimeout(function() {
uni.canvasToTempFilePath({
canvasId: 'playbillCanvas',
success: function(res) {
uni.hideLoading();
const imageList = [];
imageList.push(res.tempFilePath);
uni.previewImage({
urls: imageList,
indicator: "default",
loop: false
});
},
fail: function() {
uni.hideLoading();
uni.showToast({
title: "生成海报失败！"
});
}
})
}, 2000);
},2020-02-12 10:56
-
-
-
-
</view>
</view>
</view>
</view>
<view class="friend-bnt" @click="clickFriend()">
推荐好友
</view>
<view class="body-friend" v-show="frienType==true">
<view class="body-friend-box">
<view class="body-friend-text">推荐「花卉」给你好友吧</view>
<view class="body-friend-image-box">
<view class="body-friend-image" @click="renderScript.emitData">
<image src="/static/images/public/icon-preservation.png"></image>
保存图片
</view>
<view class="body-friend-image" @click="renderScript.emitDatai">
<image src="/static/images/public/img-share-friend.png"></image>
分享微信
</view>
<view class="body-friend-image" @click="wechatMoments()">
<image src="/static/images/public/icon-share.png"></image>
分享朋友圈
</view>
</view>
<view class="body-friend-cancel" @click="clickFriend()">取消</view>
</view>
</view>
</view>
</template>
<script>
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";
import html2canvas from "html2canvas";
export default {
components: {
tkiQrcode,
html2canvas
},
data() {
return {
qrCodePath: "12312",
myName: "",
myUrl: "",
frienType: false,
//保存图片
base64: "",
};
},
onLoad() {
//获取本地个人信息
let seleData = uni.getStorageSync("userInfo");
if (seleData !== "" && seleData != null) {
this.myUrl = seleData.avatar;
this.myName = seleData.nickName;
}
},
methods: {
// 分享朋友圈
wechatMoments() {
uni.share({
provider: "weixin", //分享到weixin 、 QQ 、sinaweibo
scene: "WXSenceTimeline", //WXSceneSession聊天界面、WXSenceTimeline朋友圈、WXSceneFavorite微信收藏
type: 0, //分享形式，如图文、纯文字、纯图片、音乐、视频、小程序等。默认图文 0。不同分享服务商支持的形式不同，具体参考下面type值说明。
href: "http://uniapp.dcloud.io/",
title: "uni-app分享", //分享标题
summary: "快来和我一起",
imageUrl: "https://img1.baidu.com/it/u=1461484221,2134526266&fm=26&fmt=auto&gp=0.jpg", //分享显示图片
// mediaUrl:""//音频地址
success: function(res) { //成功执行
console.log("success:" + JSON.stringify(res));
uni.showToast({
title: "分享成功",
icon: "none",
})
},
fail: function(err) { //失败执行
console.log("fail:" + JSON.stringify(err));
uni.showToast({
title: "分享失败",
icon: "none",
})
},
complete: function() {
// 成功失败都执行
console.log("--------------")
}
});
},
//分享微信好友
wechatFriends() {
console.log(this.base64);
// let base64 = uni.getStorageSync("base");
uni.share({
provider: "weixin", //分享到weixin 、 QQ 、sinaweibo
scene: "WXSceneSession", //WXSceneSession聊天界面、WXSenceTimeline朋友圈、WXSceneFavorite微信收藏
type: 2, //分享形式，如图文、纯文字、纯图片、音乐、视频、小程序等。默认图文 0。不同分享服务商支持的形式不同，具体参考下面type值说明。
imageUrl: imgFile, //分享显示图片
// mediaUrl:""//音频地址
success: function(res) { //成功执行
console.log("success:" + JSON.stringify(res));
uni.showToast({
title: "分享成功",
icon: "none",
})
},
fail: function(err) { //失败执行
console.log("fail:" + JSON.stringify(err), "分享失败");
uni.showToast({
title: "分享失败",
icon: "none",
})
},
complete: function() {
// 成功失败都执行
console.log("-----成功失败都执行---------")
}
});
},
// 接收renderjs发回的数据
receiveRenderData(val) {
this.base64 = val
if (this.base64 != null) {
let base64 = this.base64;
const bitmap = new plus.nativeObj.Bitmap("test");
bitmap.loadBase64Data(base64, function() {
const url = "_doc/" + new Date().getTime() + ".png"; // url为时间戳命名方式
console.log('saveHeadImgFile', url)
bitmap.save(url, {
overwrite: true, // 是否覆盖
// quality: 'quality' // 图片清晰度
}, (i) => {
uni.saveImageToPhotosAlbum({
filePath: url,
success: function() {
uni.showToast({
title: '图片保存成功',
icon: 'none'
})
console.log(url, "url");
bitmap.clear()
}
});
}, (e) => {
uni.showToast({
title: '图片保存失败',
icon: 'none'
})
bitmap.clear()
});
}, (e) => {
uni.showToast({
title: '图片保存失败',
icon: 'none'
})
bitmap.clear()
});
}
},
// 接收renderjs发回的数据
receiveRenderDatai(val) {
this.base64 = val;
if (this.base64 !== undefined || this.base64 !== "") {
this.wechatFriends();
}
},
},
// 监听页面返回事件（侧滑返回、点击返回按钮）
onBackPress(options) {
if (this.frienType) {
this.frienType = false;
return true;
}
}
} </script>
<script module="renderScript" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
data() {
return {
}
},
methods: {
// 发送数据到逻辑层
emitData(e, ownerVm) {
const dom = document.getElementById('poster')
html2canvas(dom, {
width: dom.clientWidth, //dom 原始宽度
height: dom.clientHeight,
scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
scrollX: 0,
useCORS: true, //支持跨域，但好像没什么用
}).then((canvas) => {
// 将生产的canvas转为base64图片3
ownerVm.callMethod('receiveRenderData', canvas.toDataURL('image/png'));
});
},
}
}; </script>
<style lang="scss">
</style>
