在Vue中用canvas实现二维码和图片合成海报的方法

2024-11-28 18:42:39

在项目中经常会遇到需要将不同的二维码放到一张通用图片上，提供用户下载

简单来说，就是利用canvas将同等比例的二维码在图片上叠加，生成海报

1. 设置相应比例

一般来说海报背景都是固定的，可以直接放在public文件夹，二维码可根据后台返回数据，也可用canvas生成，在此不多赘述

import posterBgImg from '../public/images/poster_bg.png';// 海报底图
import qrcodeImg from '../public/images/qrcode.png';// 二维码
export default{
  name: 'qrcode-in-poster',
  data(){
    return {
      posterBgImg,
      qrcodeImg,
      posterSize: 930/650,// 海报高宽比例
      qrCodeSize: {// 二维码与海报对应比例 =》 用于设置二维码在海报中的位置
        width: 270/650,
        height: 270/930,
        left: 190/650,
        top: 448/650
      },
      poster: '',// 合成图片
    }
  }
};

2. 获取屏幕宽度

限定移动端最大宽度为 480px

computed: {
  screenWidth(){
    let w = document.body.clientWidt || document.documentElement.clientWidth || 375;
    return w > 480 ? 480 : w ;
  }
};

3. 组合图片

methods: {
  combinedPoster(_url){
    let that = this,
      qrcode = this.qrcodeImg; // 二维码地址

    console.log("open draw: ", _url, qrcode)
    let base64 = '',
      canvas = document.createElement('canvas'),
      ctx = canvas.getContext("2d"),
      _w = this.screenWidth * 2, // 图片宽度： 由于手机屏幕时retina屏，都会多倍渲染，在此只设置2倍，如果直接设置等于手机屏幕，会导致生成的图片分辨率不够而模糊
      _h = this.posterSize * _w, // 图片高度
      _qr_w = this.qrCodeSize.width * _w, // 二维码宽 = 比例 * 宽度
      _qr_h = this.qrCodeSize.height * _h, // 二维码高 = 比例 * 高度
      _qr_t = this.qrCodeSize.top * _w, // 二维码顶部距离 = 比例 * 宽度
      _qr_l = this.qrCodeSize.left * _w; // 二维码左侧距离 = 比例 * 宽度
    // 设置canvas宽高
    canvas.width = _w;
    canvas.height = _h;
    ctx.rect(0, 0, _w, _h);
    ctx.fillStyle = '#fff'; // 填充颜色
    ctx.fill();
    // 迭代生成： 第一层（底图）+ 第二层（二维码）
    // file：文件，size：[顶部距离，左侧距离，宽度，高度]
    let _list = [
      {
        file: _url,
        size: [0, 0, _w, _h]
      }, {
        file: qrcode,
        size: [_qr_l, _qr_t, _qr_w, _qr_h]
      }
    ];
    // 开始绘画
    let drawing = (_index) => {
      // 判断当前索引 =》 是否已绘制完毕
      if (_index < _list.length) {
        // 等图片预加载后画图
        let img = new Image(),
          timeStamp = new Date().getTime();
        // 防止跨域
        img.setAttribute('crossOrigin', 'anonymous')
        // 链接加上时间戳
        img.src = _list[_index].file + '?' + timeStamp
        img.onload = function() {
          // 画图
          ctx.drawImage(img, ..._list[_index].size)
          // 递归_list
          drawing(_index + 1)
        }
      } else {
        // 生成图片
        base64 = canvas.toDataURL("image/png")
        if (base64) {
          // 赋值相应海报上
          this.$set(that, 'poster', base64)
        }
      }
    }
    drawing(0)
  }
};
mounted(){
  // 需要合成海报的图片
  this.draw(this.posterBgImg)
}

4. 下载

点击下载合成图片

methods: {
  handleDownload(){
    if(this.poster){
      let a = document.createElement("a");
      a.setAttribute("download", "海报下载-"+(new Date().getTime()));
      a.href = this.poster
      a.click()
    }else{
      console.log("海报不存在，请重新生成！")
    }
  }
}

tips：不适用于微信浏览器，只能提示用户长按保存。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于vue+canvas的excel-like组件实例详解

a vue component,基于vue的表格组件,主要解决大数据量的表格渲染性能问题,使用canvas绘制表格,同时支持类似excel的批量选中,复制黏贴删除,实时编辑等功能. vue-grid-canvas Install NPM / Yarn Install the package: npm install vue-canvas-grid --save Then import it in your project import Vue from 'vue' import Grid fro
使用canvas实现一个vue弹幕组件功能

