<template>
<view>
<canvas canvas-id="cs" id="cs"></canvas>
<view class="baoc" @tap="baocun">
保存
</view>
</view>
</template>
<script>
export default {
data() {
return {
gao:1920,
kuan:1080,
ish5:0
}
},
mounted(){
// #ifdef H5
// 監聽設備網絡狀態變化事件
this.ish5=1
// #endif
let self = this;
uni.getSystemInfo({
success: function (res) {
/* console.log(res.model);
console.log(res.pixelRatio);
console.log(res.windowWidth);
console.log(res.windowHeight);
console.log(res.language);
console.log(res.version);
console.log(res.platform);*/
self.gao=res.windowHeight
self.kuan=res.windowWidth
}
});
this.hb()
},
methods: {
baocun(){
var that=this;
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: that.kuan*0.8,
height: 300,
destWidth: that.kuan*0.8,
destHeight: 300,
canvasId: 'cs',
success: function(res) {
// 在H5平台下，tempFilePath 為 base64
console.log(res.tempFilePath)
if(that.ish5==1){
uni.downloadFile({
url: res.tempFilePath, //僅為示例，並非真實的資源
success: (res) => {
console.log('ss')
console.log(res)
if (res.statusCode === 200) {
console.log('下載成功');
that.saveImg(res.tempFilePath)
}
}
});
}else{
uni.downloadFile({
url: res.tempFilePath, //僅為示例，並非真實的資源
success: (res) => {
if (res.statusCode === 200) {
console.log('下載成功');
}
}
});
}
}
})
},
saveImg: function(url){
var oA = document.createElement("a");
oA.download = '';// 設置下載的文件名，默認是'下載'
oA.href = url;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下載之后把創建的元素刪除
},
hb(){
var that=this;
var ctx = uni.createCanvasContext('cs');
var heng=that.kuan*0.8*0.5-50
console.log(heng)
uni.getImageInfo({
src: "/static/logo.png",
success(res) {
console.log(res.path)
ctx.drawImage(res.path, heng,40, 100, 100)// 設置圖片坐標及大小，括號里面的分別是（圖片路徑，x坐標，y坐標，width，height）
ctx.save();//保存
//ctx.setTextAlign('center')
// ctx.font = 'normal 20px STXingkai'; // 字體
ctx.setFontSize(16) //設置字體大小，默認10
ctx.setFillStyle('#3A85FF') //文字顏色：默認黑色
//ctx.fillText("事事通",that.kuan*0.8*0.5,200);//文字內容、x坐標，y坐標
var str="事事通事事通事事通事事通事事通事事通事事通事事通事事通事事通"
that.drawText(ctx, str, 20, 200, 30,that.kuan*0.8 -40);// 調用行文本換行函數
ctx.draw()//繪制
}
})
// ctx.draw()
},
/**
* 繪制多行文本
* ctx canvas對象
* str 文本
* leftWidth 距離左側的距離
* initHeight 距離頂部的距離
* titleHeight 文本的高度
* canvasWidth 文本的寬度
* @returns {*}
*/
drawText (ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
let lineWidth = 0;
let lastSubStrIndex = 0; //每次開始截取的字符串的索引
for (let i = 0; i < str.length; i++) {
lineWidth += ctx.measureText(str[i]).width;
if (lineWidth > canvasWidth) {
ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //繪制截取部分
initHeight += 22; //22為 文字大小20 + 2
lineWidth = 0;
lastSubStrIndex = i;
titleHeight += 22;
}
if (i == str.length - 1) { //繪制剩余部分
ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
}
}
// 標題border-bottom 線距頂部距離
titleHeight = titleHeight + 10;
return titleHeight;
},
}
}
</script>
<style>
#cs{
width: 80%;
height: 300px;
border: 2px solid #3A85FF;
border-radius: 2px;
margin: 0 auto;
margin-top: 100px;
}
.baoc{
width: 80px;
height: 40px;
border-radius: 6px;
line-height: 40px;
text-align: center;
font-size: 14px;
color: white;
margin: 30px auto;
background-color: #3A85FF;
}
</style>