uni生成canvas海报 / wx同理
uni-app 2022-12-12 18:56:11

如果发现绘制不出来的情况，初始化要加参数：

XML/HTML Code复制内容到剪贴板
  1. this.poster.context = uni.createCanvasContext(this.poster.id,this);  

 

 

如果绘制最后一步发现报错：canvasToTempFilePath:fail fail canvas is empty

因为在自定义组件中使用canvas 需要添加this参数

uni.canvasToTempFilePath({
...
},this)

 

 

iShot_2022-12-12_18.58.04.png

 

使用canvas组件：

XML/HTML Code复制内容到剪贴板
  1. <gui-poster ref="posterRef" id="canvas1" :posterDetail="posterDetail"></gui-poster>  
  2.   
  3.   
  4. <script>  
  5.   
  6.     export default {  
  7.           
  8.         data() {  
  9.             return {  
  10.                   
  11.                 posterDetail: {  
  12.                     id: '',  
  13.                     title: '',  
  14.                     titlepic: '',  
  15.                     name: '',  
  16.                     avatar: '',  
  17.                     qrcode: ''  
  18.                 }  
  19.             }  
  20.         },  
  21. created() {  
  22.   
  23.                     this.posterDetail = {  
  24.                         title: ele.title,  
  25.                         titlepic: ele.cover,  
  26.                         name: this.hasLogin ? this.provider.nickname : '',  
  27.                         avatar: this.hasLogin ? this.provider.avatar : '',  
  28.                         qrcode: this.apiBaseUrl + 'road/poster-qrcode?id=' + ele.id  
  29.                     }  
  30.             this.$refs.posterRef.getPoster()  
  31.         },  

 

 

组件化：

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <canvas  
  3.     :style="{  
  4.         width:poster.widthIn+'px',   
  5.         height:poster.heightIn+'px',   
  6.         boxShadow: '0 0 15px #cccccc'  
  7.     }"   
  8.     :canvas-id="id" @longpress="longpress"></canvas>  
  9. </template>  
  10.   
  11. <script>  
  12.     export default {  
  13.         props: {  
  14.             id: {  
  15.                 type: String,  
  16.                 default: 'Canvas1'  
  17.             },  
  18.             posterDetail: {  
  19.                 type: Object,  
  20.                 default() {  
  21.                     return {  
  22.                         title: '',  
  23.                         titlepic: '',  
  24.                         name: '',  
  25.                         avatar: '',  
  26.                         qrcode: ''  
  27.                     }  
  28.                 }  
  29.             }  
  30.         },  
  31.         data() {  
  32.             return {  
  33.                 poster: {  
  34.                     context  : null, // canvas内容  
  35.                     width    : 700,   // 画布宽度，单位 rpx  
  36.                     height   : 1000,  // 画布高度  
  37.                     widthIn  : 300,   // 自动计算转换为 px  
  38.                     heightIn : 0,  //  自动计算转换为 px  
  39.                     bgColor  : '#ffffff', // 背景颜色  
  40.                     imgSrc   : null,  
  41.                     multiple : 1 // 将画布放大 2.0 - 2.9 倍（支持小数，过大app端会出现无法渲染的问题），保存的图片更清晰  
  42.                 }  
  43.             }  
  44.         },  
  45.         // created() {  
  46.             // this.init()  
  47.             // console.log(this.item)  
  48.         // },  
  49.         methods: {  
  50.             // 生成海报  
  51.             getPoster() {  
  52.                 if(this.poster.imgSrc) {  
  53.                     return  
  54.                 }  
  55.                 uni.showLoading({title:'loading ...'});  
  56.                 this.posterInitSize();  
  57.                 // 画布初始化  
  58.                 this.poster.context = uni.createCanvasContext(this.id,this);  
  59.                 // console.log('context id', this.id)  
  60.                 // this.poster.context.setFillStyle(this.poster.bgColor)  
  61.                 // this.poster.context.fillRect(10, 10, 150, 75)  
  62.                 // this.poster.context.draw()  
  63.                 //延迟500毫秒等待画布创建  
  64.                 setTimeout(()=>{  
  65.                     this.posterDraw();  
  66.                     uni.hideLoading();  
  67.                 }, 500);  
  68.             },  
  69.             // 画布初始化  
  70.             posterInitSize : function () {  
  71.                 // 将rpx单位值转换成px  
  72.                 this.poster.widthIn  = uni.upx2px(this.poster.width)  * this.poster.multiple;  
  73.                 this.poster.heightIn = uni.upx2px(this.poster.height) * this.poster.multiple;  
  74.                 console.log('posterInitSize', this.poster.widthIn, this.poster.heightIn);  
  75.             },  
  76.             // 海报绘制代码  
  77.             posterDraw : function(){  
  78.                 // 步骤 01. 绘制背景颜色  
  79.                 this.step01();  
  80.                 // 步骤 02. 绘制标题  
  81.                 this.step02();  
  82.                 // 步骤 03. 绘制发布人  
  83.                 this.step03();  
  84.                 // 步骤 04. 绘制最下面一行tips  
  85.                 this.step04();  
  86.                 // 步骤 05. 绘制图片等  
  87.                 this.step05();  
  88.             },  
  89.             // 步骤 01 : 绘制背景颜色  
  90.             step01 : function () {  
  91.                 // 设置填充色  
  92.                 this.poster.context.setFillStyle(this.poster.bgColor);  
  93.                 // 用fillRect(x, y, width, height)方法画一个矩形  
  94.                 this.poster.context.fillRect(0,0,this.poster.widthIn, this.poster.heightIn);  
  95.                 // 测试绘制矩形  
  96.                 // this.poster.context.draw()  
  97.             },  
  98.             step02 : function () {  
  99.                 // 文本内容,  
  100.                 // x,  
  101.                 // y,  
  102.                 // 颜色,  
  103.                 // 文本大小,  
  104.                 // 横向对齐方式  
  105.                 /**  
  106.                  * 左侧空出30   px，顶部banner，260高度 + 20空隙  
  107.                  */  
  108.                 this.drawText(  
  109.                     this.posterDetail.title,   
  110.                     30,  
  111.                     280,   
  112.                     '#000000',   
  113.                     16  * this.poster.multiple,   
  114.                     'left'  
  115.                 );  
  116.             },  
  117.             step03 : function () {  
  118.                 // 文本内容，发布人,  
  119.                 // x,  
  120.                 // y,  
  121.                 // 颜色,  
  122.                 // 文本大小,  
  123.                 // 横向对齐方式  
  124.                 /**  
  125.                  * 左侧空出30   px + 头像 50px ，顶部banner，260高度 + 20空隙  
  126.                  * 底部空出30px + 一行字留白 40px   
  127.                  */  
  128.                 this.drawText(  
  129.                     this.posterDetail.name,   
  130.                     80,  
  131.                     this.poster.heightIn - 140,   
  132.                     '#000000',   
  133.                     16  * this.poster.multiple,   
  134.                     'left'  
  135.                 );  
  136.             },  
  137.             step04 : function () {  
  138.                 // 文本内容,  
  139.                 // x,  
  140.                 // y,  
  141.                 // 颜色,  
  142.                 // 文本大小,  
  143.                 // 横向对齐方式  
  144.                 /**  
  145.                  * 左侧空出30   px + 头像 50px ，顶部banner，260高度 + 20空隙  
  146.                  * 底部空出30px + 一行字留白 40px   
  147.                  */  
  148.                 this.drawText(  
  149.                     '长按小程序码进入探路官小程序查看更多精彩',   
  150.                     30,  
  151.                     this.poster.heightIn - 50,   
  152.                     '#666666',   
  153.                     13  * this.poster.multiple,   
  154.                     'left'  
  155.                 );  
  156.             },  
  157.             async step05() {  
  158.                 await this.drawBanner()  
  159.                 await this.drawAvatar()  
  160.                 await this.drawQrcode()  
  161.                 // 在最后一步执行 drawIt 完整最终的绘制  
  162.                 this.drawIt();  
  163.             },  
  164.             drawBanner() {  
  165.                 const _this = this  
  166.                 return new Promise(function (resolve) {   
  167.                     // 绘制banner图  
  168.                     uni.downloadFile({  
  169.                         // 请使用自己的后端来实现二维码的生成  
  170.                         url: _this.posterDetail.titlepic,  
  171.                         success: (res) => {  
  172.                             if (res.statusCode === 200) {  
  173.                                 /**  
  174.                                  * imageResource    String  所要绘制的图片资源  
  175.                                  * x                Number  图像左上角的x坐标  
  176.                                  * y                Number  图像左上角的y坐标  
  177.                                  * width            Number  图像宽度  
  178.                                  * height           Number  图像高度  
  179.                                  */  
  180.                                 _this.poster.context.drawImage(res.tempFilePath, 0, 0, _this.poster.widthIn, 240);  
  181.                                 resolve();  
  182.                             }  
  183.                         },  
  184.                         fail:function(e){console.log(e);}  
  185.                     });  
  186.                 })  
  187.             },  
  188.             drawAvatar() {  
  189.                 const _this = this  
  190.                 return new Promise(function (resolve) {   
  191.                     // 绘制头像  
  192.                     uni.downloadFile({  
  193.                         // 请使用自己的后端来实现二维码的生成  
  194.                         url: _this.posterDetail.avatar,  
  195.                         success: (res) => {  
  196.                             if (res.statusCode === 200) {  
  197.                                 /**  
  198.                                  * imageResource    String  所要绘制的图片资源  
  199.                                  * x                Number  图像左上角的x坐标  
  200.                                  * y                Number  图像左上角的y坐标  
  201.                                  * width            Number  图像宽度  
  202.                                  * height           Number  图像高度  
  203.                                  */  
  204.                                 _this.poster.context.drawImage(res.tempFilePath, 30, _this.poster.heightIn - 170, 40, 40);  
  205.                                 resolve();  
  206.                             }  
  207.                         },  
  208.                         fail:function(e){console.log(e);}  
  209.                     });  
  210.                 })  
  211.             },  
  212.             drawQrcode() {  
  213.                 const _this = this  
  214.                 return new Promise(function (resolve) {   
  215.                     // 绘制二维码  
  216.                     uni.downloadFile({  
  217.                         url: _this.posterDetail.qrcode,  
  218.                         header: {  
  219.                             'token': _this.gRequest.token  
  220.                         },  
  221.                         success: (res) => {  
  222.                             if (res.statusCode === 200) {  
  223.                                 /**  
  224.                                  * imageResource    String  所要绘制的图片资源  
  225.                                  * x                Number  图像左上角的x坐标  
  226.                                  * y                Number  图像左上角的y坐标  
  227.                                  * width            Number  图像宽度  
  228.                                  * height           Number  图像高度  
  229.                                  */  
  230.                                 _this.poster.context.drawImage(res.tempFilePath, _this.poster.widthIn - 180, _this.poster.heightIn - 250, 150, 150);  
  231.                                 resolve();  
  232.                             }  
  233.                         },  
  234.                         fail:function(e){console.log(e);}  
  235.                     });  
  236.                 })  
  237.             },  
  238.             // 绘制文本, 参数 : 文本内容,x,y,颜色,文本大小,横向对齐方式  
  239.             drawText:function(content, x, y, color, size, align){  
  240.                 const ctx = this.poster.context  
  241.                 ctx.setFontSize(size);  
  242.                 ctx.setFillStyle(color);  
  243.                 ctx.setTextAlign(align);  
  244.                 // this.poster.context.fillText(content,x,y);  
  245.                   
  246.                 var lineWidth = 0;  
  247.                 var canvasWidth = this.poster.widthIn - 60;//计算canvas的宽度，要留下两边的60  
  248.                 var initHeight=y;//绘制字体距离canvas顶部初始的高度  
  249.                 var lastSubStrIndex= 0; //每次开始截取的字符串的索引  
  250.                 for(let i=0;i<content.length;i++){   
  251.                     lineWidth+=ctx.measureText(content[i]).width;   
  252.                     if(lineWidth>canvasWidth){    
  253.                         ctx.fillText(content.substring(lastSubStrIndex,i),x,initHeight);//绘制截取部分  
  254.                         initHeight+=20;//20为字体的高度  
  255.                         lineWidth=0;  
  256.                         lastSubStrIndex=i;  
  257.                     }   
  258.                     if(i==content.length-1){//绘制剩余部分  
  259.                         ctx.fillText(content.substring(lastSubStrIndex,i+1),x,initHeight);  
  260.                     }  
  261.                 }  
  262.             },  
  263.             // 最终绘制函数  
  264.             drawIt : function(){  
  265.                 this.poster.context.draw(true, ()=>{  
  266.                     uni.canvasToTempFilePath({  
  267.                       x: 0,  
  268.                       y: 0,  
  269.                       width: this.poster.widthIn,  
  270.                       height: this.poster.heightIn,  
  271.                       destWidth: this.poster.widthIn,  
  272.                       destHeight: this.poster.heightIn,  
  273.                       canvasId: this.id,  
  274.                       success:(res)=>{  
  275.                         // 在H5平台下，tempFilePath 为 base64  
  276.                         this.poster.imgSrc = res.tempFilePath;  
  277.                       },  
  278.                       fail:(error) => {  
  279.                           console.log('生成canvas失败', error)  
  280.                       }  
  281.                     },this);  
  282.                 });  
  283.             },  
  284.             // 长按事件  
  285.             longpress : function () {  
  286.                 uni.saveImageToPhotosAlbum({  
  287.                     filePath: this.poster.imgSrc,  
  288.                     success:()=>{  
  289.                         // console.log('save success');  
  290.                         uni.showToast({  
  291.                             title:"图片已经保存到您的相册~"  
  292.                         })  
  293.                     }  
  294.                 });  
  295.             }  
  296.         }  
  297.     }  
  298. </script>  
  299.   
  300. <style>  
  301. </style>  

 

 

 

 

 

 

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <view>  
  3.         <view @click="open3">点我打开</view>  
  4.         <gui-popup ref="guipopup3" position="bottom">  
  5.             <view class="gui-relative gui-box-shadow gui-bg-gray" style="padding: 60rpx 20rpx;">  
  6.                 <canvas  
  7.                 :style="{  
  8.                     width:poster.widthIn+'px',   
  9.                     height:poster.heightIn+'px',   
  10.                     boxShadow: '0 0 15px #cccccc'  
  11.                 }"   
  12.                 canvas-id="canvas1" @longpress="saveQrcode"></canvas>  
  13.                 <!-- iphone 底部操作按钮躲避 -->  
  14.                 <gui-iphone-bottom></gui-iphone-bottom>  
  15.                 <!-- 关闭按钮 -->  
  16.                 <text class="gui-block-text demo-close iconfont gui-color-white gui-absolute-rt"  
  17.                 @tap.stop="close3"></text>  
  18.             </view>  
  19.         </gui-popup>  
  20.           
  21.         <!-- <canvas  
  22.         :style="{  
  23.             width:poster.widthIn+'px',   
  24.             height:poster.heightIn+'px',   
  25.             boxShadow: '0 0 15px #cccccc'  
  26.         }"   
  27.         canvas-id="canvas1" @longpress="saveQrcode"></canvas> -->  
  28.     </view>  
  29. </template>  
  30.   
  31. <script>  
  32.     export default {  
  33.         props: {  
  34.             posterDetail: {  
  35.                 type: Object,  
  36.                 default() {  
  37.                     return {  
  38.                         id: '',  
  39.                         title: '海南中线骑行',  
  40.                         titlepic: 'https://wxapp.tanluguan.cn/api/static/map.jpg',  
  41.                         name: '我是张三',  
  42.                         avatar: 'https://wxapp.tanluguan.cn/api/static/map.jpg',  
  43.                         qrcode: 'https://wxapp.tanluguan.cn/api/road/poster-qrcode?id=1'  
  44.                     }  
  45.                 }  
  46.             }  
  47.         },  
  48.         data() {  
  49.             return {  
  50.                 // "xingchengliangdian": []  
  51.                 poster: {  
  52.                     id: 'canvas1',  
  53.                     context  : null, // canvas内容  
  54.                     width    : 700,   // 画布宽度，单位 rpx  
  55.                     height   : 1000,  // 画布高度  
  56.                     widthIn  : 300,   // 自动计算转换为 px  
  57.                     heightIn : 0,  //  自动计算转换为 px  
  58.                     bgColor  : '#ffffff', // 背景颜色  
  59.                     imgSrc   : null,  
  60.                     multiple : 1 // 将画布放大 2.0 - 2.9 倍（支持小数，过大app端会出现无法渲染的问题），保存的图片更清晰  
  61.                 }  
  62.             }  
  63.         },  
  64.         created() {  
  65.             // this.$nextTick(() => {  
  66.             //  this.getPoster()  
  67.             // })  
  68.         },  
  69.         methods: {  
  70.             //03 底部弹出模式  
  71.             open3  : function () {  
  72.                 if(!this.poster.imgSrc) {  
  73.                     this.$refs.guipopup3.open();  
  74.                     setTimeout(() => {  
  75.                         this.getPoster()  
  76.                     },500)  
  77.                 }else{  
  78.                     this.$refs.guipopup3.open();  
  79.                 }  
  80.             },  
  81.             close3 : function () {this.$refs.guipopup3.close();},  
  82.             // 生成海报  
  83.             getPoster() {  
  84.                 uni.showLoading({title:'loading ...'});  
  85.                  
  86.                 this.posterInitSize();  
  87.                 // 画布初始化  
  88.                 this.poster.context = uni.createCanvasContext(this.poster.id, this);  
  89.                 
  90.                 //延迟500毫秒等待画布创建  
  91.                 setTimeout(()=>{  
  92.                     this.posterDraw();  
  93.                     uni.hideLoading();  
  94.                 }, 500);  
  95.             },  
  96.             // 画布初始化  
  97.             posterInitSize : function () {  
  98.                 // 将rpx单位值转换成px  
  99.                 this.poster.widthIn  = uni.upx2px(this.poster.width)  * this.poster.multiple;  
  100.                 this.poster.heightIn = uni.upx2px(this.poster.height) * this.poster.multiple;  
  101.                 console.log('posterInitSize', this.poster.widthIn, this.poster.heightIn);  
  102.             },  
  103.             // 海报绘制代码  
  104.             posterDraw : function(){  
  105.                 // 步骤 01. 绘制背景颜色  
  106.                 this.step01();  
  107.                 // 步骤 02. 绘制标题  
  108.                 this.step02();  
  109.                 // 步骤 03. 绘制发布人  
  110.                 this.step03();  
  111.                 // 步骤 04. 绘制最下面一行tips  
  112.                 this.step04();  
  113.                 // 步骤 05. 绘制图片等  
  114.                 this.step05();  
  115.             },  
  116.             // 步骤 01 : 绘制背景颜色  
  117.             step01 : function () {  
  118.                 // 设置填充色  
  119.                 this.poster.context.setFillStyle(this.poster.bgColor);  
  120.                 // 用fillRect(x, y, width, height)方法画一个矩形  
  121.                 this.poster.context.fillRect(0,0,this.poster.widthIn, this.poster.heightIn);  
  122.                 // 测试绘制矩形  
  123.                 // this.poster.context.draw()  
  124.             },  
  125.             step02 : function () {  
  126.                 // 文本内容,  
  127.                 // x,  
  128.                 // y,  
  129.                 // 颜色,  
  130.                 // 文本大小,  
  131.                 // 横向对齐方式  
  132.                 /**  
  133.                  * 左侧空出30   px，顶部banner，260高度 + 20空隙  
  134.                  */  
  135.                 this.drawText(  
  136.                     this.posterDetail.title,   
  137.                     30,  
  138.                     280,   
  139.                     '#000000',   
  140.                     16  * this.poster.multiple,   
  141.                     'left'  
  142.                 );  
  143.             },  
  144.             step03 : function () {  
  145.                 // 文本内容,  
  146.                 // x,  
  147.                 // y,  
  148.                 // 颜色,  
  149.                 // 文本大小,  
  150.                 // 横向对齐方式  
  151.                 /**  
  152.                  * 左侧空出30   px + 头像 50px ，顶部banner，260高度 + 20空隙  
  153.                  * 底部空出30px + 一行字留白 40px   
  154.                  */  
  155.                 this.drawText(  
  156.                     this.posterDetail.name,   
  157.                     80,  
  158.                     this.poster.heightIn - 170,   
  159.                     '#000000',   
  160.                     16  * this.poster.multiple,   
  161.                     'left'  
  162.                 );  
  163.             },  
  164.             step04 : function () {  
  165.                 // 文本内容,  
  166.                 // x,  
  167.                 // y,  
  168.                 // 颜色,  
  169.                 // 文本大小,  
  170.                 // 横向对齐方式  
  171.                 /**  
  172.                  * 左侧空出30   px + 头像 50px ，顶部banner，260高度 + 20空隙  
  173.                  * 底部空出30px + 一行字留白 40px   
  174.                  */  
  175.                 this.drawText(  
  176.                     '长按小程序码进入探路官小程序查看更多精彩',   
  177.                     30,  
  178.                     this.poster.heightIn - 50,   
  179.                     '#666666',   
  180.                     16  * this.poster.multiple,   
  181.                     'left'  
  182.                 );  
  183.             },  
  184.             async step05() {  
  185.                 await this.drawBanner()  
  186.                 await this.drawAvatar()  
  187.                 await this.drawQrcode()  
  188.                 // 在最后一步执行 drawIt 完整最终的绘制  
  189.                 this.drawIt();  
  190.             },  
  191.             drawBanner() {  
  192.                 const _this = this  
  193.                 return new Promise(function (resolve) {   
  194.                     // 绘制banner图  
  195.                     uni.downloadFile({  
  196.                         // 请使用自己的后端来实现二维码的生成  
  197.                         url: _this.posterDetail.titlepic,  
  198.                         success: (res) => {  
  199.                             if (res.statusCode === 200) {  
  200.                                 /**  
  201.                                  * imageResource    String  所要绘制的图片资源  
  202.                                  * x                Number  图像左上角的x坐标  
  203.                                  * y                Number  图像左上角的y坐标  
  204.                                  * width            Number  图像宽度  
  205.                                  * height           Number  图像高度  
  206.                                  */  
  207.                                 _this.poster.context.drawImage(res.tempFilePath, 0, 0, _this.poster.widthIn, 240);  
  208.                                 resolve();  
  209.                             }  
  210.                         },  
  211.                         fail:function(e){console.log(e);}  
  212.                     });  
  213.                 })  
  214.             },  
  215.             drawAvatar() {  
  216.                 const _this = this  
  217.                 return new Promise(function (resolve) {   
  218.                     // 绘制头像  
  219.                     uni.downloadFile({  
  220.                         // 请使用自己的后端来实现二维码的生成  
  221.                         url: _this.posterDetail.avatar,  
  222.                         success: (res) => {  
  223.                             if (res.statusCode === 200) {  
  224.                                 /**  
  225.                                  * imageResource    String  所要绘制的图片资源  
  226.                                  * x                Number  图像左上角的x坐标  
  227.                                  * y                Number  图像左上角的y坐标  
  228.                                  * width            Number  图像宽度  
  229.                                  * height           Number  图像高度  
  230.                                  */  
  231.                                 _this.poster.context.drawImage(res.tempFilePath, 30, _this.poster.heightIn - 200, 40, 40);  
  232.                                 resolve();  
  233.                             }  
  234.                         },  
  235.                         fail:function(e){console.log(e);}  
  236.                     });  
  237.                 })  
  238.             },  
  239.             drawQrcode() {  
  240.                 const _this = this  
  241.                 return new Promise(function (resolve) {   
  242.                     // 绘制二维码  
  243.                     uni.downloadFile({  
  244.                         url: _this.posterDetail.qrcode,  
  245.                         success: (res) => {  
  246.                             if (res.statusCode === 200) {  
  247.                                 /**  
  248.                                  * imageResource    String  所要绘制的图片资源  
  249.                                  * x                Number  图像左上角的x坐标  
  250.                                  * y                Number  图像左上角的y坐标  
  251.                                  * width            Number  图像宽度  
  252.                                  * height           Number  图像高度  
  253.                                  */  
  254.                                 _this.poster.context.drawImage(res.tempFilePath, _this.poster.widthIn - 180, _this.poster.heightIn - 250, 150, 150);  
  255.                                 resolve();  
  256.                             }  
  257.                         },  
  258.                         fail:function(e){console.log(e);}  
  259.                     });  
  260.                 })  
  261.             },  
  262.             // 绘制文本, 参数 : 文本内容,x,y,颜色,文本大小,横向对齐方式  
  263.             drawText:function(content, x, y, color, size, align){  
  264.                 const ctx = this.poster.context  
  265.                 ctx.setFontSize(size);  
  266.                 ctx.setFillStyle(color);  
  267.                 ctx.setTextAlign(align);  
  268.                 // this.poster.context.fillText(content,x,y);  
  269.                   
  270.                 var lineWidth = 0;  
  271.                 var canvasWidth = this.poster.widthIn - 60;//计算canvas的宽度，要留下两边的60  
  272.                 var initHeight=y;//绘制字体距离canvas顶部初始的高度  
  273.                 var lastSubStrIndex= 0; //每次开始截取的字符串的索引  
  274.                 for(let i=0;i<content.length;i++){   
  275.                     lineWidth+=ctx.measureText(content[i]).width;   
  276.                     if(lineWidth>canvasWidth){    
  277.                         ctx.fillText(content.substring(lastSubStrIndex,i),x,initHeight);//绘制截取部分  
  278.                         initHeight+=20;//20为字体的高度  
  279.                         lineWidth=0;  
  280.                         lastSubStrIndex=i;  
  281.                     }   
  282.                     if(i==content.length-1){//绘制剩余部分  
  283.                         ctx.fillText(content.substring(lastSubStrIndex,i+1),x,initHeight);  
  284.                     }  
  285.                 }  
  286.             },  
  287.             // 最终绘制函数  
  288.             drawIt : function(){  
  289.                 this.poster.context.draw(true, ()=>{  
  290.                     uni.canvasToTempFilePath({  
  291.                       x: 0,  
  292.                       y: 0,  
  293.                       width: this.poster.widthIn,  
  294.                       height: this.poster.heightIn,  
  295.                       destWidth: this.poster.widthIn,  
  296.                       destHeight: this.poster.heightIn,  
  297.                       canvasId: this.poster.id,  
  298.                       success:(res)=>{  
  299.                         // 在H5平台下，tempFilePath 为 base64  
  300.                         this.poster.imgSrc = res.tempFilePath;  
  301.                         uni.hideLoading();  
  302.                       }   
  303.                     },this);  
  304.                 });  
  305.             },  
  306.             // 长按事件  
  307.             longpress : function () {  
  308.                 uni.saveImageToPhotosAlbum({  
  309.                     filePath: this.poster.imgSrc,  
  310.                     success:()=>{  
  311.                         console.log('save success');  
  312.                         uni.showToast({  
  313.                             title:"图片已经保存到您的相册~"  
  314.                         })  
  315.                     }  
  316.                 });  
  317.             }  
  318.         }  
  319.     }  
  320. </script>  
  321.   
  322. <style>  
  323. </style>  

 

 

本文来自于：http://www.yoyo88.cn/study/uniapp/648.html

上一篇 Android studio报错java.lang.ArrayIndexOutOfBoundsException: Index 6 out of bounds for length 6
下一篇 uniapp获取底部安全距离以及状态栏高度等
相关的文章
Powered by yoyo苏ICP备15045725号