- 发布:2024-01-11 16:48
- 更新:2024-01-11 16:48
- 阅读:128
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: monosa 14.2.1
HBuilderX类型: 正式
HBuilderX版本号: 3.99
手机系统: 全部
手机厂商: 模拟器
页面类型: vue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
测试过的手机:
示例代码:
<template>
<view>
<canvas style="width: 300px; height: 400px;"
canvas-id="firstCanvas" id="firstCanvas"></canvas>
<button @click="saveImage11">保存</button>
</view>
</template>
<script>
export default {
data() {
return {
selectId: 'firstCanvas',
scrollLeft: 0,
canvas: null
}
},
props: ['content'],
watch: {
content(value) {
if (value) {
this.createCanvas11()
}
}
},
methods: {
// 生成canvas
createCanvas11() {
const ctx = uni.createCanvasContext('firstCanvas', this);
ctx.clearRect(0, 0, 300, 400)
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0, 0, 300, 400);
function findBreakPoint(text, width, context) {
var min = 0;
var max = text.length - 1;
while (min <= max) {
var middle = Math.floor((min + max) / 2);
var middleWidth = context.measureText(text.substr(0, middle)).width;
var oneCharWiderThanMiddleWidth = context.measureText(text.substr(0, middle + 1)).width;
if (middleWidth <= width && oneCharWiderThanMiddleWidth > width) {
return middle;
}
if (middleWidth < width) {
min = middle + 1;
} else {
max = middle - 1;
}
}
return -1;
}
function breakLinesForCanvas(text, width, font) {
var result = [];
var breakPoint = 0;
if (font) {
ctx.font = font;
}
while ((breakPoint = findBreakPoint(text, width, ctx)) !== -1) {
result.push(text.substr(0, breakPoint));
text = text.substr(breakPoint);
}
if (text) {
result.push(text);
}
return result;
}
ctx.strokeRect(5, 5, 292, 392)
ctx.setFillStyle('black')
const content = breakLinesForCanvas(this.content, 260, '28px 微软雅黑');
content.forEach(function(line, index) {
ctx.fillText(line, 20, 30 * index + 50);
});
ctx.drawImage("/static/er.jpg", 20, 260, 100, 100);
let wordsList = [
'长按识别二维码',
'一天一句毒鸡汤',
'每天一碗,人生耀眼'
]
ctx.setFontSize(14)
ctx.fillText(wordsList[0], 25, 380);
ctx.setFontSize(18)
ctx.fillText(wordsList[1], 140, 310);
ctx.setFontSize(16)
ctx.fillText(wordsList[2], 130, 340);
this.canvas = ctx
ctx.draw()
},
// 保存到相册
saveImage11() {
let that = this;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 300,
height: 400,
destWidth: 900,
destHeight: 1200,
// fileType: 'jpg',
// quality: 1,
canvasId: 'firstCanvas',
canvas: this.canvas,
success: function(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success() {
that.canvasFlag = false
that.$refs.shareBox.close();
uni.showToast({
title: '保存成功!',
duration: 2000
});
}
})
},
fail: function ( res ) {
console.log(res)
}
})
}
}
}
</script>
<template>
<view>
<canvas style="width: 300px; height: 400px;"
canvas-id="firstCanvas" id="firstCanvas"></canvas>
<button @click="saveImage11">保存</button>
</view>
</template>
<script>
export default {
data() {
return {
selectId: 'firstCanvas',
scrollLeft: 0,
canvas: null
}
},
props: ['content'],
watch: {
content(value) {
if (value) {
this.createCanvas11()
}
}
},
methods: {
// 生成canvas
createCanvas11() {
const ctx = uni.createCanvasContext('firstCanvas', this);
ctx.clearRect(0, 0, 300, 400)
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0, 0, 300, 400);
function findBreakPoint(text, width, context) {
var min = 0;
var max = text.length - 1;
while (min <= max) {
var middle = Math.floor((min + max) / 2);
var middleWidth = context.measureText(text.substr(0, middle)).width;
var oneCharWiderThanMiddleWidth = context.measureText(text.substr(0, middle + 1)).width;
if (middleWidth <= width && oneCharWiderThanMiddleWidth > width) {
return middle;
}
if (middleWidth < width) {
min = middle + 1;
} else {
max = middle - 1;
}
}
return -1;
}
function breakLinesForCanvas(text, width, font) {
var result = [];
var breakPoint = 0;
if (font) {
ctx.font = font;
}
while ((breakPoint = findBreakPoint(text, width, ctx)) !== -1) {
result.push(text.substr(0, breakPoint));
text = text.substr(breakPoint);
}
if (text) {
result.push(text);
}
return result;
}
ctx.strokeRect(5, 5, 292, 392)
ctx.setFillStyle('black')
const content = breakLinesForCanvas(this.content, 260, '28px 微软雅黑');
content.forEach(function(line, index) {
ctx.fillText(line, 20, 30 * index + 50);
});
ctx.drawImage("/static/er.jpg", 20, 260, 100, 100);
let wordsList = [
'长按识别二维码',
'一天一句毒鸡汤',
'每天一碗,人生耀眼'
]
ctx.setFontSize(14)
ctx.fillText(wordsList[0], 25, 380);
ctx.setFontSize(18)
ctx.fillText(wordsList[1], 140, 310);
ctx.setFontSize(16)
ctx.fillText(wordsList[2], 130, 340);
this.canvas = ctx
ctx.draw()
},
// 保存到相册
saveImage11() {
let that = this;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 300,
height: 400,
destWidth: 900,
destHeight: 1200,
// fileType: 'jpg',
// quality: 1,
canvasId: 'firstCanvas',
canvas: this.canvas,
success: function(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success() {
that.canvasFlag = false
that.$refs.shareBox.close();
uni.showToast({
title: '保存成功!',
duration: 2000
});
}
})
},
fail: function ( res ) {
console.log(res)
}
})
}
}
}
</script>
操作步骤:
这段代码用的是 vue2 语法,运行环境为 vue3,canvas 能正常加载,但是保存 canvas 到临时目录报错
这段代码用的是 vue2 语法,运行环境为 vue3,canvas 能正常加载,但是保存 canvas 到临时目录报错
预期结果:
正常保存
正常保存
实际结果:
报错
报错