看B站时,对弹幕的实现产生了兴趣,一开始想到用css3动画去实现,后来感觉这样性能不是很好,查了下资料,发现可以用canvas实现,于是就摸索着写了一个简单的弹幕. 弹幕功能支持动态添加弹幕弹幕不重叠自定义弹幕颜色效果图 demo 源码地址前端框架选了比较熟悉的vuejs 弹幕滚动的基本思路就是通过定时器不断地改变弹幕的位置,时时重绘画布. 实现步骤先加入一个canvas标签,这里有个注意点,关于设备像素比对canvas的影响,会出现绘图模糊. <canvas width="6
Vue利用canvas实现移动端手写板的方法

本文介绍了Vue利用canvas实现移动端手写板的方法,分享给大家,具体如下: <template> <div class="hello">  <button type="" v-on:click="clear">清除</button> <button v-on:click=&quo
vue实现pdf导出解决生成canvas模糊等问题(推荐)

最近公司项目需要,利用vue实现pdf导出,从而保存到本地打印出来,说起来好像也很容易,具体要怎么实现呢? 1 .我们要添加两个模块 1 第一个.将页面html转换成图片 2 npm install --save html2canvas 3 第二个.将图片生成pdf 4 npm install jspdf --save 2 .定义全局函数 .. 创建一个htmlToPdf .js 文件在指定位置 . 我个人习惯放在 ( ' src /utils/htmlToPdf' ) // 导出页面为PDF
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片

1 前言 1.1 业务场景图片储存在后台中,根据图片的地址,在vue页面中,查看图片,并根据坐标标注指定区域. 由于浏览器的机制,使用 window.location.href 下载图片时,并不会保存到本地,会在浏览器打开. 2 实现原理 2.1 绘制画布 <el-dialog title="查看图片" :visible.sync="dialogJPG" append-to-body> <canvas id="mycanvas"
Vue中使用canvas方法总结

下面就是小编带给大家的Vue中怎么使用canvas方法操作,希望能够给你们带来一定的帮助,谢谢大家的观看. 1.如果数组中都是canvas对象, vue如何能吧canvas对象渲染到页面.v-html只能渲染出一个字符串, 没办法像appendChild那样插入canvas对象. 2.项目架构是vue-cli的单页应用,如果在index.html入口主文件里面引入<script src='html2canvas.js'></script>: 3.这样每个组件都会加载此js,造成资源
vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）

前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给定合理的帧数,不断的清除画布,再重绘图形,即呈现出动画效果. 让我们先看下效果说明:此gif清晰度很低,因为转成gif图的时候,质量受损,帧数减少,所以倒计时转到红色时候看起来变的很模糊.但是实际在浏览器上效果全程都是很清晰和连贯的使用 npm npm install vue-canvas-co
基于vue2的canvas时钟倒计时组件步骤解析

今天给大家介绍一款基于vue2的canvas时钟倒计时组件,这个时钟倒计时组件采用canvas动画的炫酷动画效果形式,根据剩余时间的多少变换颜色和旋转扇形的速度,适合抢购.拍卖.下注等业务场景,且对移动端友好. 具体步骤分析: 假如设定倒计时总时间为15s, 变黄色时机为10s,变红色时机为5s. 1.开始倒计时后颜色为绿色.绿色含义是:倒计时的时间离结束时间还很长. 2.10s后变黄色.黄色的含义是:倒计时的时间离结束时间挺近了,起警告作用.动画中,出现快速旋转的扇形. 3.5s后变红色.红色
vue 使用html2canvas将DOM转化为图片的方法

一.前言我发现将DOM转化为图片是一个非常常见的需求,而自己手动转是非常麻烦的,于是找到了html2canvas这个插件,既是用得比较多的也是维护得比较好的一个插件. 注意:版本比较多,这里介绍最新版二.代码 1. 安装 npm install html2canvas --save 现在最新的版本应该是1.0.0,另外还有一个比较经典的版本是0.5.0,网上有许多关于这个版本的bug说明. 2. 使用 <div class="imageWrapper" ref="i
在Vue中用canvas实现二维码和图片合成海报的方法

在项目中经常会遇到需要将不同的二维码放到一张通用图片上,提供用户下载简单来说,就是利用canvas将同等比例的二维码在图片上叠加,生成海报 1. 设置相应比例一般来说海报背景都是固定的,可以直接放在public文件夹,二维码可根据后台返回数据,也可用canvas生成,在此不多赘述 import posterBgImg from '../public/images/poster_bg.png';// 海报底图 import qrcodeImg from '../public/images/qr
js canvas实现二维码和图片合成的海报

本文实例为大家分享了canvas二维码和图片合成海报的具体代码,供大家参考,具体内容如下思路:在微信中登录,后台传来的是一个链接.一个名字.一张图片.把图片当做背景,画满整个画布.之后需要把链接转为二维码,使用jq.qrcode转化,转化完成后是一个canvas,把这个canvas再转成一张图片,画到大的画布上.把名字画到画布上.把整张画布转为图片. 一.定义画布和合成海报的img <style type="text/css"> #canbox { width: 100%
Android Zxing二维码扫描图片拉伸的解决方法

