精华内容
下载资源
问答
  • 生成海报图和二维码, 如果是vue的话,先下载两个插件QRCode和html2canvas html //海报html元素放这个标签内 <div id="posterHtml" v-show="true"></div> <!-- 海报图 --> <div class=...

    生成海报图和二维码,
    如果是vue的话,先下载两个插件QRCode和html2canvas
    html

    //海报html元素放这个标签内
     <div id="posterHtml"  v-show="true"></div>
     
       <!-- 海报图 -->
        <div class="posterImg" v-show="posterShow">
          <img :src="posterImg" alt />
        </div>
    

    js

    import QRCode from "qrcodejs2";
    import html2canvas from "html2canvas";
      data() {
        return {
          posterImg: "", // 最终生成的海报图片
           posterShow: false,
        }}
    
    
    

    methods:

    //text就是你要生成二维码的链接
      createQrcode(text) {
          // 生成二维码
          const qrcodeImgEl = document.getElementById("qrcodeImg");
          qrcodeImgEl.innerHTML = "";
          let qrcode = new QRCode(qrcodeImgEl, {
            width: 115,
            height: 115,
            colorDark: "#000000",
            colorLight: "#ffffff",
            margin: "auto",
            correctLevel: QRCode.CorrectLevel.H,
          });
          qrcode.makeCode(text);
        },
        
        createPoster() {
          // 生成海报
          const vm = this;
          const domObj = document.getElementById("posterHtml");
          html2canvas(domObj, {
            useCORS: true,
            allowTaint: false,
            logging: false,
            letterRendering: true,
            onclone(doc) {
              let e = doc.querySelector("#posterHtml");
              e.style.display = "block";
            },
          }).then(function (canvas) {
            // 在微信里,可长按保存或转发
            vm.posterImg = canvas.toDataURL("image/png");
            vm.posterShow = true;
            console.log(vm.posterImg);
          });
        },
    

    效果图:
    在这里插入图片描述

    css 就不给大家上了,毕竟你的设计图也不会跟我的不一样。

    有问题可以在下方评论。

    展开全文
  • H5 自定义生成海报

    千次阅读 2019-03-11 17:22:01
    最近一切安好,就是少了几...哈哈,逗比也会思考这些了,来来来,上菜,今天照常是吃鸡啃骨头哦,让我们一起剖析常见的:自定义生成h5海报(html转图片)的蛛丝马迹。 话不多说,先看效果图, 图1 图2 上...

    最近一切安好,就是少了几分勤快,人哪,精力还真是有限,过于专注于一方面,就会顾此失彼,长而久之,对物尚可,对人就不免有些‘残忍’,因为人与人之间大多是用感觉,关心,情感等来温暖、维系,并不是冷冰冰的物质,哈哈,逗比也会思考这些了,来来来,上菜,今天照常是吃鸡啃骨头哦,让我们一起剖析常见的:自定义生成h5海报(html转图片)的蛛丝马迹。


     

    话不多说,先看效果图,

    图1

    图2


    上面的这两张图是前段时间给大东家做的一个h5活动页的截图,链接我就不给了,哈哈,不要抄袭我们大设计师的设计风格哦,emmmm

    图1是html页,点击上面的6(长安保存并分享)就会自动生成一张图2在你的手机中。


    解析:首先确定整体技术,然后再局部。目的是把html转化成图片,当然用canvas了,canvas有个api: c.toDataURL('image/jpeg'); 会得到一个base64的src路径,赋值给一个img标签就可以得到这张图,所以,要保留在图片上的所有东西都必须用canvas画出来(图2),其他的你可以用html标签就好了(比如再来一张,长安保存并分享),所以呢,重点就是用canvas写文字啊,写图片啊,哈哈,别觉得我会写啊,这有什么难的,哥们,canvas的适配了解以下,canvas对文字的样式设置,文字对齐(左对齐,居中对齐,上下对齐等)换行设置了解一些,然后emmmmmm。canvas并没有完美的解决这些问题的api,所以,都得自己去写方法。


    插一下:想用第三方插件么,看着XXX插件完美解决这些canvas问题,直接写html,用插件转canvas转图片,是不是很诱人,如果你时间充裕的话可以试试,到时候你可能还要帮着插件修改插件bug,别问我是怎么知道的,我是修了一个又一个,不说了全是泪,果断放弃,还是自己写好,杀鸡焉用牛刀,况且还是放了五百年的牛刀。


    敲黑板划重点啦!以下都是要考的,圈起来!


    图一中1标题是写死的,背景图和定位3是一一对应的json数据,且是随机生成的,2标语也是随机的,4人名是报名页你自己输入的用storage存取一下就好,7广告直接用canvas画出来就好了。

    A:canvas在各尺寸手机上适配(我的canvas是满屏),文字在canvas上尺寸适配并且清晰不模糊:

    A:原理,canvas没有对文字适配的,我们要整体对画布scale。

    var canvasWidth= document.body.clientWidth;
    
    var canvasHeight= document.body.clientHeight;
    
    scaleBy = DPR();
    
    c.width=canvasWidth*scaleBy;
    
    c.height=canvasHeight*scaleBy;
    
    c.style.width = canvasWidth+'px';
    
    c.style.height = canvasHeight+'px';
    
    ctx.scale(scaleBy, scaleBy);

    使用了方法:

    /**
    
    * 根据window.devicePixelRatio获取像素比
    
     **/
    
    function DPR() {
    
        if (window.devicePixelRatio && window.devicePixelRatio > 1) {
    
    	        return window.devicePixelRatio;
    
        }
    
        return 1;
    
    }

    B:下面就可以直接写文字了。

    用new Image()先加载一层背景图,自定义,在这个onload 里面写字体

    ctx.drawImage(this,0,0,canvasWidth,canvasHeight); 
    
    ctx.fillStyle = '#fff';  
    
    ctx.font="500 9px 微软雅黑";  
    
     ctx.fillText('2018 Lanzhou Marathon',25,40);  
    
     ctx.font="500 15px 微软雅黑";  
    
     ctx.fillText('2018兰州马拉松',23,60); 
    
    
    
    ctx.font="500 23px 微软雅黑"; 
    
    ctx.textAlign='center'; //居中对齐,基准线在fillText中的位置,而fillText又可以用wrapText(自定义)来替代
    
    ctx.wrapText('“'+customText[customTextI]+'”', canvasWidth/2,200, 310, 34)
    
    canvas只能写单行,但是标语有可能是多行,所以用wrapText来折行
    
    // 绘制自动换行的字符串maxWidth是最大宽度,lineHeight是行高,这两个可以省略
    
    CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {
    
        if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
    
            return;
    
         }
    
        var context = this;
    
        var canvas = context.canvas;
    
         if (typeof maxWidth == 'undefined') {
    
     maxWidth = (canvas && canvas.width) || 300;
    
            }
    
        if (typeof lineHeight == 'undefined') {
    
        lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight);
    
    }
    
    // 字符分隔为数组
    
     var arrText = text.split('');
    
     var line = '';
    
        
    
     for (var n = 0; n < arrText.length; n++) {
    
     var testLine = line + arrText[n];
    
    var metrics = context.measureText(testLine);
    
    var testWidth = metrics.width;
    
    if (testWidth > maxWidth && n > 0) {
    
         context.fillText(line, x, y);
    
        line = arrText[n];
    
        y += lineHeight;
    
         } else {
    
         line = testLine;
    
        }
    
    }
    
     context.fillText(line, x, y);
    
    };

    C:注意到定位中有个小icon,继续画这个icon,而地点名是随着icon为基准向后对齐的,在地点下面就是人名,上下左对齐,在图片load中

    ctx.drawImage(this,canvasWidth/2+10,265,15,18); 
    
    ctx.font="400 15px 微软雅黑";  
    
    ctx.textAlign='left';//设置地点名字随着定位icon向后扩展,方法以定位icon以基准线左对齐就好
    
    ctx.fillText(placeName[placeNameI].title,canvasWidth/2+30,280); 
    
    ctx.font="500 18px PingFangSC-Regular, sans-serif ";  
    
    ctx.textAlign='left';
    
    ctx.fillText(customName,canvasWidth/2+30,306); 

    D:画广告图,并生成base64的链接

    ctx.drawImage(this,0,canvasHeight-80,canvasWidth,80); 
    
    var dataURL = c.toDataURL('image/jpeg'); 
    
    $('.getImg').html('<img class="getImg" src="'+dataURL+'">')//用img标签替换掉canvas就好了,长按保存

    有些使用点击按钮去保存,或者点击按钮去分享,我查了很多,没有找到这方面的安全完美的api,所以还是用微信原生的去做的,有知道的,望不吝相告!这里面有很多很多细节功能,需要大家去用心做了,有问题留言哈,分享即是快乐!

     

    阅读原文https://blog.csdn.net/vlilyv/article/details/82761810

    展开全文
  • 注意事项 html2canvas 在画海报的时候 不能使用网络图片,如果存在网络图片的话,需要把图片保存到本地,或是转成base64编码的格式才可以, 图片https格式转成base64编码格式的 可以采用canvas实现 基本属性 ...

    安装

    npm 安装
    npm install --save html2canvas

    直接引入html2canvas.js

    <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    
    <div id="capture" style="padding: 10px; background: #f5da55">
       <h4 style="color: #000; ">Hello world!</h4>
    </div>
    

    基本语法

    html2canvas(element, options);
    
    html2canvas(document.body, {
      onrendered: function(canvas) {
        document.body.appendChild(canvas);
      },
      width: 300,
      height: 300
    });
    
    //两个参数:所需要截图的元素id,截图后要执行的函数, canvas为截图后返回的最后一个canvas
    var opts={
    		allowTaint: true; 
    		taintTest: false;
    		useCORS: true;
    			..
    			..
    }
    Html2canvas(document.querySelector("#capture"),opts).then((canvas) =>{
          let oImg = new Image();
          oImg.src = canvas.toDataURL();  // 导出图片
          document.body.appendChild(oImg);  // 将生成的图片添加到body
    });
    

    注意事项

    html2canvas 在画海报的时候 不能使用网络图片,如果存在网络图片的话,需要把图片保存到本地,或是转成base64编码的格式才可以,

    图片https格式转成base64编码格式的 可以采用canvas实现

    基本属性 http://html2canvas.hertzen.com/configuration

    var ctx= document.createElement("canvas");//生成canvas元素//获取宽高
    var d=document.querySelector("#capture")
    var w = parseInt(window.getComputedStyle(d).width);//getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。
    var h = parseInt(window.getComputedStyle(d).height);
    //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
    ctx.width = w * 2;
    ctx.height = h * 2;
    ctx.style.width = w + "px";
    ctx.style.height = h + "px";
    var context = ctx.getContext("2d");
    var opts = {
        canvas: ctx, //自定义 canvas
        useCORS: true // 【重要】开启跨域配置
    };
    Html2canvas(d,opts).then((canvas) =>{
          let oImg = new Image();
          oImg.src = canvas.toDataURL();  // 导出图片
          document.body.appendChild(oImg);  // 将生成的图片添加到body
    });
    
    展开全文
  • html2canvas会将HTML内容写入Canvas生成图片 html2canvas官网 在开始使用脚本之前,需要了解一些有关脚本及其某些限制的知识。 ** 介绍 ** html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。...

    html2canvas会将HTML内容写入Canvas生成图片

    html2canvas官网

    在开始使用脚本之前,需要了解一些有关脚本及其某些限制的知识。

    介绍

    html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。

    浏览器兼容性

    它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时,将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本:Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。

    1.安装
    可以通过npm安装 ,也可以下载内置版本(官网有详细说明)

    2.基本语法

    html2canvas(element, options);
    
    html2canvas(document.body, {
      onrendered: function(canvas) {
        document.body.appendChild(canvas);
      },
      width: 300,
      height: 300
    });
    

    或者使用ES6的promise

    //两个参数:所需要截图的元素id,截图后要执行的函数, canvas为截图后返回的最后一个canvas
    Html2canvas(document.getElementById('poster')).then((canvas) =>{
    	const imgUrl = canvas.toDataURL(); //图片地址
    });
    

    在这里插入图片描述
    注意事项
    html2canvas 在画海报的时候 不能使用网络图片,如果存在网络图片的话,需要把图片保存到本地,或是转成base64编码的格式才可以,

    图片https格式转成base64编码格式的 可以采用canvas实现

        // 处理图片格式
        getBas64(url, outputFormat = 'image/png') {
            /**
             * @description: 图片转base64
             * @param {String} url 需要转换的图片原链接(http://....jpg)
             * @param {String} outputFormat 转换出来的图片的类型(canvas支持jpg/png格式)
             * @return: 返回图片对应的base64编码
             */
    
            const t = this;
            let canvas = document.createElement('CANVAS'),
                ctx = canvas.getContext('2d');
                img = new Image;
    
            img.crossOrigin = 'Anonymous'; // 重点!设置image对象可跨域请求
            img.onload = function () {
                canvas.height = img.height;
                canvas.width = img.width;
                ctx.drawImage(img, 0, 0);
                let dataURL = canvas.toDataURL(outputFormat);
                canvas = null;
    
                return dataURL;
    
            };
    
        }
    ```javascript
    
    
    展开全文
  • 网上查找使用了 html2canvas 这个插件生成海报。 首先,加载依赖包 npm install html2canvas --save 使用 import html2canvas from 'html2canvas' html2canvas 是基于已有 DOM 进行截图生成图片的,已有 DOM ...
  • 我想很多经常做H5同学都会遇到过让用户上传照片的这种需求,那我这里给大家分享一些我常用的一些方法~废话不多时候,下面可以写一些干货,如果有更好的方法欢迎留言讨论!首先,需要准备一些需要用到的东西。第一个...
  • 我使用的是jquery插件swiper.min.js,动画可以利用animate.css,如果自己可以,也可以写一些简单的动画效果。 html代码如下: swiper-slide是没屏的滑块,不需要切图做动画的作为其背景图片(background-size设...
  • 前端实现H5制作海报

    千次阅读 2019-07-20 08:59:50
    海报模版与自己上传的照片进行合成并且贴上二维码,生成可长按保存的海报海报H5的基本功能: 接入微信SDK 上传照片、拍照 裁剪图片 将海报模板、二维码、上传的照片合成海报 长按保存图片 方案选择 方案一...
  • h5实现海报分享功能

    千次阅读 2019-05-26 15:48:13
    由于项目需求,需要在h5实现类似于淘宝店铺分享的效果 实现效果 代码实现 介绍下使用插件及主要功能代码 html2canvas.js <div id="capture" style="padding: 10px; background: #f5da55"> <h4 style=...
  • canvas生成海报

    2019-09-24 18:04:32
    虽然之前也做过类似的生成海报的项目,但是这个项目我又网上查找了一下,发现一个插件挺好用的html2canvas.js http://html2canvas.hertzen.com/这里可以下载这个插件 用起来很方面 优先引入这个js <script ...
  • uniapp 生成海报图片base64转换 (微信头像贴在海报上需要base64转换)import { pathToBase64, base64ToPath } from "路径" base64ToPath(res.data.data.poster) .then(path => {}) .catch(error => { ...
  • 先npm install 安装这俩个插件,然后导入需要的页面中 二维码: //第一步:引入: import Qrcode from "@xkeshi/vue-qrcode"; // 第二步:注册: components: { qrcode: Qrcode //二维码的插件需要注册组件 }, //...
  • laravel框架生成海报,包括头像二维码实现过程,再次记录一下 第一步安装 composer require intervention/image 第二步,在config/app.php 在 providers 添加 Intervention\Image\ImageServiceProvider::class, 在...
  • 1、安装这两个插件并导入 ...2、我这里是海报上得要有二维码,我是先展示背景和二维码,最后在生成一张海报,class="box"节点 是展示背景和二维码,class="boxs"才是最后生成海报 data () { retur.
  • 而且现在电商比较流行的情况下 很多电商公众号商城都用到了生成海报图片长按保存到相册然后可以转发给好友或者分享到朋友圈 在Web前端中,生成图片非Canvas莫属 而html2canvas.js就是一款非常优秀的插件 就比如我们...
  • 项目描述,微信中用户将从手机选择图片,截图,上传,网页生成海报(图片),保存,分享朋友圈 截图使用插件:html2canvas 1. 图片模糊解决 解决方案:scale值为2,截图中的元素不要用背景图,用<img> 2. ...
  • 用的插件 这是地址https://ext.dcloud.net.cn/plugin?id=3276 用的插件 结果自己还踩了一堆坑 哎 ...//海报生成成功 getImg(e) //生成失败 fail(err) <view class="poster-box"> <ly...
  • uniapp H5 二维码生成

    2021-06-26 13:57:14
    vue 二维码生成步骤: 1. 引入二维码 import QRCode from ‘qrcodejs2’ 2. html 3. 二维码生成事件 creatQrCode() { var qrcode = new QRCode(this.$refs.qrCodeUrl, { text: window.location.href, // 需要转换为...
  • PHP实现生成推广海报

    千次阅读 热门讨论 2017-12-20 15:37:31
    仔细分析一下,推广海报必要的要素就是海报背景图和二维码,这两者都容易生成,但要两者结合到一起组合成为一张图二维还要可以保存到本地便于分享出去,这就是难点了,在...那么我们直接在后台生成海报,前台直接调用。
  • 在最近的项目中,有一个需求是要保存前端生成的二维码,同时需要在二维码上方显示课程名称或者活动名称,下方显示机构名称 这次前端分为PC管理端和uniapp移动端 PC端计划使用qrcode生成二维码,然后再用 ...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 302
精华内容 120
关键字:

h5生成海报插件