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

最新推荐文章于 2021-12-24 16:57:23 发布

wflynn

最新推荐文章于 2021-12-24 16:57:23 发布

阅读量361

点赞数

分类专栏： uniapp

文章来源：原创地址

本文链接：https://blog.csdn.net/weixin_40013817/article/details/106036245

版权

uniapp 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

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

wflynn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas合成任意数量图片、合成二维码加文字封装处理

代码已上传至githubgithub代码地址：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"&.
复制链接

扫一扫