<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view>
<canvas style="width: 170px;height: 170px;margin: 10px 0 16px;background-color: #2C405A;" canvas-id="qr-code" id="qr-code"></canvas>
<text>加入我的人力资源共享平台</text>
</view>
<!-- #ifdef APP-PLUS -->
<view class="save-btn" @click="saveFile">
<text>保存到相册</text>
</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
mounted() {
this.generateQrCode('/pages/login/register/register?type=2&f_id=' + this.id);
},
methods: {
generateQrCode(url) {
const ctx = uni.createCanvasContext('qr-code')
ctx.setFillStyle('#ffffff')
ctx.setFontSize(20)
ctx.fillText('canvas内容块',20, 50)
ctx.fillText('包含背景色',20, 80)
ctx.draw()
},
saveFile() {
// #ifdef APP-PLUS
let pages = getCurrentPages();
let page = pages[pages.length - 1];
let bitmap = null;
let currentWebview = page.$getAppWebview();
bitmap = new plus.nativeObj.Bitmap('amway_img');
// 将webview内容绘制到Bitmap对象中
currentWebview.draw(bitmap, function() {
let rand = Math.floor(Math.random() * 10000)
let saveUrl = '_doc/' + rand + 'a.jpg'
bitmap.save(saveUrl, {}, function(i) {
uni.saveImageToPhotosAlbum({
filePath: i.target,
success: function() {
// bitmap.clear(); // 销毁Bitmap图片
uni.showToast({
icon: 'none',
title: '保存图片成功',
mask: false,
duration: 1500
});
}
});
}, function(e) {
uni.showToast({
icon: 'none',
title: '保存图片失败',
mask: false,
duration: 1500
});
});
}, function(e) {
uni.showToast({
icon: 'none',
title: '保存图片失败',
mask: false,
duration: 1500
});
});
// #endif
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.save-btn{
display: flex;
justify-content: center;
align-items: center;
width: 239px;
height: 44px;
margin-top: 48px;
color: #245EE4;
line-height: 44px;
border-radius: 22px;
border: 1px solid #245EE4;
}
</style>
7***@qq.com
- 发布：2023-03-21 15:26
- 更新：2023-03-23 13:13
- 阅读：270
产品分类： HbuilderX
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 11 专业版
HBuilderX版本号： 3.7.7
示例代码：
操作步骤：
点击 保存到相册 按钮 然后到相册查看图片是否保存完整
点击 保存到相册 按钮 然后到相册查看图片是否保存完整
预期结果：
点击 保存到相册 按钮 然后到相册查看 图片需完整
点击 保存到相册 按钮 然后到相册查看 图片需完整
实际结果：
HBuilderX Alpha 3.7.7 以及正式版3.7.3
点击 保存到相册 按钮 然后到相册查看 图片不完整
HBuilderX 正式版2.9.8
点击 保存到相册 按钮 然后到相册查看 图片完整
HBuilderX Alpha 3.7.7 以及正式版3.7.3
点击 保存到相册 按钮 然后到相册查看 图片不完整
HBuilderX 正式版2.9.8
点击 保存到相册 按钮 然后到相册查看 图片完整
bug描述：
HBuilderX3.7.7 canvas绘制内容 点击按钮保存到相册 绘制内容丢失 运行为android设备
HBuilderX Alpha 3.7.7 以及正式版3.7.3 点击保存到相册 保存后到相册查看： canvas绘制内容会丢失 但是canvas画布还在
HBuilderX 正式版 2.9.8 点击保存到相 canvas绘制内容不会丢失 可以正常保存
其它版本未测试，已知当前最新版存在此问题 且已测试3.6.X或3.7.X等版本也存在此问题 具体版本未记录
包含”canvas内容块 包含背景色“ 字样的图片为 HBuilderX 正式版 2.9.8点击按钮保存后的图片
色块区内容为空白的的图片为 HBuilderX Alpha 3.7.7 以及正式版3.7.3 点击按钮保存后的图片
7***@qq.com (作者)
大佬看下我回复的 附件也传了
2023-03-23 13:14
DCloud_Android_ST
回复 7***@qq.com: plus.nativeObj.Bitmap一值都无法截取canvas的内容 你说老版本2.9.8可以这不太可能
2023-03-23 14:52
7***@qq.com (作者)
我下载2.9.8版本了 然后代码一点没变 但是却可以截取canvas
并且aph3.7.7也不是完全无法截取 我在真实项目里面时 第一次进去无法截取画布内容 然后点击返回然后再进入就可以截取了 具体操作为：
一级页（tabs页）---> 二级页 ---->三级页（此时无法截取） -----> 返回二级页 ----> 再次进入三级页 ----> 可以截取
一级页（tabs页）---> 二级页 ---->三级页（此时无法截取） -----> 返回二级页 ----->返回一级页 ----> 二级页 ---->三级页（此时无法截取）
2023-03-23 15:37
7***@qq.com (作者)
如果我没记错的话 之前在某个3.几的版本是可以截取的 但是后面我更新就不行了
不过我也不确定 因为毕竟时间有点久了我也记不住是哪个版本
而我也去测试了很多个3.几的版本 但是都存在这个问题 无法截取内容
最后下载了2.9.8的版本之后 就可以截取了 图中有文字的就是2.9.8截取的
2023-03-23 15:40
7***@qq.com (作者)
回复 DCloud_Android_ST: 如果你这边有空的话可以下载2.9.8然后直接把附件运行一下就知道了
历史版本下载地址：https://hx.dcloud.net.cn/Tutorial/HistoryVersion
2023-03-23 15:42
DCloud_Android_ST
回复 7***@qq.com: ok 我们回查下历史版本
2023-03-23 16:53
7***@qq.com (作者)
回复 DCloud_Android_ST: 好的，敬候佳音！
2023-03-23 17:16
7***@qq.com (作者)
回复 DCloud_Android_ST: 大佬，空闲了之后麻烦看下这个问题，感谢
2023-03-24 13:33
DCloud_Android_ST
回复 7***@qq.com: 已有相关同学跟进 有结果会回复
2023-03-24 14:47
7***@qq.com (作者)
回复 DCloud_Android_ST: 好的，感谢
2023-03-24 18:07
7***@qq.com (作者)
回复 DCloud_Android_ST: 大佬这个问题有段时间了 好像没什么进展啊 可以把跟进的人@给我吗
2023-03-29 10:10
DCloud_Android_ST
回复 7***@qq.com: 人手有限不会实时跟进问题 有结果会回复
2023-03-29 11:03
DCloud_Android_ST
回复 DCloud_Android_ST: 反馈说不是所有手机设备在2.9.8基座都可以正常截取到canvas内容 与设备内置的浏览器内核相关无法保证可以截取到 所以该能力不支持 文档有说明
2023-03-29 15:03
7***@qq.com (作者)
回复 DCloud_Android_ST: 好的，了解了
2023-03-29 15:53