使用canvas绘制海报

想要绘制这样的海报

1.结构

<!-- 生成海报的canvas -->
<view class="my-canvas-box" @touchmove.stop.prevent :class="posterInfo.status ? 'show' : 'hide'" @click="posterInfo.status = false"><canvas class="my-canvas" canvas-id="mycanvas" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas><button class="btn" @tap="save" >保存图片</button>
</view>//对于微信公众号，可以使用html2canvas将html转成图片然后设置一个图片蒙层，src是转成的图片地址。然后长按保存<uni-popup ref="poster" type="center" v-if="isweixin"><view class="poster-pop"><view class="my-canvas" ><view class="canvas-top flex"><image :src="logo" mode=""></image><view class=" flex column justify-content-center"><view class="font-size-28 font-600">鱿鱼圈</view><view class="grey font-size-22">SquidTrade</view></view></view><view class="poster-centent"><view class="goodsimg"><image :src="goodsDetail.images[0]" mode="aspectFill"></image><!-- 拍卖 --><image src="../../static/img/paimaijiao.png" mode="" v-if="goodsDetail.type==2"  class="goods-type"></image><!-- 盲拍 --><image src="../../static/img/mangpaijiao.png" mode="" v-else-if="goodsDetail.type==3" class="goods-type"></image><!-- 估价 --><image src="../../static/img/gujiajiao.png" mode="" v-else class="goods-type"></image></view><view class="goodsmessage flex justify-content-between"><view class="flex column justify-content-between"><view class="font-size-32 font-600">{{goodsDetail.title}}</view><view class="font-size-24"><text class="grey">当前价</text> <text class="font-size-30 red font-600 startprice">{{goodsDetail.now_price}}</text><text>鱿鱼圈</text></view></view><view class=""><image :src="posterInfo.usercode" mode="aspectFit"></image></view></view></view></view><!-- 生成图片后的蒙层 --><image :src="img" mode="" class="img-box"></image><button class="btn">长按图片保存</button></view></uni-popup>

import html2canvas from '@/common/html2canvas.min.js'

2.数据

// 用来控制canvas遮罩层的显示与隐藏
posterInfo: {status: false,type:0,usercode:''
},
img:''   //保存到本地的海报地址
canvasW:0,
canvasH:0,

