canvas合成任意数量图片、合成二维码加文字封装处理

绝地灬酷狼 2023-03-13 03:24 44阅读 0赞

代码已上传至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

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);
    }