Vue用Canvas生成二维码合成海报并解决清晰度问题

更新日期: 2019-05-19阅读: 3.2k标签: canvas

前言

最近接到一个需求,用文字和图片合成一个海报,用于活动结尾页在微信长按分享,接到需求的第一时间,我就想到用 canvas 来画,但是看到 canvas 繁琐的绘制过程,不由得感到头大,后几经搜索,果然发现已经有人造好了轮子。此篇文章主要记录下实现过程,以及遇到的问题。  


依赖

QRCode 这个依赖主要是用于移动端将 url 生成二维码,注意名字叫 qrcodejs2 别安装错

npm install qrcodejs2 --save 
import QRCode from "qrcodejs2"

html2canvas这个依赖主要是将当前 HTML 结构以及 css 样式转换为 canvas。比自己用 api 去画方便多了

Canvas2Image这个依赖主要是将 canvas 转换为图片,实际上,Canvas2Image.js 也是基于 canvas.toDataURL 的封装,相比原生的 API 对于转为图片的功能上考虑更为具体(未压缩的包大小为 7.4KB ),适合项目使用。


主要思路

将所有的海报结构都写在一个父级结构中,然后调用 html2canvas 转换为图片,创建 image,通过 css 层级和定位,将 image 置为最顶层,来实现长按分享


代码

html 部分

 <!--html 结构,具体 css 不写了-->

 <!-- 海报 html 元素 -->
    <div
      id="posterHtml"
      :style="{backgroundImage: 'url('+posterHtmlBg+')'}"
    >
      <div class="posterHtml">
    
        <div class="posterklass">我是{{name}},邀请您:</div>
        <!-- 二维码 -->

        <div id="qrcodeImg" :if="postcode"></div>

      </div>
    </div>
    
    <!--image 即将要插入的位置,这样的结构处理,配合方法里面的 css 会自动置为最顶层-->
    
    <div id="myCanvas"></div>
    <!--提示用户的文案,其实也可以写在海报 html 结构中,通过 html2canvas 的 ignore 来忽略生成-->
    
    <span class="tip">长按保存该海报,邀请好友来测!</span> 
    

