canvas合成海报图

布满荆棘的人生 2022-05-12 12:06 231阅读 0赞

**根据接口返回的参数生成一个带有相关链接的二维码 然后和接口返回的背景图片列表n 合成n张海报图并可以下载到桌面**

所需要的参数和图片列表都是父组件传过来的 使用了之前写过的alert弹窗

<template>
      <v-alert
        hide-cont
        :min-width="imageList.length*canvasWidth"
        :width="684"
        class="composite-poster"
        bg-color="transparent"
        :is-cancel="false"
        @cancel="$emit('cancel')">
        <div slot="slot3">
          <ul class="g-center downloading-cont g-loading-col3"
            v-loading="mergeImagesLoading">
            <li class="g-relative"
              v-for="(item, i) in imageList"
              :key="i">
              <canvas class="jMyCanvas"
                :style="{width:`${canvasWidth}px`,height:`${canvasHeight}px`}"
                :width="`${canvasRenderWidth}px`"
                :height="`${canvasRenderHeight}px`"></canvas>
              <a class="g-btn-two g-pointer download-button g-absolute"
                :href="item.download"
                :download="item.filename">
                {
       {$_lang('下载到桌面')}}
              </a>
            </li>
          </ul>
        </div>
      </v-alert>
    </template>

<script>
      export default {
        name: 'composite-poster',
        props: {
          imageList: {required: true, type: Array}, //图片列表
          qrCode: {required: true}, //二维码
        },
        data() {
          return {
            mergeImagesLoading: true,  //  请求分享图片loading
            canvasWidth: 270,
            canvasHeight: 480,
            rate: 2,//放大比率
          };
        },
        computed: {
          canvasRenderWidth() {
            return this.canvasWidth * this.rate;
          },
          canvasRenderHeight() {
            return this.canvasHeight * this.rate;
          },
        },
        methods: {
          //  合并成分享海报
          mergeImages() {
            if (this.qrCode === null) {
              return this.$message.error(this.$_lang('生成专属海报失败'));
            }
            this.$nextTick(() => {
              //  合并图片
              const canvasElements = document.getElementsByClassName('jMyCanvas');
    
              this.imageList.forEach((elem, i) => {
                let {imgUrl} = elem;
                let currentImage = document.createElement('img');
                let currentElement = canvasElements[i];
    
                currentImage.src = imgUrl;
                currentImage.setAttribute("crossOrigin", 'anonymous');
    
                let context = currentElement.getContext("2d");
    
                currentImage.addEventListener('error', () => {
                  this.$message.error(this.$_lang('获取图片失败'));
                }, false);
                currentImage.addEventListener('load', () => {
                  context.drawImage(currentImage, 0, 0, this.canvasRenderWidth, this.canvasRenderHeight);
                  context.drawImage(this.qrCode, 99 * this.rate, 348 * this.rate, 72 * this.rate, 70 * this.rate);
                  elem.download = currentElement.toDataURL("image/jpeg", 1);
                  this.mergeImagesLoading = false;
                }, false);
              });
            });
          },
        },
        created() {
          this.mergeImages();
        }
      };
    </script>
    
    <style lang="scss"
      rel="stylesheet/scss">
      .composite-poster {
        min-width: 1200px;
        .downloading-cont {
          min-height: 480px;
          canvas {
            border: 2px solid #ffebae;
            border-radius: 2px;
            display: block;
          }
          > li:not(:first-child) {
            margin-left: 100px;
          }
        }
        .download-button {
          width: 100%;
          height: 40px;
          line-height: 40px;
          left: 0;
          bottom: -16px;
        }
        .share-bbb {
          margin-top: 50px;
        }
      }
    </style>

如何生成二维码

//  生成二维码
          creatQrCode(inviteLink) {
            let div = document.createElement('div');
            let qrCode = new QRCode(div, {
              text: inviteLink,//
              width: 132,
              height: 132,
              colorDark: "#000000",
              colorLight: "#ffffff",
              correctLevel: QRCode.CorrectLevel.H
            });
            let {_elImage} = qrCode._oDrawing;
            _elImage.addEventListener('load', () => {
              this.qrCode = _elImage;
            });
          },

发表评论取消回复

表情：

评论列表（有 0 条评论，231人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas详解06-合成

![1b5afdb5afd8b308686d75cc9d7282f7.png][] 我们总是将一个图形画在另一个之上，对于其他更多的情况，仅仅这样是远远不够的。比如，对合成的

﹏ヽ暗。殇╰゛Y/ 2023年10月12日 19:55/ 0 赞/ 61 阅读

相关 jQuery+canvas 生成海报（二维码+头像+背景图）

相关搜索： jQuery canvas 头像海报微信二维码 jQuery canvas长按保存一、背景：因为之前同事用java后端

太过爱你忘了你带给我的痛/ 2022年12月04日 09:14/ 0 赞/ 366 阅读

相关纯前端canvas手绘海报

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

蔚落/ 2022年11月11日 05:50/ 0 赞/ 190 阅读

相关三分钟让你上手小程序canvas合成海报

一，先准备素材（图片与文字）根据业务需求准备好素材与需要的文字内容二，了解微信api 了解微信小程序配合canvas使用的一些api 例如（wx.create

我就是我/ 2022年10月01日 11:44/ 0 赞/ 176 阅读

相关 vue-canvas生成海报图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

- 日理万妓/ 2022年09月07日 06:39/ 0 赞/ 237 阅读

相关 canvas合成海报图

根据接口返回的参数生成一个带有相关链接的二维码然后和接口返回的背景图片列表n 合成n张海报图并可以下载到桌面所需要的参数和图片列表都是父组件传过来的使用了之前写过的al

布满荆棘的人生/ 2022年05月12日 12:06/ 0 赞/ 232 阅读

相关 video添加海报图

<video controls poster="/images/w3school.gif"> <source src="movie.mp4" type="

骑猪看日落/ 2022年05月10日 05:22/ 0 赞/ 179 阅读

相关 js+canvas 图片+文字合成

<style> img \{ border: solid 1px \ddd; \} </style> 主体： <

「爱情、让人受尽委屈。」/ 2022年03月31日 14:52/ 0 赞/ 441 阅读

相关利用canvas生成海报

准备准备两张图片连接，最好是自己开发账号验证的https图片链接。实现思路其实就是canvas实现方式，首先要就是定义一个canvas容器，把容器放在中间，

ゞ浴缸里的玫瑰/ 2022年01月10日 07:07/ 0 赞/ 632 阅读

相关 uniapp canvas绘图生成海报

组件：tki-qrcode.vue 交流群：836383650 <template> <view class="content"> <butt

妖狐艹你老母/ 2021年09月19日 13:18/ 0 赞/ 1484 阅读