<template>
<div>
<button @click="chooseImg">chooseImg</button>
<view>我是应该显示图片</view>
<image :src="imgUrl" mode="scaleToFill" style="width: 100px; height: 100px" />
<view>我是应该显示图片</view>
<view>我是canvas</view>
<canvas canvas-id="canvasId" style="width: 100px; height: 100px"></canvas>
<view>我是canvas</view>
</div>
</template>
<script setup>
import { ref } from 'vue'
const imgUrl = ref('')
const chooseImg = async () => {
const res = await uni.chooseImage()
// 用canvas绘制图片
const ctx = uni.createCanvasContext('canvasId')
ctx.drawImage(res.tempFilePaths[0], 0, 0, 100, 100)
// 添加水印
ctx.setFontSize(20)
ctx.setFillStyle('red')
ctx.fillText('Hello', 0, 20)
ctx.draw()
// 获取canvas图片
uni.canvasToTempFilePath({
canvasId: 'canvasId',
success: function (res) {
const path = plus.io.convertLocalFileSystemURL(res.tempFilePath)
const fileReader = new plus.io.FileReader()
// 获取图片的file
fileReader.readAsDataURL(path)
fileReader.onloadend = function (evt) {
console.log(evt.target.result
imgUrl.value = evt.target.result
}
}
})
}
</script>
<style scoped></style>
1***@qq.com
- 发布：2023-07-22 00:41
- 更新：2023-07-22 10:28
- 阅读：156
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windows11 家庭中文版
HBuilderX类型： 正式
HBuilderX版本号： 3.8.7
手机系统： Android
手机系统版本号： Android 13
手机厂商： 小米
手机机型： 红米k40
页面类型： vue
vue版本： vue3
打包方式： 离线
项目创建方式： HBuilderX
示例代码：
操作步骤：
点击chooseImg按钮上传一张图片，复制base64到浏览器显示一张灰色的空白图片
点击chooseImg按钮上传一张图片，复制base64到浏览器显示一张灰色的空白图片
预期结果：
base64在浏览器和赋值给图片标签正常显示图片
base64在浏览器和赋值给图片标签正常显示图片
实际结果：
浏览器上为灰色，图片标签赋值显示不出来
浏览器上为灰色，图片标签赋值显示不出来
bug描述：
给上传的图片用canvas添加水印，在把这个canvas处理成base64，这个base64在浏览器打开是灰色的，并且赋值给图片url也显示不出来。
