H5-Canvas实战-合成任意数量图片文字-函数封装处理

用户10106350

发布于 2022-10-28 12:42:52

2740

发布于 2022-10-28 12:42:52

文章被收录于专栏：WflynnWeb

代码已上传至github github代码地址：https://github.com/Miofly/mio.git

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <meta http-equiv=X-UA-Compatible content="ie=edge">
  <meta name=apple-mobile-web-app-capable content=yes>
  <meta name=apple-touch-fullscreen content=yes>
  <meta name=apple-mobile-web-app-status-bar-style content=black-translucent>
  <meta name=format-detection content="telephone=no">
  <meta name=format-detection content="email=no">
  <meta name=renderer content=webkit>
  <meta name=screen-orientation content=portrait>
  <meta name=x5-orientation content=portrait>
  <meta name=x5-fullscreen content=true>
  <meta name=full-screen content=yes>
  <meta name=keywords content="">
  <meta name=description content="">
  <meta http-equiv=Content-Type content="text/html; charset=utf-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="http://192.168.3.16:8888/mio/src/html/index.css"/>
  <script type="text/javascript" src="http://192.168.3.16:8888/mio/src/html/js/common/vue.js"></script>
  <script type="text/javascript" src="http://192.168.3.16:8888/mio/src/html/js/common/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="http://192.168.3.16:8888/mio/src/html/js/common/htmlToolUtils.js"></script>
  <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 375) {
                        docEl.style.fontSize = '100px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
                    }
                    var html = document.getElementsByTagName('html')[0];
                    var settedFs = settingFs = parseInt(100 * (clientWidth / 375));
                    var whileCount = 0;
                    while (true) {
                        var realFs = parseInt(window.getComputedStyle(html).fontSize);
                        var delta = realFs - settedFs;
                        //不相等
                        if (Math.abs(delta) >= 1) {
                            if (delta > 0)
                                settingFs--;
                            else
                                settingFs++;
                            html.setAttribute('style', 'font-size:' + settingFs + 'px!important');
                        } else
                            break;
                        if (whileCount++ > 100)
                            break
                    }
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
</script>
</head>

html

<body style="font-size: 0.05rem" class="bg-gradual-blue">
<div id="app">
  <div id="showqr" >
    <img id="logoimg" src='http://192.168.3.16:8888/mio/src/html/img/xtx/1.jpg' style="display:none"/>
  </div>

  <div id="imgOne"></div>
</div>

<script type="text/javascript" src="http://192.168.3.16:8888/mio/src/html/js/common/ewm.js"></script>
<script type="text/javascript" src="http://192.168.3.16:8888/mio/src/html/js/common/canvas.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
            }
        },
        created () {
            qraa({ewmSize: 95, logo: 'http://192.168.3.16:8888/mio/src/html/img/xtx/1.jpg',
                url: 'http://www.baidu.com', logoSize: 'default', isShow: false})
        },
        methods: {},
    })

  var imgLists = [
        {src: '../../img/mother/bgOnes.png', left: 0, top: 0, width: 750, height: 1334},
        {src: $('#qrAnonymous').attr('src'), left: 292, top: 993, width: 170, height: 170},
        {src: '../../img/mother/wz1.png', left: 100, top: 300, width: 470, height: 370},
    ]
    var canvas = document.createElement('canvas')
    canvas.width = 750;
    canvas.height = 1334; // 这是canvas的宽高
    var ctx = canvas.getContext('2d')

  ctx.fillStyle = 'red' // 设置文字的填充颜色
  ctx.font = "50px serif";
  var row = [];
  row.push(textCanvas('这/是/问子', '/'));

    ctx.rect(0, 0, 750, 1334); // 这是图片的宽高
    ctx.fill();

    drawing(0, $('#imgOne'), true, 100);
</script>
</body>
</html>

canvas文字换行

function textCanvas(text, symbol) { // canvas文字换行
    var temp = "";
    var chr = text.split(symbol);
    for (var a = 0; a < chr.length; a++) {
        row.push(temp);
        temp = "";
        temp += chr[a];
    }
    return temp
}

将canvas合成的图片绘制到div中

function convertCanvasToImage(canvas, el) { // 将canvas合成的图片绘制到div中
    var hc_image = new Image();
    hc_image.src = canvas.toDataURL("image/png");
    el.html(hc_image);
}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-06-30，如有侵权请联系 cloudcommunity@tencent.com 删除

html