图片合成功能js

最新推荐文章于 2024-04-19 17:58:40 发布

原创最新推荐文章于 2024-04-19 17:58:40 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

前端开发专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用JavaScript进行图片合成的方法，通过创建canvas元素并利用其绘图上下文，将多张图片叠加在一起，同时实现了文字绘制和下载功能。

图片合成功能js

      changeimg(){
        var self = this;
        var imgsrcArray = [
          require('../../../static/img_ycyy/mycode_bg.jpg'),
          this.imgRealUrl
          // 'http://gafw.zibo.gov.cn/view//group1/M00/22/D6/rBACGl47diCALJQ7AAByoEm1_DI800.jpg'
          // require('../../../static/img_ycyy/123.jpg')
        ];
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = 750;
        canvas.height = 1312;
        var imglen = imgsrcArray.length;
        var showContent = '挪车码';
        var drawimg = (function f(n){
          if(n < imglen){
            var img = new Image();
            img.crossOrigin = 'Anonymous'; //解决跨域问题
            img.onload = function(){
              if(n == 0){
                ctx.globalCompositeOperation = "source-over";
                ctx.drawImage(img,0,0,750,1312);
                ctx.textAlign='center'; // 水平居中
                ctx.font = 'bold 73px Adobe Ming Std';
                ctx.fillStyle="#FFFFFF";
                ctx.fillText(showContent,375,250);
                ctx.fillStyle="#1A2F44";
                ctx.fillRect(285,300,180,75);
                ctx.fillStyle="#49ECFF";
                ctx.font = '35px Adobe Ming Std';
                ctx.fillText('扫码挪车',375,350);
              }else{
                ctx.drawImage(img,225,500,300,300);
              }
              f(n+1);
            }
            img.src = imgsrcArray[n];
          }else{
            self.downloadUrl = canvas.toDataURL("image/jpeg");
            self.downloadUrl = self.downloadUrl.replace("data:image/jpeg;base64,", "");
          }
        })(0);
      }