
- 发布:2023-05-11 10:29
- 更新:2023-05-11 16:37
- 阅读:310
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10 专业版 22H2 19045.2965
手机系统: 全部
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: CLI
CLI版本号: 3.7.9
测试过的手机:
示例代码:
<template>
<view>
<!-- class="fixed -left-5000px -top-3000px"-->
<canvas
id="shareCanvas"
ref="shareCanvas"
:hidpi="false"
:style="canvasStyle"
canvas-id="shareCanvas"
></canvas>
<u-popup
:show="show"
:safe-area-inset-bottom="false"
bg-color="transparent"
@close="close"
>
<u-toast ref="uToast"></u-toast>
<view class="h-100vh w-full flex flex-col items-center justify-between leading-none">
<view class="flex-1 pt-200rpx overflow-auto pb-30rpx">
<image
:src="posterUrl"
class="block w-582rpx h-1036rpx"
/>
</view>
<view class="action-container padding-safe-bottom w-full h-280rpx rounded-t-40rpx bg-#F6F6F6">
<view class="f-center gap-x-144rpx h-180rpx u-border-bottom">
<!-- #ifdef APP-PLUS-->
<view class="w-122rpx flex flex-col items-center">
<image
class="w-72rpx h-72rpx"
src="https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023414/icon-share-wechat.png"
></image>
<view class="share-text">微信好友</view>
</view>
<view class="w-122rpx flex flex-col items-center">
<image
class="w-72rpx h-72rpx"
src="https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023414/icon-share-moment.png"
>
</image>
<view class="share-text">朋友圈</view>
</view>
<!-- #endif-->
<!-- #ifdef MP-WEIXIN-->
<view class="w-122rpx flex flex-col items-center relative">
<button
class="absolute top-0 left-0 bottom-0 right-0 bg-transparent border-none opacity-0"
open-type="share"
>
</button>
<image
class="w-72rpx h-72rpx"
src="https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023414/icon-share-wechat.png"
></image>
<view class="share-text">微信好友</view>
</view>
<view class="w-122rpx flex flex-col items-center">
<image
class="w-72rpx h-72rpx"
src="https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023414/icon-share-moment.png"
>
</image>
<view class="share-text">朋友圈</view>
</view>
<!-- #endif-->
<view
class="w-122rpx flex flex-col items-center"
@click="saveImage"
>
<image
class="w-72rpx h-72rpx"
src="https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023414/icon-share-download.png"
></image>
<view class="share-text">保存至相册</view>
</view>
</view>
<view
class="h-100rpx f-center text-32 text-#606266 hover:opacity-80"
@click="close"
>
关闭
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import { delay } from '@/utils'
const BG_URL = 'https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023417/job-share-bg.png'
const ratio = 2
const CANVAS_OPTIONS = {
originWidth: 582,
originHeight: 1036,
height: 1036 * ratio,
width: 582 * ratio
}
const EVENT_NAMES = {
updateShow: 'update:show'
}
export default {
name: 'JrJobShare',
components: {},
props: {
show: {
type: Boolean,
default: false
}
},
data() {
return {
CANVAS_OPTIONS,
posterUrl: '',
context: null,
bgUrl: '',
canvasStyle: `width:${CANVAS_OPTIONS.width}px;height:${CANVAS_OPTIONS.height}px;`,
showCanvas: true
}
},
async mounted() {
this.context = uni.createCanvasContext('shareCanvas', this)
},
methods: {
saveImage() {
uni.saveImageToPhotosAlbum({
filePath: this.posterUrl,
success: () => {
uni.showToast({
title: '保存成功,快去分享给朋友吧',
icon: 'none',
duration: 2000
})
}
})
},
async initialize() {
this.showCanvas = true
this.showLoading()
await Promise.all([this.downloadBg()]).catch(() => this.hideLoading)
await this.drawPoster()
this.hideLoading()
},
showLoading() {
if (this.show) {
uni.showLoading({
title: '生成中',
mask: true
})
}
},
hideLoading() {
if (this.show) {
uni.hideLoading()
}
},
async drawPoster() {
await delay(100)
this.context = uni.createCanvasContext('shareCanvas', this)
const ctx = this.context
const { bgUrl } = this
// 背景
ctx.drawImage(bgUrl, 0, 0, CANVAS_OPTIONS.width, CANVAS_OPTIONS.height)
ctx.draw(false, async ({ errMsg }) => {
await delay(1500)
if (errMsg === 'drawCanvas:ok') {
uni.canvasToTempFilePath(
{
canvasId: 'shareCanvas',
destWidth: CANVAS_OPTIONS.originWidth,
destHeight: CANVAS_OPTIONS.originHeight,
success: ({ tempFilePath }) => {
console.log('tempFilePath', tempFilePath)
this.posterUrl = tempFilePath
},
fail: (err) => {
console.log(err)
},
complete: () => {}
},
this
)
return
}
console.log(errMsg)
uni.showToast({
icon: 'none',
title: '分享海报生成失败,请重试',
duration: 3000
})
})
},
async downloadBg() {
const bgUrl = await this.getImgInfo(BG_URL)
this.qrcodeUrl = bgUrl
this.bgUrl = bgUrl
},
getImgInfo(url) {
return new Promise((resolve, reject) => {
uni.getImageInfo({
src: url,
success: (res) => resolve(res.path),
fail: () => reject()
})
})
},
close() {
this.showCanvas = false
this.$emit(EVENT_NAMES.updateShow, false)
}
}
}
</script>
<style scoped lang="scss">
.action-container {
}
.share-text {
font-size: 24rpx;
margin-top: 24rpx;
}
</style>
<template>
<view>
<!-- class="fixed -left-5000px -top-3000px"-->
<canvas
id="shareCanvas"
ref="shareCanvas"
:hidpi="false"
:style="canvasStyle"
canvas-id="shareCanvas"
></canvas>
<u-popup
:show="show"
:safe-area-inset-bottom="false"
bg-color="transparent"
@close="close"
>
<u-toast ref="uToast"></u-toast>
<view class="h-100vh w-full flex flex-col items-center justify-between leading-none">
<view class="flex-1 pt-200rpx overflow-auto pb-30rpx">
<image
:src="posterUrl"
class="block w-582rpx h-1036rpx"
/>
</view>
<view class="action-container padding-safe-bottom w-full h-280rpx rounded-t-40rpx bg-#F6F6F6">
<view class="f-center gap-x-144rpx h-180rpx u-border-bottom">
<!-- #ifdef APP-PLUS-->
<view class="w-122rpx flex flex-col items-center">
<image
class="w-72rpx h-72rpx"
src="https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023414/icon-share-wechat.png"
></image>
<view class="share-text">微信好友</view>
</view>
<view class="w-122rpx flex flex-col items-center">
<image
class="w-72rpx h-72rpx"
src="https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023414/icon-share-moment.png"
>
</image>
<view class="share-text">朋友圈</view>
</view>
<!-- #endif-->
<!-- #ifdef MP-WEIXIN-->
<view class="w-122rpx flex flex-col items-center relative">
<button
class="absolute top-0 left-0 bottom-0 right-0 bg-transparent border-none opacity-0"
open-type="share"
>
</button>
<image
class="w-72rpx h-72rpx"
src="https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023414/icon-share-wechat.png"
></image>
<view class="share-text">微信好友</view>
</view>
<view class="w-122rpx flex flex-col items-center">
<image
class="w-72rpx h-72rpx"
src="https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023414/icon-share-moment.png"
>
</image>
<view class="share-text">朋友圈</view>
</view>
<!-- #endif-->
<view
class="w-122rpx flex flex-col items-center"
@click="saveImage"
>
<image
class="w-72rpx h-72rpx"
src="https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023414/icon-share-download.png"
></image>
<view class="share-text">保存至相册</view>
</view>
</view>
<view
class="h-100rpx f-center text-32 text-#606266 hover:opacity-80"
@click="close"
>
关闭
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import { delay } from '@/utils'
const BG_URL = 'https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023417/job-share-bg.png'
const ratio = 2
const CANVAS_OPTIONS = {
originWidth: 582,
originHeight: 1036,
height: 1036 * ratio,
width: 582 * ratio
}
const EVENT_NAMES = {
updateShow: 'update:show'
}
export default {
name: 'JrJobShare',
components: {},
props: {
show: {
type: Boolean,
default: false
}
},
data() {
return {
CANVAS_OPTIONS,
posterUrl: '',
context: null,
bgUrl: '',
canvasStyle: `width:${CANVAS_OPTIONS.width}px;height:${CANVAS_OPTIONS.height}px;`,
showCanvas: true
}
},
async mounted() {
this.context = uni.createCanvasContext('shareCanvas', this)
},
methods: {
saveImage() {
uni.saveImageToPhotosAlbum({
filePath: this.posterUrl,
success: () => {
uni.showToast({
title: '保存成功,快去分享给朋友吧',
icon: 'none',
duration: 2000
})
}
})
},
async initialize() {
this.showCanvas = true
this.showLoading()
await Promise.all([this.downloadBg()]).catch(() => this.hideLoading)
await this.drawPoster()
this.hideLoading()
},
showLoading() {
if (this.show) {
uni.showLoading({
title: '生成中',
mask: true
})
}
},
hideLoading() {
if (this.show) {
uni.hideLoading()
}
},
async drawPoster() {
await delay(100)
this.context = uni.createCanvasContext('shareCanvas', this)
const ctx = this.context
const { bgUrl } = this
// 背景
ctx.drawImage(bgUrl, 0, 0, CANVAS_OPTIONS.width, CANVAS_OPTIONS.height)
ctx.draw(false, async ({ errMsg }) => {
await delay(1500)
if (errMsg === 'drawCanvas:ok') {
uni.canvasToTempFilePath(
{
canvasId: 'shareCanvas',
destWidth: CANVAS_OPTIONS.originWidth,
destHeight: CANVAS_OPTIONS.originHeight,
success: ({ tempFilePath }) => {
console.log('tempFilePath', tempFilePath)
this.posterUrl = tempFilePath
},
fail: (err) => {
console.log(err)
},
complete: () => {}
},
this
)
return
}
console.log(errMsg)
uni.showToast({
icon: 'none',
title: '分享海报生成失败,请重试',
duration: 3000
})
})
},
async downloadBg() {
const bgUrl = await this.getImgInfo(BG_URL)
this.qrcodeUrl = bgUrl
this.bgUrl = bgUrl
},
getImgInfo(url) {
return new Promise((resolve, reject) => {
uni.getImageInfo({
src: url,
success: (res) => resolve(res.path),
fail: () => reject()
})
})
},
close() {
this.showCanvas = false
this.$emit(EVENT_NAMES.updateShow, false)
}
}
}
</script>
<style scoped lang="scss">
.action-container {
}
.share-text {
font-size: 24rpx;
margin-top: 24rpx;
}
</style>
操作步骤:
点击分享
点击分享
预期结果:
uni.canvasToTempFilePath输出的图片一致
uni.canvasToTempFilePath输出的图片一致
实际结果:
app端和小程序不一致
app端和小程序不一致
bug描述:
题外话,BUG 描述添加不了图片,点击插入跑到“测试过的手机”里面去了
写海报输出,小程序和app输出不一致
附件1为正常输出-小程序
附件2为热更新后第一次触发绘制并输出图片,输出的内容居然在左上角
附件3为关闭第一次输出的图片窗口后再次触发,变形了




Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序
我最近测试这个,发现小程序端返回的是临时路径,h5端返回的是base64