• 前端图片合成并下载


    // 安装
    // npm i --save composite-image
    import CompositeImage from 'composite-image';
    export default {
      name: 'App',
      mounted() {
        const image = new CompositeImage({
          bgWidth: 300,  // 合成后图片的宽度
          bgHeight: 400,  // 合成后图片的高度
        });
        /**
         * @description 第一张图片
         * @src 图片链接
         * @x 相对于画布的x坐标
         * @y 相对于画布的y坐标
         * @width 图片的宽
         * @height 图片的高
         */
        const cfg1 = {
          src: 'https://bpic.588ku.com/back_pic/19/04/14/bf310e139cf9fc16b3c032caccf6804a.jpg',
          x: 0,
          y: 0,
           300,
          height: 300
        };
        /**
         * @description 第二张图片
         * @src 图片链接
         * @x 相对于画布的x坐标
         * @y 相对于画布的y坐标
         * @width 图片的宽
         * @height 图片的高
         */
        const cfg2 = {
          src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1805103632,2396162225&fm=26&gp=0.jpg',
          x: 90,
          y: 70,
           116,
          height: 116
        };
        image.composite(cfg1, cfg2).then(() => {
        image.ctx.fillStyle='#E7CE86' // 设置字体颜色
        image.ctx.font = '30px Adobe Ming Std' // 字体样式
        // 计算文字宽度
        let num = 0
        this.shopName.split('').forEach(item=>{
         if(/^[a-zA-Z]*$/.test(item) || /^[0-9]*$/.test(item))
         {
        num+=0.5
          }
         else if(/^[u4e00-u9fa5]*$/.test(item))
        {
        num ++
        }
        })
        image.ctx.fillText('#'+this.shopName+'#',(720 - num*30)/2-18,200); // 文字和位置 text,x,y

        image.print(); // 图片地址dataUrl格式,可传入生成图片类型,默认'png'
    
          image.download('image.png'); // 将已生成图片下载至本地,可传入导出的文件名
        })
      }
    }

    模块地址:https://www.npmjs.com/package/composite-image

  • 相关阅读:
    使用jquery-qrcode生成二维码
    ASP.NET匿名对象与集合的使用
    ASP.NET Core 之跨平台的实时性能监控
    centos7如何将docker容器配置成开机自启动
    linux 查看系统信息命令
    基于.NET CORE微服务框架 -浅析如何使用surging
    Docker 两键创建 ZeroTier moon 节点
    kubernetes-dashboard获取令牌登陆
    docker环境下使用gitlab,gitlab-runner 为 NetCore 持续集成
    Docker For MYSQL 8.0 特别注意修复数据库新的验证方式
  • 原文地址:https://www.cnblogs.com/onlywu/p/14428809.html
Copyright © 2020-2023  润新知