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