123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212 |
- <template>
- <view>
- <canvas :canvas-id="CanvasID" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
- </view>
- </template>
- <script>
- var _this;
- export default {
- name: 'wm-poster',
- props: {
- CanvasID:{ //CanvasID 等同于 canvas-id
- Type:String,
- default:'PosterCanvas'
- },
- imgSrc:{ //展示图
- Type:String,
- default:''
- },
- QrSrc:{ //二维码
- Type:String,
- default:''
- },
- Title:{ //文本内容
- Type:String,
- default:''
- },
- TitleColor:{ //标题颜色
- Type:String,
- default:'#333333'
- },
- LineType:{ //标题显示行数 (注超出2行显示会导致画布布局絮乱)
- Type:[String,Boolean],
- default:true
- },
- PriceTxt:{ //价格值
- Type:String,
- default:''
- },
- PriceColor:{ //价格颜色
- Type:String,
- default:'#e31d1a'
- },
- OriginalTxt:{ //原价值
- Type:String,
- default:''
- },
- OriginalColor:{ //默认颜色(如原价与扫描二维码颜色)
- Type:String,
- default:'#b8b8b8'
- },
- Width:{ //画布宽度 (高度根据图片比例计算 单位upx)
- Type:String,
- default:1500
- },
- CanvasBg:{ //canvas画布背景色
- Type:String,
- default:'#ffffff'
- },
- Referrer:{ //推荐人信息
- Type:String,
- default:''
- },
- ViewDetails:{ //描述提示文字
- Type:String,
- default:'长按或扫描识别二维码'
- }
- },
- data() {
- return {
- canvasW:0,
- canvasH: 0,
- canvasImgSrc:'',
- ctx:null
- };
- },
- methods: {
- async OnCanvas() {
- _this.ctx = uni.createCanvasContext(_this.CanvasID,this);
- const C_W = uni.upx2px(_this.Width), //canvas宽度
- C_P = uni.upx2px(60), //canvas Paddng 间距
- C_Q = uni.upx2px(300); //二维码或太阳码宽高
- let _strlineW = 0; //文本宽度
- let _imgInfo = await _this.getImageInfo({ imgSrc: _this.imgSrc }); //广告图
- let _QrCode = await _this.getImageInfo({ imgSrc: _this.QrSrc }); //二维码或太阳码
- let r = [_imgInfo.width, _imgInfo.height];
- let q = [_QrCode.width, _QrCode.height];
- let imgW = C_W - C_P * 2;
- if (r[0] != imgW) {
- r[1] = Math.floor((imgW / r[0]) * r[1]);
- r[0] = imgW;
- }
- if (q[0] != C_Q) {
- q[1] = Math.floor((C_Q / q[0]) * q[1]);
- q[0] = C_Q;
- }
- _this.canvasW = C_W;
- _this.canvasH = r[1] + q[1] + 256;
- _this.ctx.setFillStyle(_this.CanvasBg); //canvas背景颜色
- _this.ctx.fillRect(0, 0, C_W, _this.canvasH); //canvas画布大小
-
- //添加图片展示
- _this.ctx.drawImage(_imgInfo.path, C_P, C_P, r[0], r[1]);
- //添加图片展示 end
- //设置文本
- _this.ctx.setFontSize(uni.upx2px(56)); //设置标题字体大小
- _this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
- let _strLastIndex = 0; //每次开始截取的字符串的索引
- let _strHeight = r[1] + C_P * 2 + 20; //绘制字体距离canvas顶部的初始高度
- let _num=1;
- for (let i = 0; i < _this.Title.length; i++) {
- _strlineW += _this.ctx.measureText(_this.Title[i]).width;
- if (_strlineW > r[0]) {
- if(_num == 2&&_this.LineType){
- //文字换行数量大于二进行省略号处理
- _this.ctx.fillText(_this.Title.substring(_strLastIndex, i-8)+'...', C_P, _strHeight);
- _strlineW = 0;
- _strLastIndex = i;
- _num++;
- break;
- }else{
- _this.ctx.fillText(_this.Title.substring(_strLastIndex, i), C_P, _strHeight);
- _strlineW = 0;
- _strHeight += 40;
- _strLastIndex = i;
- _num++;
- }
- }else if (i == _this.Title.length - 1) {
- _this.ctx.fillText(_this.Title.substring(_strLastIndex, i + 1), C_P, _strHeight);
- _strlineW = 0;
- }
- }
- //设置文本 end
- //设置价格
- _strlineW = C_P;
- _strHeight += uni.upx2px(120);
- if(_num==1){
- _strHeight += 40; //单行标题时占位符
- }
-
- if(_this.PriceTxt !=''){ //判断是否有销售价格
- _this.ctx.setFillStyle(_this.PriceColor);
- _this.ctx.setFontSize(uni.upx2px(76));
- _this.ctx.fillText(_this.PriceTxt, _strlineW, _strHeight); //商品价格
- _strlineW += _this.ctx.measureText(_this.PriceTxt).width + uni.upx2px(20);
- }
- if(_this.PriceTxt !='' && _this.OriginalTxt !=''){ //判断是否有销售价格且原价
- _this.ctx.setFillStyle(_this.OriginalColor);
- _this.ctx.setFontSize(uni.upx2px(48));
- _this.ctx.fillText(_this.OriginalTxt, _strlineW, _strHeight); //商品原价
- }
- _this.ctx.strokeStyle = _this.OriginalColor;
- _this.ctx.moveTo(_strlineW, _strHeight - uni.upx2px(20)); //起点
- _this.ctx.lineTo(_strlineW + _this.ctx.measureText(_this.OriginalTxt).width, _strHeight - uni.upx2px(20)); //终点
- _this.ctx.stroke();
- //设置价格 end
- //添加二维码
- _strHeight += uni.upx2px(40);
- _this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P, _strHeight, q[0], q[1]);
- //添加二维码 end
- //添加推荐人与描述
- _this.ctx.setFillStyle(_this.TitleColor);
- _this.ctx.setFontSize(uni.upx2px(60));
- _this.ctx.fillText(_this.Referrer, C_P, _strHeight + q[1] / 2);
- _this.ctx.setFillStyle(_this.OriginalColor);
- _this.ctx.setFontSize(uni.upx2px(48));
- _this.ctx.fillText(_this.ViewDetails, C_P, _strHeight + q[1] / 2 + 40);
- //添加推荐人与描述 end
-
- //延迟后渲染至canvas上
- setTimeout(function() {
- _this.ctx.draw(true,(ret)=>{
- _this.getNewImage();
- });
- }, 600);
- },
- async getImageInfo({ imgSrc }) {
- return new Promise((resolve, errs) => {
- uni.getImageInfo({
- src: imgSrc,
- success: function(image) {
- resolve(image);
- },
- fail(err) {
- errs(err);
- }
- });
- });
- },
- getNewImage(){
- uni.canvasToTempFilePath({
- canvasId: _this.CanvasID,
- quality: 1,
- complete: (res) => {
- console.log(res.tempFilePath);
- _this.$emit('success',res);
- }
- },this);
- }
-
- },
- mounted() {
- _this = this;
- }
- };
- </script>
- <style></style>
|