uni-app canvas创建画布

本文主要是介绍uni-app canvas创建画布，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

canvasTmp: function(arr2, store_name, successFn, errFun) {let that = this;const ctx = uni.createCanvasContext('myCanvas');ctx.clearRect(0, 0, 0, 0);/*** 只能获取合法域名下的图片信息,本地调试无法获取* */uni.getImageInfo({			src: arr2[0],success: function(res) {const WIDTH = res.width*0.71;const HEIGHT = res.height*1.04;// const WIDTH = 320;//  const HEIGHT = 450;let r = 70;let d = r * 2;let cx = 85;let cy = 110;ctx.drawImage(arr2[1], 0, 0, WIDTH, HEIGHT); // 小图ctx.save();ctx.arc(cx + r, cy + r, r, 0, 2 * Math.PI);ctx.drawImage(arr2[0], cx, cy, d, d); // 背景ctx.restore();const CONTENT_ROW_LENGTH = 40;let [contentLeng, contentArray, contentRows] = that.textByteLength(store_name, CONTENT_ROW_LENGTH);if (contentRows > 2) {contentRows = 2;let textArray = contentArray.slice(0, 2);textArray[textArray.length - 1] += '……';contentArray = textArray;}ctx.setTextAlign('center');ctx.setFontSize(26); // 文字ctx.setFillStyle('#000000');let contentHh = 26 * 1.3;for (let m = 0; m < contentArray.length; m++) {ctx.fillText(contentArray[m], 156, 430 + contentHh * m);}ctx.setTextAlign('left')ctx.setFontSize(28);ctx.setFillStyle('#FFFFFF');ctx.draw(true, function() {uni.canvasToTempFilePath({canvasId: 'myCanvas',fileType: 'png',destWidth: WIDTH,destHeight: HEIGHT,success: function(res) {uni.hideLoading();successFn && successFn(res.tempFilePath);},fail: function(err) {uni.hideLoading();errFun && errFun(err);}})});},fail: function(err) {uni.hideLoading();that.Tips({title: '无法获取图片信息'});errFun && errFun(err);}})},

调用 ： 

async spreadMsg(image ,name, title) {let that = this/** #ifndef H5   type: 'h5',   #endif  #ifdef MP || APP || APP-PLUS  #endif*/let rqData = {type: 'routine'}that.spreadData = [that.bgurl[that.type]]that.nickName = namethat.siteName = titlelet codeUrl = ""// #ifdef MP || APP-PLUSlet mpUrl = await that.downloadFilestoreImage(image)// #endifuni.showLoading({title: '海报生成中',mask: true});// 本来这个是个循环 也就是出现多个海报 去除了let arr2// #ifdef MP || APP-PLUS	arr2 = [mpUrl, await that.downloadFilestoreImage(that.bgurl[that.type])]// #endif// #ifdef H5let img = await that.imgToBase(that.bgurl[that.type])arr2 = [await that.imgToBase(image), img]			// #endifthat.$util.canvasTmp(arr2, name, (tempFilePath) => {that.$set(that.posterImage, 0, tempFilePath);}, (err) => {that.$set(that, 'canvasStatus', false);});uni.hideLoading();},

that.$util.PosterCanvasMer(arr2, name, (tempFilePath) => {
                    that.$set(that.posterImage, 0, tempFilePath);
                }, (err) => {
                    that.$set(that, 'canvasStatus', false);
                });

这篇关于uni-app canvas创建画布的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---