canvas 海报图

首先第一步，咱先把布局写好，我们最终所展示的是 image 不是 canvas，所以把canvas定位到十万八千里之外去

<view class="main_canvas"><view class="canvas_image"><image :src="template" mode=""></image></view><canvas canvas-id="firstCanvas" id="firstCanvas" :style="{width:canvasWidth+'rpx',height:canvasHeight+'rpx',background: '#f6f6f6',position: 'absolute',top: '-17999rpx',left:'-99999rpx',transform: 'scale(0.5)'}"></canvas><view class="canvas_button" @click="preservation"><view class="iconfont iconbaocun"></view><text>保存海报</text></view>
</view>

第二步，在data里面把初始值定好

data(){return {canvasWidth: 570, //图片宽 宽高都是乘以2的哦canvasHeight: 950, //图片高template: '', //canvas 导出来的图片路径}
}

第三步，咱们就开始画图

// 海报自适应计算
calculationWidth(num) {let windowWidth = uni.getSystemInfoSync().windowWidth; //得到屏幕宽度return num * windowWidth / 375;
},
posterBtn() {let that = this;let canvasWidth = that.canvasWidth; //得到宽let canvasHeight = that.canvasHeight; //得到高// 存放第一张图let promise1 = new Promise(function(resolve, reject) {uni.getImageInfo({src: '', //存放网络图片success: (res) => {resolve(res)that.promiseOne = res.path},fail: (err) => {reject(err)}})})// 存放第二张图let promise2 = new Promise(function(resolve, reject) {uni.getImageInfo({src: '', //存放网络图片success: (res) => {resolve(res)that.promiseTwo = res.path},fail: (err) => {reject(err)}})})//...以此类推Promise.all([promise1, promise2, promise3]).then(res => {const ctx = uni.createCanvasContext('firstCanvas') //获得canvas-idctx.setFillStyle('#fff') //填充色ctx.fillRect(0, 0, canvasWidth, canvasHeight) //画矩形ctx.drawImage(that.promiseOne, 0, 0, canvasWidth, that.calculationWidth(400)); //背景图// 下面是画圆形头像哦ctx.save() //保存当前的绘图上下文。ctx.beginPath() //开始创建一个路径ctx.arc(that.calculationWidth(40), that.calculationWidth(440),that.calculationWidth(24), 0,2 * Math.PI,false) //画一个圆形裁剪区域ctx.strokeStyle = "white"; //arc线条颜色ctx.stroke(); //标识arc线条ctx.clip() //裁剪ctx.drawImage(that.promiseTwo, that.calculationWidth(15),that.calculationWidth(415), that.calculationWidth(49), that.calculationWidth(49)); //头像ctx.restore() //恢复之前保存的绘图上下文ctx.setFillStyle('#333') //文字颜色：默认黑色ctx.font = 'bold 14px PingFang-SC-Regular'that.canvasWraptitleText(ctx, "标题", that.calculationWidth(72), that.calculationWidth(435),that.calculationWidth(115), that.calculationWidth(30), that.calculationWidth(1))ctx.setFillStyle('#808080') //文字颜色：默认黑色ctx.font = 'normal 12px PingFang-SC-Regular'that.canvasWraptitleText(ctx, "介绍", that.calculationWidth(72), that.calculationWidth(455),that.calculationWidth(115), that.calculationWidth(30), that.calculationWidth(1))ctx.drawImage(that.promiseThree, that.calculationWidth(211), that.calculationWidth(408), that.calculationWidth(60), that.calculationWidth(60)); //二维码ctx.draw(true, function() {uni.canvasToTempFilePath({width: canvasWidth,height: canvasHeight,destWidth: canvasWidth * 4, //导出的宽高越大，可以使保存的图片更加清晰destHeight: canvasHeight * 4,canvasId: 'firstCanvas',fileType: 'png',success: function(res) {console.log(res)that.template = res.tempFilePath //导出成图片路径}})})})
}
// 超出显示省略号
canvasWraptitleText(canvas, text, x, y, maxWidth, lineHeight, maxRowNum) {if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {return;}// 字符分隔为数组var arrText = text.split('');var line = '';var rowNum = 1for (var n = 0; n < arrText.length; n++) {var testLine = line + arrText[n];var metrics = canvas.measureText(testLine);var testWidth = metrics.width;if (testWidth > maxWidth && n > 0) {if (rowNum >= maxRowNum) {var arrLine = testLine.split('')// arrLine.splice(-9)var newTestLine = arrLine.join("")newTestLine += "..."canvas.fillText(newTestLine, x, y);return}canvas.fillText(line, x, y);line = arrText[n];y += lineHeight;rowNum += 1} else {line = testLine;}}canvas.fillText(line, x, y);
},

canvas 海报图相关推荐

canvas合成海报图
根据接口返回的参数生成一个带有相关链接的二维码然后和接口返回的背景图片列表n 合成n张海报图并可以下载到桌面所需要的参数和图片列表都是父组件传过来的使用了之前写过的alert弹窗 <tem ...
js 通过canvas生成带二维码的海报图
前言 h5移动端生成海报图,可长按图片保存或发送给朋友,或长按识别二维码.两种场景:第一种是生成项目分享海报图,通过背景图和地址生成的二维码合成一张海报图:第二种是通过页面生成商品海报图,页面有产品介 ...
微信小程序 —— canvas生成海报图与分享
整体思路获取手机屏幕大小去依据设计尺寸比例调整 -wx.getSystemInfo 网络图片.base64图片保存到到本地临时文件路径 canvas绘制图片 - wx.createCanvasCon ...
TP5 生成微信小程序海报图
关于生成海报图,话不多说,直接上代码 1.先创建公共方法,生成海报图的根方法,直接复制就可以用 2.创建调用方法(这里是写好的,可以用做参考) 附:最后附上生成的海报 1.先创建公共方法,生成海报图的 ...
小程序画布合成二维码海报图，并保存到相册
小程序画布合成二维码海报图,并保存到相册实现效果如下图: 步骤分析 1,先获取需要合成的海报和二维码. 2,获取图片的本地路径,如果图片不是网络连接则不需要此操作. 3,通过手机型号,根据屏幕的大小 ...
前端生成海报图：html2canvas 生成海报图/网页html转图片
html2canvas 生成海报图 <html><head> <title>生成海报图Demo</title> </head><bod ...
PHP使用Grafika合成图片，生成海报图
需求背景: 在小程序上生成海报图,但在保存图片时,只能保存其中的小程序码图片,保存下来的图片过于单调,且无法确认该图片的作用性,所以需要调整为保存一整张海报图. 海报效果图: 需求分析: 在海报图中, ...
在微信小程序中实现生成海报图并保存到相册
效果图镇楼: 技术依赖: 弹窗 (vant-weapp 提供的 van-popup 组件) 海报图 (wx-canvas-2d 工具) 弹窗组件的使用方式可以点击上面链接查看,本篇主要讲解海报图绘制方 ...
一个可以不用写复杂Canvas逻辑的画报解决方案，傻瓜式开发Canvas海报
一个可以不用写复杂Canvas逻辑的画报解决方案,傻瓜式开发Canvas海报介绍参数说明 config images images/config images/config/round texts ...

canvas 海报图

canvas 海报图相关推荐

最新文章

热门文章