二维码扫描,Android Zxing图片拉伸解决. Zxing是google提供的二维码扫描工程默认是横屏的转换成竖屏后图片出现拉伸这里提供解决办法: Zxing 修改 CameraConfigurationManager.Java文件的void initFromCameraParameters(Camera camera)方法在Log.d(TAG, "Screen resolution: " + screenResolution);这句之后增加 Point screenR
Vue实现手机扫描二维码预览页面效果

本文实例为大家分享了Vue实现手机扫描二维码预览页面的具体代码,供大家参考,具体内容如下背景:vue-cli3 + ant-design-vue 搭建的后台管理系统需求:实现扫描二维码即可在手机预览H5页面功能使用插件:qrcode step1:安装插件 npm install qrcode --save step2:引入插件在项目中新建QRcode.vue文件 <template> <div id="qrCode"> <div id="
VUE微信H5生成二维码海报保存在本地相册的实现

目录一.效果二.说明三.思路四.效果五.代码实现六.遇到的问题一.效果二.说明公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需求是点击按钮,下载海报图到本地相册,然后h5下载的实现原理是生成一个a标签链接,然后下载,在电脑模拟器可以下载,在微信浏览器一点反应没有,所以退一步,长按保存),下面是使用版本,UI插件用的是vant(有赞) vue:“^2.6.11”, “html2canvas”:
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)

这几天做个了项.就是微信扫描二维码的然后进入公众号网页巴拉巴拉的,然后就很顺利的遇到了在安卓端扫码的时候,顺利的一塌糊涂,然后到了苹果端的时候,就只能出现一个保存图片,然后就写一下记录一下这问题的解决方法. 问题机型:iphone 7p 这里的二维码是一张图片,微信返回的图片,具体下图然后是正常情况下.当我们开始扫码的时,应该是这个样子这个是正常的,但是在苹果端的时候就懵了,下面的菜单就只有一个保存图片.那么如何解决呢,请看下面. 解决方案解决方案其实有两种. 使用 qrcodeJs 就
springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）

1. 什么是支付宝接口(沙箱环境)? 记录时间:2020年10月15日3:55 现如今,手机支付已相当普遍,而作为开发人员应该对手机支付操作有所了解.而支付宝接口是支付宝提供的一个接口,用来对接软件应用程序在进行金钱交易使用.然后对于编程爱好者而言,想学习这一点就有点难,因为要想使用支付宝接口,必须前提是使用软件应用程序,软件应用程序需要向支付宝申请,提交一系列资料,这一点是实现不了的.这就对开发者增加了一定的难度,因为产品没有上线,然后需要对接支付宝接口就是很大的问题,所以出现了沙箱环境,具有
.NET SkiaSharp 生成二维码验证码及指定区域截取方法实现

目录正文依赖的 Nuget 组件如下正文在最新版的 .NET 平台中,微软在逐步放弃 System.Drawing.Imaging ,给出的理由如下: System.Drawing命名空间对某些操作系统和应用程序类型有一些限制. 在Windows, System.Drawing 依赖于GDI+操作系统附带的本机库. 某些Windows SKUS Windows Server Core 或 Windows Nano)不包含此本机库作为 OS 的一部分. 如果使用此命名空间并且无法加载库,则
Android实现二维码扫描和生成的简单方法

这里简单介绍一下ZXing库.ZXing是一个开放源码的,用Java实现的多种格式的1D/2D条码图像处理库,它包含了联系到其他语言的端口.Zxing可以实现使用手机的内置的摄像头完成条形码的扫描及解码.该项目可实现的条形码编码和解码.目前支持以下格式:UPC-A,UPC-E.EAN-8,EAN-13.39码.93码.ZXing是个很经典的条码/二维码识别的开源类库,以前在功能机上,就有开发者使用J2ME运用ZXing了,不过要支持JSR-234规范(自动对焦)的手机才能发挥其威力. ZXing
Android Zxing二维码扫描图片拉伸问题的解决方法

还是这个接手项目,二维码扫描集成的是zxing,扫描界面的图像有明显的拉伸变形. 这种问题,根据以往的经验,一般是x,y轴错位引起的,处理好x,y轴的问题,一般可以解决问题. 由于这个问题,之前有很多人遇到,并分享在网上了,所以,我这里也就不需要重复造轮子了. 这里看了一篇博客:Android Zxing二维码扫描图片拉伸,用了上面的办法, 成功的解决图片拉伸问题. 解决方法如下: 修改CameraConfigurationManager.Java里面的initFromCameraParamet

在Vue中用canvas实现二维码和图片合成海报的方法

相关推荐

随机推荐