移动端canvas合成图片，填充文字自动换行

今天用canvas合成带有微信公众号二维码和祝福语的春节贺卡

由于代码都是原生的没有引入其他库，所以直接将对应部分贴出来吧。

html

<!--画布 -->
<canvas id="canvas" class="hide">Your browser does not support the HTML5 canvas tag.
</canvas>
<!--背景图-->
<img id="page2_bg" src="data:images/greeting_card1.jpg" class="hide"/>
<!--二维码-->
<img id="test1" class="hide" src="data:images/code.png" />
<!--装图片的容器-->
<div id="new-img-div" class="hide"><img src="data:images/close.png" class="close-img"/><div id="onlyoneImg"></div>
</div>

css:

.hide {display: none;
}

其他元素布局的样式就不贴了，毕竟没有难度

接下来看看重头戏js:

    //给canvas定宽高var bodyW = $('body').width()+'px';var bodyH = $('body').height()+'px';console.log('bodyW',bodyW);console.log('bodyH',bodyH);$("#canvas").attr('width','640px')$("#canvas").attr('height','1138px')//画图函数function writeTextOnCanvas(cns, lh, rw, text){var cns = document.getElementById(cns);var ctx = cns.getContext("2d");//提供canvas的数据var canvasW = $('#canvas').width();var canvasH = $('#canvas').height();console.log('canvasW',canvasW)//var wordsTop = canvasH*0.185;var wordsLeft = canvasW*0.195;var wordsAllWidth = canvasW*0.65;console.log(wordsAllWidth)var wordsNumOnline = parseInt(wordsAllWidth/12)var img1=document.getElementById("page2_bg");var img2= document.getElementById("test1");//var img111 = img1.attr('src');console.log(img1);//画背景ctx.drawImage(img1,0,0,canvasW,canvasH);//画二维码ctx.drawImage(img2,428,884,171,172);//处理文字var lineheight = lh;var text = text;ctx.width = cns.width;ctx.height = cns.height;//字体大小必须和字体类型一起设置ctx.font="24px Helvetica";//字体颜色ctx.fillStyle = '#f6dda0';function getTrueLength(str){//获取字符串的真实长度（字节长度）var len = str.length, truelen = 0;for(var x = 0; x < len; x++){if(str.charCodeAt(x) > 128){truelen += 2;}else{truelen += 1;}}return truelen;}function cutString(str, leng){//按字节长度截取字符串，返回substr截取位置var len = str.length, tlen = len, nlen = 0;for(var x = 0; x < len; x++){if(str.charCodeAt(x) > 128){console.log('汉字')if(nlen + 2 < leng){nlen += 2;}else{tlen = x;break;}}else{console.log('字符')if(nlen + 1 < leng){nlen += 1;}else{tlen = x;break;}}}return tlen;}for(var i = 1; getTrueLength(text) > 0; i++){//分行var tl = cutString(text, wordsNumOnline);ctx.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), wordsLeft, i * lineheight + wordsTop);text = text.substr(tl);}//转化成图片var flagImg = document.createElement("img");flagImg.src = cns.toDataURL("image/png");$("#onlyoneImg").append(flagImg);$('#canvas').addClass('hide');}
writeTextOnCanvas("canvas", 32, 40, '祝你新年快乐，万事如意');

有一点需要注意的：

flagImg.src = cns.toDataURL("image/png");

这里的转化会出现跨域问题，所以合成的图片来源必须要是同源。

移动端canvas合成图片，填充文字自动换行相关推荐

[JavaScript] canvas 合成图片和文字
Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画创建一个 canvas <canvas id="stockGraph" ...
canvas绘制海报中文字自动换行
canvas:canvas绘制海报中文字自动换行问题描述 canvas绘制的海报在某一行文字过多时不会自动换行(设置文本宽度无用) 源代码 context.fillText(this.data.go ...
.net core Graphics合成图片加文字
.net core Graphics合成图片加文字引用: using System; using System.Drawing; using System.Drawing.Text; 代码 stat ...
Canvas合成图片
const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')const img = new Im ...
canvas合成图片圣诞节新技能戴帽
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
微信小程序canvas合成图片（海报）,生成的图片展示不出来，或者空白。
背景: 1.用户点击分享朋友圈,将二维码与一张背景图合成一张图片,然后将其显示. 2.用户点击保存图片将图片保存到手机相册里面. 问题: 用户点击分享盆友圈合成后的图片显示空白.控制台可以打印出来链接 ...
微信小程序图片转换成文字_微信小程序中用canvas将文字转成图片，文字自动换行...
onReady: function () { wx.showLoading({ title: '生成图片中...', }) var that = this const ctx = wx.createC ...
不能换行俄语前端h5_HTML5 Canvas fillText填充文字自动换行（支持中英文混合）...
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 (function() { function writeTextOnCanvas(cns, lh, rw, ...
html如何使图片不自动填充颜色,使用HTML5 Canvas为图片填充颜色和纹理的教程
填充颜色艺术离不开色彩,今天咱们来介绍一下填充颜色,体会一下色彩的魅力. 填充颜色主要分为两种: 1.基本颜色 2.渐变颜色(又分为线性渐变与径向渐变) 我们一个个来看. 填充基本颜色Canvas ...

移动端canvas合成图片，填充文字自动换行

移动端canvas合成图片，填充文字自动换行相关推荐

最新文章

热门文章