3.绘制

 generatePoster(){// #ifdef H5if(this.isweixin){let that = thisthis.$refs.poster.open()uni.showLoading({title:'海报生成中。。。'})setTimeout(() => {const dom = document.querySelector('.my-canvas') // 需要生成图片内容的 dom 节点html2canvas(dom, {width: dom.clientWidth, //dom 原始宽度height: dom.clientHeight,scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0scrollX: 0,useCORS: true, //支持跨域scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项}).then((canvas) => {// 生成成功// html2canvas 生成成功的图片链接需要转成 base64位的url// ownerFun.callMethod('receiveRenderData', canvas.toDataURL('image/png'))that.img = canvas.toDataURL('image/png')uni.hideLoading()console.log(that.img,'图片生成成功')console.log(canvas,'canvas')}).catch(err=>{// 生成失败 弹出提示弹窗// ownerFun.callMethod('_errAlert',`【生成图片失败，请重试】${err}`)uni.hideLoading()console.log(err,'图片生成失败')})}, 300)}else{this.getPoster()}// #endif// #ifndef H5this.getPoster()// #endif},// 生成海报async getPoster(){uni.showLoading({title: '海报生成中'});let that = this// 获取设备信息，主要获取宽度，赋值给canvasW 也就是宽度：100%this.SystemInfo = await this.getSystemInfo();this.canvasW = this.SystemInfo.windowWidth*0.8; // 画布宽度this.canvasH = this.SystemInfo.windowHeight*0.7; this.posterInfo.status = truelet logo = await this.downloadFile(this.logo)let imgUrl = !!this.goodsDetail.images[0]?this.goodsDetail.images[0]:this.imgUrlthis.goodsImg = await this.downloadFile(imgUrl);this.ewmImg = await this.downloadFile(this.posterInfo.usercode);let typeUrl = this.type==1?"":''var context = uni.createCanvasContext('mycanvas',this)context.setFillStyle('#fff')context.fillRect(0,0,this.canvasW,this.canvasH)context.font = 'normal 400 12px PingFang SC-Bold, PingFang SC'context.setFillStyle('#999999');context.fillText('SquidTrade',80,60)context.setFontSize(12)context.setFillStyle('#999');context.fillText('当前价',20,that.canvasH-30)let priceWidth = context.measureText(this.goodsDetail.now_price).width + 80; //计算昵称宽度,绘制间隔距离context.setFontSize(12)context.setFillStyle('#333');context.fillText('鱿鱼圈',priceWidth,that.canvasH-30)// 绘制鱿鱼圈context.setFillStyle('#333')context.font = 'normal bold 16px PingFang SC-Bold, PingFang SC'context.fillText('鱿鱼圈', 80, 40);// 绘制商品名称// context.setFontSize(16);context.setFillStyle('#333');context.font = 'normal bold 16px PingFang SC-Bold, PingFang SC'context.fillText(this.goodsDetail.title,20,that.canvasH-54)// 绘制商品价格context.setFontSize(20)context.setFillStyle('#D50000');context.fillText(this.goodsDetail.now_price,60,that.canvasH-30)//绘制头像context.save()context.beginPath();context.arc(44, 44, 22, 0, 2 * Math.PI)context.clip();context.drawImage(logo.tempFilePath, 22, 22, 44, 44);context.restore();context.draw(true);// 商品图片context.drawImage(this.goodsImg.tempFilePath, 20, 80, that.canvasW-40, that.canvasH-170);context.draw(true);// 二维码context.drawImage(this.ewmImg.tempFilePath, that.canvasW-80, that.canvasH-80, 70, 70);context.draw(true);uni.hideLoading()},// 获取设备信息getSystemInfo(){return new Promise((req, rej) => {uni.getSystemInfo({success: function (res) {req(res)}});})},downloadFile(image) {return new Promise((req, rej) => {uni.downloadFile({url: image,success: function(res) {req(res)},});})},

4.点击保存按钮保存海报

    save(){let that = thisuni.canvasToTempFilePath({fileType: 'jpg',canvasId: 'mycanvas',quality: 1,success: (res) => {that.img = res.tempFilePathconsole.log(res.tempFilePath,'海报地址')that.download()},fail: function(err) {console.log(err)// reject(err)}},this)},download(){let that = thisconsole.log(this.img,'图片img')// 先下载图片uni.downloadFile({url:this.img,success: (res) => {console.log(res.tempFilePath,'下载后的图片地址')// #ifdef H5const imgUrl = res.tempFilePath;if(that.isweixin){uni.showToast({icon:'none',title:'请长按图片保存'})// that.preview(res.tempFilePath)// let canvas = document.querySelector('.my-canvas');// Canvas2Image.saveAsImage(canvas, this.canvasW, this.canvasH, 'png','商品分享');}else{var oA = document.createElement("a");oA.download = '下载图片'; // 设置下载的文件名，默认是'下载'oA.href = imgUrl;console.log(oA ,'按钮a')document.body.appendChild(oA);oA.click();oA.remove(); // 下载之后把创建的元素删除}// #endif// #ifdef MP-WEIXIN// 获取到图片本地地址后再保存图片到相册（因为此方法不支持远程地址）// that.preview()uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: () => {uni.showToast({title: "保存成功！",});},fail: () => {uni.showToast({title: "保存失败",});},});// #endif},});},

css：

.my-canvas-box {width: 750rpx;height: 100%;position: fixed;left: 0;top: 0;background-color: rgba(0, 0, 0, 0.6);z-index: 99;&.hide {display: none;}&.show {display: block;}.canvas-tip {color: #ffffff;font-size: 24rpx;margin-top: 30rpx;text-align: center;}.my-canvas {width: 614rpx;height: 907rpx;background: #FFFFFF;border-radius: 24rpx;margin: 155rpx auto 0;}.btn{margin: 30rpx auto 0;width: 614rpx;height: 87rpx;line-height: 87rpx;background: #FFD14A;border-radius: 44rpx;}
}.poster-pop{position: relative;.my-canvas{width: 614rpx;height: 907rpx;background: #FFFFFF;border-radius: 24rpx;.canvas-top{padding: 20rpx;image{width: 88rpx;height: 88rpx;border-radius: 50%;margin-right: 7rpx;}}.poster-centent{padding: 0 30rpx 30rpx;}.goodsimg{width: 555rpx;height: 555rpx;position: relative;image{width: 100%;height: 100%;}.goods-type{width: 97rpx;height: 97rpx;position: absolute;top:0;left:0}}.goodsmessage{margin-top: 38rpx;image{width: 140rpx;height: 140rpx;}.startprice{margin: 0 8rpx 0 14rpx;}}}.img-box{width: 614rpx;height: 907rpx; border-radius: 24rpx;position: absolute;top: 0;left: 0;}.btn{margin: 30rpx auto 0;width: 614rpx;height: 87rpx;line-height: 87rpx;background: #FFD14A;border-radius: 44rpx;text-align: center;}
}

使用canvas绘制海报相关推荐

canvas绘制海报分享，海报中设置圆角二维码
canvas绘制海报分享,海报中设置圆角二维码,背景图,动态的文字,绘制完成以后保存为图片,可长按分享海报图片. 下面看看效果图:(假设教师的图片是二维码) 这其中,背景图元素,还有教师的图片(假设是 ...
canvas绘制海报中文字自动换行
canvas:canvas绘制海报中文字自动换行问题描述 canvas绘制的海报在某一行文字过多时不会自动换行(设置文本宽度无用) 源代码 context.fillText(this.data.go ...
uniapp使用canvas绘制海报
Uniapp中使用canvas绘制海报可以按照以下步骤进行: 1. 引入需要绘制的图片资源这些图片可以是本地的,也可以是远程的.可以将图片资源放在项目的`static`目录下,例如:`static/ ...
canvas绘制海报及点击保存海报
1.canvas绘制海报 createcanvas() {let that = this,windowW = that.data.windowWconst query = wx.createSelec ...
小程序php生成海报,小程序用canvas绘制海报的做法
2020年第一篇文章,年初忙着复习刷题一直没空去写东西,书看的越多感觉越技不如人,始终徘徊在小菜鸡的行列中,最近项目里正好有一个canvas的业务,突然又燃起了我一个UI前端的火种,记下了踩坑和思考. ...
uniapp Canvas绘制海报
在绘制的过程中可能会需要文字换行文字换行在我上篇文章,链接:文字换行. 之前写过一个分享海报,但是觉得代码逻辑不清晰所以重新写一个我们的需求是这样子的 <view class="w ...
使用canvas绘制海报，包含文字、图片、base64图片
这里写目录标题步骤 1. 创建画布 2. 画图片 3. 画文字 4. 画base64图片保存完整代码 js vue 这里介绍使用js(jQuery)或者vue使用画布绘制海报,小程序uniapp ...
微信小程序使用canvas绘制海报并保存本地相册
在做微信小程序的时候,很多都会用到生成海报分享功能,刚好最近项目有这个需求,今天就发出来记录下首先是使用canvas绘制一张海报,微信小程序的canvas有老版本和新版本我是用的是新版本代码如下 ...
小程序中使用canvas绘制海报
最近项目需求使用canvas绘制朋友圈可分享的海报,中间遇到很多问题,于是上网搜索,完美解决后,在此总结一下. 先来看一下效果图,点击按钮生成带二维码的图片. 1.关于canvas画布的宽度和高度 w ...

使用canvas绘制海报

使用canvas绘制海报相关推荐

最新文章

热门文章