js 部分

    //生成二维码
     createQrcode(text) {
    
      const qrcodeImgEl = document.getElementById("qrcodeImg");
      qrcodeImgEl.innerHTML = "";
      let width = document.documentElement.clientWidth;
      
      //宽度自己定义  我取的设备的宽度 *0.32
      
      width = width * 0.32;

      let qrcode = new QRCode(qrcodeImgEl, {
        width: width,
        height: width,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
      
      //text是 要生成的 url
      
      qrcode.makeCode(text);
      
      //生成二维码之后调用生成海报
      
      this.createPoster();
    }
    
    //基于 html2canvas.js 可将一个元素渲染为 canvas,只需要简单的调用 html2canvas(element[, options]) 即可,会返回一个包含有 <canvas> 元素的promise:

    //生成海报
    
    createPoster() {
    
      const vm = this;
      const domObj = document.getElementById("posterHtml");

      var width = document.documentElement.clientWidth;
      var height = document.documentElement.clientHeight;
      var canvas = document.createElement("canvas");
      
      //各项参数的意义可参考 html2canvas 文档
      
      var opts = {
       
        canvas: canvas,
        logging: true,
        width: width,
        height: height,
        useCORS: true,
        allowTaint: false,
        logging: false,
        letterRendering: true,

      };
      html2canvas(domObj, opts).then(function(canvas) {
        var context = canvas.getContext("2d");
        var img = Canvas2Image.convertToImage(
          canvas,
          canvas.width,
          canvas.height
        );
        
        img.style.width = canvas.width;

        img.style.height = canvas.height;
        img.style.position = "absolute";
        img.style.top = "0px";
 
        document.getElementById("myCanvas").appendChild(img);
        
        //插入图片后将 html 结构隐藏,避免微信图片上拉 显示图片下 html 结构
        
        vm.$nextTick(() => {
            let e =  document.querySelector("#posterHtml");
             e.style.display = "none";
         })  
    }
    
    //数据示例,随便写了 意思下
    
    data() {
      return {
        name:'', //海报文案
        posterHtmlBg: require('../../assets/images/poster/invite_poster_bg.jpg'), // 背景图 
      }
    },


问题与解决方案

按理说,这时候的需求应该实现了,但是运行过后,会发现转换成的图片,清晰度感人。肯定不符合需求,所以我搜索了一番,发现以下解决方案。第一,背景图不能通过 background 来引用,要单独写个 image 结构

  <div class="main">
    <!-- 海报 html 元素 -->
    <div id="posterHtml" >
      <div class="posterHtml">
        <img
          :src="posterHtmlBg"
          style="width:100%;height:100%"
        >
        <div class="posterklass">我是{{name}},邀请您:</div>
        
        <!-- 二维码 -->

        <div id="qrcodeImg" :if="postcode"></div>

      </div>
    </div>
    
    <div id="myCanvas"></div>
    <span class="tip">长按保存该海报,邀请好友来测!</span>
  </div>

canvas 尺寸也会影响到转换质量 上面的代码虽然设置了尺寸,但远远不够,因为浏览器绘制 Canvas 渲染到屏幕中分两个过程:

绘制过程:

webkitBackingStorePixelRatio 
webkitBackingStorePixelRatio 表示浏览器在绘制 Canvas 到缓存区时的绘制比例,若图片宽高为 200px,webkitBackingStorePixelRatio 为 2,那么 Canvas 绘制这个图片到缓存区时,宽高就变成 400px

渲染过程:devicePixelRatio

Canvas 显示到屏幕中还需要渲染过程,渲染过程会根据 devicePixelRatio 参数将缓存区中的 Canvas 进行缩放渲染到屏幕中

Canvas 绘制会模糊的原因就可以推测:
1、devicePixelRatio = device pixel / CSS pixel
如果 devicePixelRatio = 2 那么对于 200px 200px 的图片要绘制到屏幕中,那么对应的屏幕像素(物理像素) 就是 400px 400px

2、在大部分高清屏中,webkitBackingStorePixelRatio = 1 devicePixelRatio = 2
将100px * 100px 的图片绘制到屏幕中会经历以下处理:

webkitBackingStorePixelRatio = 1
绘制到缓存区的大小也为:200px * 200px
devicePixelRatio = 2

200px 200px 的图片对应到屏幕像素为 400px 400px,devicePixelRatio = 2 浏览器就把缓存区的 200px * 200px 宽高分别放大两倍渲染到屏幕中,所以就导致模糊

so 我们的解决方案就是将 canvas 宽高设置为屏幕的 2 倍,另外 canvas 会默认开启抗锯齿,我们要手动将抗锯齿关闭来实现图片的锐化MDN: imageSmoothingEnabled

context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;

最终的代码如下

html 部分:

  <div class="main">

    <!-- 海报 html 元素 -->
    <div id="posterHtml" >
      <div class="posterHtml">
        <img
          :src="posterHtmlBg"
          style="width:100%;height:100%"
        >
        <div class="posterklass">我是{{name}},邀请您:</div>
        
        <!-- 二维码 -->

        <div id="qrcodeImg" :if="postcode"></div>

      </div>
    </div>
    <div id="myCanvas"></div>
    <span class="tip">长按保存该海报,邀请好友来测!</span>
  </div>
  

js 部分


createQrcode: function(text) {

     // 生成二维码
     
     const qrcodeImgEl = document.getElementById("qrcodeImg");
     qrcodeImgEl.innerHTML = "";
     let width = document.documentElement.clientWidth;
     width = width * 0.32;

     let qrcode = new QRCode(qrcodeImgEl, {
       width: width,
       height: width,
       colorDark: "#000000",
       colorLight: "#ffffff",
       correctLevel: QRCode.CorrectLevel.H
     });
     qrcode.makeCode(text);
     this.createPoster();
   },

   createPoster() {
   
     // 生成海报
     
     const vm = this;
     const domObj = document.getElementById("posterHtml");

     var width = document.documentElement.clientWidth;
     var height = document.documentElement.clientHeight;
     var canvas = document.createElement("canvas");
     var scale = 2;

     canvas.width = width * scale;
     canvas.height = height * scale;
     canvas.getContext("2d").scale(scale, scale);

     var opts = {
       scale: scale,
       canvas: canvas,
       logging: true,
       width: width,
       height: height,
       useCORS: true,
       allowTaint: false,
       logging: false,
       letterRendering: true,

     };
     html2canvas(domObj, opts).then(function(canvas) {
       var context = canvas.getContext("2d");
       
       // 重要 关闭抗锯齿
       
       context.mozImageSmoothingEnabled = false;
       context.webkitImageSmoothingEnabled = false;
       context.msImageSmoothingEnabled = false;
       context.imageSmoothingEnabled = false;

       var img = Canvas2Image.convertToImage(
         canvas,
         canvas.width,
         canvas.height
       );
        vm.postshow = false;
        vm.postcode = false;
       img.style.width = canvas.width / 2 + "px";

       img.style.height = canvas.height / 2 + "px";
       img.style.position = "absolute";
       img.style.top = "0px";
      
       document.getElementById("myCanvas").appendChild(img);
     
       vm.$nextTick(() => {
           let e =  document.querySelector("#posterHtml");
            e.style.display = "none";

        })
     });
   }
来自:https://petalsonawet.github.io/2019/05/18/vue用Canvas生成二维码合成海报并解决清晰度问题/


链接: https://www.fly63.com/article/detial/3372

HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图。

web图片前端裁剪功能实现_利用html5 canvas技术实现图片裁剪

上传截图很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延。用canvas提供的API实现纯前端的剪切:这里头关键有三步:显示未经处理的图片,得到裁剪区域,显示裁剪后的区域。

原生js使用canvas实现图片格式webp/png/jpeg在线转换

javascript完成图片格式转换: 通过input上传图片,使用FileReader将文件读取到内存中。将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,最后将canvas转换为图片。

离屏Canvas — 使用Web Worker提高你的Canvas运行速度

现在因为有了离屏Canvas,你可以不用在你的主线程中绘制图像了!Canvas 是一个非常受欢迎的表现方式,同时也是WebGL的入口。它能绘制图形,图片,展示动画,甚至是处理视频内容

canvas高效绘制10万图形,你必须知道的高效绘制技巧

最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难,上手就可以做,写两个for循环。,IT行业的知识更新越来越快,能够以不变应万变的人,就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中,屹立不倒,不被淹没。

利用canvas将网页元素生成图片并保存在本地

利用canvas将网页元素生成图片并保存在本地,首先引入三个文件,createElementNS() 方法可创建带有指定命名空间的元素节点。 createElementNS(ns,name) > createElementNS() 方法与 createElement() 方法相似

基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块

随着大数据时代的来临,物联网的日益发展,原先的 SCADA 系统本身也在求新求变,从最开始的专业计算机和操作系统,到通用计算机和相关软件,再到现在基于 HTML5 Canvas 的新型组态开发,其应用的范围也从最初的电力

js用canvas实现简单的粒子运动

在写下合格粒子运动时要先清楚你的思路,不能一开始就盲目的开始写,首先先要确定思路然后在去一步步的实现,在写的过程要注意细节,要思考js有些知识是跟数学知识相关的要注意观察

Canvas 点线动画案例

canvas 画的圆不是圆,是椭圆。不要在style里指定 Canvas 的宽度,Canvas 画布的尺寸的大小和显示的大小是有很大的区别的,在 canvas 里面设置的是才是 Canvas 本身的大小。不要企图通过闭合现有路径来开始一条新路径

Canvas在移动端绘制模糊的原因与解决办法

由于一些移动端的兼容性原因,我们某个项目需要前端将pdf转换成在移动端页面可直接观看的界面。为了方便解决,我们采用了pdf.js这个插件,该插件可以将pdf转换成canvas绘制在页面上

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!