精华内容
下载资源
问答
  • 如何画海报
    2020-11-05 14:51:01

    安装:

    npm install html2canvas --save
    npm i qrcanvas --save

    html:

           <div>
          <!-- 设置了两个块区域 当点击了生成海报时把canvas转换成base64的图片,然后把最开始当样式隐藏掉 把获取的的base64的地址赋值给src-->
        <img v-if="!test" :src="imgSrc"   alt />
        <div v-else>
    //src图片可以替换成自己想要的图片
          <img src="~@/images/invitation/theme_icon.png" alt />
          <div id="qrcode"></div>
          <div id="invitation">测试数据啊,使用id,只生成这个内容啊</div>  
          <button @click="btn">点我生成</button>
     <button @click="btn">保存到本地</button>
        </div>
      </div>

    js:

    <script>
    //生成一个二维码
    import { qrcanvas } from "qrcanvas";
    //将整个页面转换成canvas
    import html2canvas from "html2canvas";
    
        export default {
      data() {
        return {
          test: true,
          imgSrc: ""
        };
      },
      methods: {
    //生成邀请函
        btn() {
              //生成一个二维码 data是二维码跳转的地址(写自己需要跳转的地址即可)
         // const canvas = qrcanvas({
            //data: location.href   
          //});
          //document.getElementById("qrcode").appendChild(canvas);
    //此上部分去掉则不会生成二维码
            //点击生成canvas转换成base64的图片
          this.$nextTick(() => {
            const that = this;
    //document.body生成整个页面的内容document.getElementById('invitation')生成某个id为invitation的内容
            html2canvas(document.getElementById('invitation')).then(function(canvas) {
              console.log(canvas.toDataURL());
              that.imgSrc = canvas.toDataURL();
            });
            //隐藏元素
            this.test = false;
          });
        },
      //保存邀请函到本地
        // 下载邀请函
        generatorImage() {
            let link = document.createElement("a");
            link.href = this.imgSrc;//下载链接
            link.setAttribute("download","邀请函.png");
            link.style.display = "none";//a标签隐藏
            document.body.appendChild(link);
            link.click();
        },
      }
    };
    </script>
    

    参考网址:

    https://blog.csdn.net/weixin_45389051/article/details/105493364

    https://www.cnblogs.com/shcs/p/11960593.html

    更多相关内容
  • 园艺插画海报模板

    2021-08-01 07:13:39
    园艺插画海报模板适用于园艺海报设计
  • 冬日悠闲插画海报设计适用于Hygee海报设计
  • 瑜伽卡通插画海报设计适用于瑜伽活动海报设计
  • 女权插画海报设计PSD素材适用于女权海报设计
  • 妇女节插画海报设计矢量适用于妇女节插画海报设计的AI格式素材。
  • canvas画海报

    2020-10-11 12:40:50
    实现了canvas画海报并修复多图片异步加载,绘制完成回调 由vue的vue-canvas-poster改造及完善通用js版 使用示例 var tct = new TB_CanvasTools({ //包裹图片的jq对象 "pcontent":$("#hb"), //背景颜色 ...

    实现了canvas画海报并修复多图片异步加载,绘制完成回调

    由vue的vue-canvas-poster改造及完善通用js版

    2020-10-12 //修復儅父元素未设置宽高的页面卡死的情况

    使用示例

    var tct = new TB_CanvasTools({
                	
                	//包裹图片的jq对象
                	"pcontent":$("#hb"),
                	//背景颜色
                	"backgroundColor":"#fff",
                	//渲染完成回调事件
                	"callback":function(params){
                		
                		var imageBase64 = params.imageBase64;console.log(imageBase64);
                		$("#hbImage").attr("src",imageBase64);
                	}
                	
                });
                
                //要画的元素集
                var views = [{
                	//类型 image/text
                    type: 'image',
                    //如果是图片的话,图片地址
                    url: '${ctxStatic}/newcontract4.0/images/dianxin_logo_icon.png',
                    //css,这里的值都是比例
                    css: {
                        top: 0.05,
                        left: 0.05,
                        width: 0.3
                    },
                    list: [{
                        type: 'image',
                        url: '${ctxStatic}/newcontract4.0/images/haibao.png',
                        css: {
                            top: 0.15,
                            left: 0.05,
                            width: 0.9
                        }
                    },
                    {
                         type: 'text',
                         text: `今天你消费 我买单!`,
                         css: {
                             color: '#FF9601',
                             fontSize: 20,
                             top: 0.8,
                             left: 0.05
                         }
                     }]
                }]
                
                tct.drawCanvas({
                	
                	"views":views
                	
                });

     

    工具代码

    var TB_CanvasTools = function(params){
    	
    	var $this = this;
    	
    	if(!params){
    		params = {};
    	}
    	
    	//包裹图片的元素jq对象
    	var pcontent = params.pcontent;
    	var backgroundColor = params.backgroundColor;
        var callback = params.callback;
    	
    	$this.pcontent = pcontent;
    	$this.backgroundColor = backgroundColor;
    	$this.callback = callback;
    	
    	//canvas 的宽和高
    	$this.width = $this.pcontent.width();
    	$this.height = $this.pcontent.height();
        //修復儅父元素为设置宽高的情况
        if($this.width == 0 && $this.height == 0){
    		
    		$this.width = 400;
    		$this.height = 400;
    		
    	}
    	
    	$this.width = ($this.width == 0?$this.height:$this.width);
    	$this.height = ($this.height == 0?$this.width:$this.height);
    	
    	//要绘制的内容数
    	$this.viewsSize = 0;
    	
    	//创建canvas对象
    	var canvas=document.createElement("canvas");
    	canvas.width=$this.width;
    	canvas.height=$this.height;
    	
    	var ctx = canvas.getContext("2d");
    	$this.ctx = ctx;
    	$this.canvas = canvas;
    	
    	$this.ctx.rect(0, 0, $this.width, $this.height);
        $this.ctx.fillStyle = $this.backgroundColor;
        $this.ctx.fill();
    	
        //进行绘制的方法
        $this.drawCanvas = function(params){
        	
          $this.views = params.views;	
          
          if(!params){
        	  params = {}
          }
        
          $this.viewsSize = 0;
          
          $this.views.forEach(cur => {
        	initViewSize(cur);
          })
          
          $this.views.forEach(cur => {
            drawView(cur)
          })
        }
        
        //绘制图片
        var _drawImage = function(view){
        	
    		 if(!view.url){
    		   return ;
    		 }
    		 let {
    		   top,left,width,height
    		 } = view.css;
    		 
    		 var image = view.image;
    		 var iw = image.width;
    		 var ih = image.height;
    		 //计算宽高
    		 width = getWidth(width);
    		 //height = getHeight(height);
    		 height = width/iw*ih;
    		 top = getHeight(top);
    		 left = getWidth(left);
    		 
    		 if (typeof view.url === 'string') {
    		   $this.ctx.fillStyle = '#ddd'
    		   $this.ctx.fillRect(left, top, width, height);
    		   $this.ctx.restore()
    		   return
    		 }
    		 $this.ctx.save();
    		 
    		 $this.ctx.drawImage(view.url, left, top, width, height);
    		 $this.ctx.restore();
    		 
    		 //绘制记录数减一
    		 $this.viewsSize--;
    		 if($this.viewsSize == 0){
    			 //如果记录数减为0则回调
    		 	  finish();
    		 }
    		 
    		 //绘制子
    		 if (view.list && view.list.length > 0) {
    		   view.list.forEach(cur => drawView(cur))
    		 }
        }
        
        /**
         * 绘制文字 
         **/
        var _drawText = function(view, ctx) {
        	
          let css = {
            color: '#333333',
            lineHeight: 30,
            textAlign: 'start',
            maxLines: 3,
            fontSize: 20,
            top: 0,
            left: 0,
            width: 1,
            textBaseline: 'alphabetic'
          }
          
          css = { ...css, ...view.css };
    
          //设置宽
          css.width = getWidth(css.width);
    	  css.top = getHeight(css.top);
    	  css.left = getWidth(css.left);
          
          $this.ctx.save();
          $this.ctx.textAlign  = css.textAlign;
          $this.ctx.textBaseline = css.textBaseline;
          $this.ctx.fillStyle = css.color;
          $this.ctx.font = css.fontSize + 'px  Arial';
          let result = breakLinesForCanvas(view.text, css.width, ctx);
          for (let i = 0; i < result.length; i++) {
        	  
            if (i <= css.maxLines - 1) {
              let str = result[i];
              if ((i === css.maxLines - 1) && ($this.ctx.measureText(str+"...").width > css.width)) {
                result[i] = str.substring(0, str.length - 1)+"...";
              }
            } else {
              break;
            }
            $this.ctx.fillText(result[i], css.left, css.top + i * css.lineHeight, css.width);
          }
          $this.ctx.restore();
    
          $this.viewsSize--;
          if($this.viewsSize == 0){
        	  finish();
          }
          if(view.list && view.list.length > 0){
            view.list.forEach(cur => drawView(cur))
          }
        };
        
    	/**
    	 * 
    	 * ==================================function====================================
    	 * 
    	 */
    	/**
    	 * 获取内容的宽
    	 * 
    	 * @params widthScale 宽的比例
    	 */
    	var getWidth = function(widthScale){
    		
    		return widthScale*$this.width;
    		
    	}
    	
    	/**
    	 * 获取内容的高
    	 * 
    	 * @params heightScale 高的比例
    	 */
    	var getHeight = function(heightScale){
    		
    		return heightScale*$this.height;
    		
    	}
    	
    	/**
         * 打断文本,返回给canvas绘制
         * */
        var breakLinesForCanvas = function(text, width, ctx) {
        	
          let result = [];
          let breakPoint = 0;
          while ((breakPoint = findBreakPoint(text, width, ctx)) !== -1) {
            result.push(text.substr(0, breakPoint));
            text = text.substr(breakPoint);
          }
    
          if (text) {
            result.push(text);
          }
          return result;
        }
        
        /**
         * 获取文本换行断点
         * */
        var findBreakPoint = function(text, width, ctx) {
          var min = 0;
          var max = text.length - 1;
          while (min <= max) {
            var middle = Math.floor((min + max) / 2);
            var middleWidth = $this.ctx.measureText(text.substr(0, middle)).width;
            var oneCharWiderThanMiddleWidth = $this.ctx.measureText(text.substr(0, middle + 1)).width;
            if (middleWidth <= width && oneCharWiderThanMiddleWidth > width) {
              return middle;
            }
            if (middleWidth < width) {
              min = middle + 1;
            } else {
              max = middle - 1;
            }
          }
          return -1;
        }
        
        /**
         * 绘制
         */
        var drawView = function(cur){
        	
        	var $this = this;
        	
          switch (cur.type) {
            case 'image':
              if (cur.url) {
                downloadImage(cur.url).then(image => {
                  cur.url = image;
                  cur.image = image;
                  _drawImage(cur);
                });
              }
              break;
            case 'text':
            	_drawText(cur, this.ctx)
              break;
            default:
              break;
          }
        }
        
       /**
        * 绘制完成后
        */
        var finish = function(){
        	
        	var imageBase64 = $this.canvas.toDataURL('image/png')
        	//回调
        	if($this.callback){
        		$this.callback({
        			
        			"imageBase64":imageBase64
        			
        		});
        	}
        }
        
        /**
         * 
         * 初始化内容元素数量
         * 
         */
        var initViewSize = function(view){
    
            $this.viewsSize++;
        	
        	if(view.list){
    
        		view.list.forEach(cur => initViewSize(cur))
        		
        	}
        }
        
        var downloadImage = function(src){
            return new Promise((resolve, reject) => {
              if (src.startsWith('#')) {
                resolve(src)
                return
              }
              const img = new Image()
              img.onload = () => resolve(img)
              img.onerror = () => reject(`下载图片失败`+src)
              img.crossOrigin = 'anonymous'
              img.src = src
              if (img.complete === true) {
                setTimeout(() => resolve(img), 500)
              }
            })
          }
    }
    

     

    展开全文
  • 女神节卡通插画海报设计适用于女神节海报设计。
  • 父爱如山手绘插画海报设计适用于父亲节海报设计
  • 冬天舒适悠闲PSD插画海报适用于Hygee插画海报设计
  • 38女王节插画海报设计适用于女王节海报设计。
  • 瑜伽冥想PSD人物插画海报适用于运动海报设计
  • 设计师工作插画海报设计适用于设计师招聘海报设计
  • 阅读主题插画海报设计PSD适用于阅读主题海报设计
  • 享受假日PSD手绘插画海报适用于假日海报设计
  • 父亲节宣传画海报设计矢量适用于父亲节海报设计的AI格式素材。
  • 佩戴口罩宣传画海报设计素材适用于佩戴口罩宣传海报设计。
  • 3.12植树节宣传画海报设计适用于312植树节海报设计。
  • 音乐节矢量插画海报

    2021-07-26 18:36:44
    音乐节矢量插画海报适用于音乐节海报设计的AI格式素材
  • 秋日水彩插画海报模板适用于秋季海报设计的AI格式素材
  • 晚安插画海报设计PSD

    2021-08-06 09:50:44
    晚安插画海报设计PSD适用于晚安海报设计
  • 2021牛年新春插画海报

    2021-07-20 04:34:06
    2021牛年新春插画海报适用于春节商场海报设计
  • 五月五端午节插画海报设计适用于端午节海报设计
  • 我们毕业啦插画海报设计适用于毕业季海报设计
  • 妇女节宣传画海报设计矢量适用于妇女节海报设计的AI格式素材。
  • 客厅装饰美化挂画海报样机素材下载 产品样机、客厅挂画海报模板、客厅装饰样机、画框样机、高端样机
  • Canvas 实现 H5 海报 - Vue 版 由于后端画图严重影响服务器性能,所以改为由前端来做。利用 canvas 与 vue 生成 H5 海报。 Installing git clone 项目名 使用方法 安装 http-server:打开终端,进入目标文件夹,安装...
  • vue中使用canvas画海报

    2022-05-31 10:21:35
    }, 需求中需要的海报内容多,有一个头像需要做成圆形的,所以分出一个方法单独出圆形头像 // 生成图片getImage和drawPhoto getImage(url, width, height) { return new Promise((r1, r2) => { //画布 let canvas ...

    使用ES6新增语法中的canvas画图,在HTML部分插入标签

    <div style="width: 100%">
            <img
              style="height: 100%; widht: 100%; margin-right: 5%"
              :src="image"
              class="img"
              alt=""
            />
            <canvas
              id="mycanvas"
              width="750"
              height="750"
              class="my-canvas"
            ></canvas>
          </div>

    然后在methods中写入canvas方法,如果连接后台返回数据的话可以在data中声明后放入方法内

     

    data() {
        return {
          image: "",
          canvas_touxiang: "",
          nane: "",
          fuwushang: "",
          zhiwu: "",
          zhengzaizhaoping: "",
          canvas_serviceType: "",
          convas_salary: "",
          canvas_workExperience: "",
          canvas_xueli: "",
          canvas_sex: "",
          canvas_fuwushang: "",
          canvas_erweima: "",
          canvas_time: "",
         }
    }
    

     因为我的代码比较多,所以data中不一定是全部的,还是根据需求更改吧

    drawPhoto() {
          this.canvas_sex = this.sexData[this.tuijian_sex].label;
          this.canvas_xueli = this.educationData[this.tuijian_education].label;
          this.getImage(this.canvas_touxiang, 200, 200).then((imgUrl) => {
            let canvas = document.getElementById("mycanvas"); //创建canvas
            let context = canvas.getContext("2d"); //创建画布
            let img1 = new Image(); //因为拿不到图片静态资源,所以创建图片标签
            let img2 = new Image();
            let img3 = new Image();
            let img4 = new Image();
            img2.setAttribute("crossOrigin", "anonymous"); //解决图片跨域问题,也要放到赋值前,否ze大部分浏览器会报错
            img3.setAttribute("crossOrigin", "anonymous"); //解决图片跨域问题,也要放到赋值前,否ze大部分浏览器会报错
            img1.src = require("../../../../assets/returnVisit/haibao.png");
            img2.src = imgUrl;
            img3.src = require("../../../../assets/returnVisit/yinhao.png");
            img4.src = "data:image/jpeg;base64," + this.canvas_erweima;
            //加载图片
            img1.onload = () => {
              canvas.setAttribute("width", img1.width);
              canvas.setAttribute("height", img1.height);
              //绘制图片
              context.drawImage(img1, 0, 0, img1.width, img1.height);
              context.drawImage(img2, 110, 200, 200, 200);
              context.drawImage(img3, 130, 1200, 108, 94);
              context.drawImage(img4, 550, 2100, 400, 400);
              // context.arc();
              // context.drawImage(this.canvas_touxiang, 1, 1);
              //字体大小
              //字体文字,显示位置  图片上需要n个文字就写n个context.fillText(文字,上下,左右);
              context.font = "64px Arial";
              context.fillStyle = "white";
              context.fillText(this.nane, 354, 260);
              context.font = "56px Arial";
              context.fillStyle = "white";
              context.fillText(this.fuwushang + "服务商 · " + this.zhiwu, 354, 350);
              context.font = "56px Arial";
              context.fillStyle = "white";
              context.fillText(this.zhengzaizhaoping, 130, 550);
              context.font = "120px Arial";
              context.fillStyle = "white";
              context.fillText(
                this.serviceTypeData[this.tuijian_valueType].label,
                130,
                700
              );
              context.font = "160px Arial";
              context.fillStyle = "white";
              context.fillText(this.convas_salary, 130, 880);
              context.font = "64px Arial";
              context.fillStyle = "white";
              context.fillText(
                this.tuijian_city +
                  " · " +
                  this.tuijian_area +
                  " | " +
                  this.canvas_workExperience +
                  " | " +
                  this.canvas_xueli +
                  " | " +
                  this.canvas_sex,
                130,
                1000
              );
              context.fillText("—", 130, 1400);
              context.font = "56px Arial";
              context.fillStyle = "white";
              context.fillText(this.canvas_fuwushang, 130, 1500);
              context.font = "52px Arial";
              context.fillStyle = "white";
              context.fillText(this.canvas_time, 130, 1600);
              context.font = "48px Arial";
              context.fillStyle = "#FF8E5F";
              context.fillText("长按识别二维码", 580, 2550);
              //合成图片
              this.image = canvas.toDataURL("image/jpg", 1.0);
            };
          });
        },

    需求中需要的海报内容多,有一个头像需要做成圆形的,所以分出一个方法单独画出圆形头像

    // 生成图片getImage和drawPhoto
        getImage(url, width, height) {
          return new Promise((r1, r2) => {
            //画布
            let canvas = document.createElement("canvas");
            canvas.width = width;
            canvas.height = height;
            // 画笔
            let ctx = canvas.getContext("2d");
            let img = new Image();
            img.src = url;
            img.setAttribute("crossOrigin", "anonymous"); //解决图片跨域问题,也要放到赋值前,否ze大部分浏览器会报错
            img.onload = function () {
              ctx.beginPath();
              ctx.arc(100, 100, 100, 0, Math.PI * 2);
              ctx.fill();
              ctx.clip();
              ctx.drawImage(this, 0, 0, width, height);
              r1((this.image = canvas.toDataURL("image/jpg", 1.0)));
            };
          });
        },

     

    展开全文
  • 收藏级别的抽象艺术涂鸦插画海报 抽象艺术、收藏级艺术插画、艺术涂鸦

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,769
精华内容 5,107
关键字:

如何画海报