H5如何用Canvas畫布生成並保存帶圖片文字的新年快樂的海報

時間 2019-12-11

標籤 h5 如何 canvas 畫布生成保存圖片文字新年快樂海報简体版

原文原文鏈接

摘要：初略算了算大概有20天沒有寫博客了，本來是打算1月1號元旦那天寫一個年終總結的，博客園裏大佬們都在總結過去，迎接未來，看得我熱血沸騰，想一想本身也工做快2年了，去年都沒有去總結一下，今年勢必要總結一番了，可是工做任務有點緊，就把這件事擱置起來了，只好推到來年收假去寫一篇總結性的博客了，提及寫博客，仍是個人一個室友推薦我來寫的，當時就以爲上班任務都作不完，哪有時間來寫博客，後來發現本身有問題就去找別人的博客來解決，就想着本身也寫博客，把本身不知道或者有經驗的記錄下來，一方面之後遇到一樣的問題能夠來參考，另外一方面說不定也多多少少能幫助到一些人，如今也斷斷續續寫了大概20篇博客了，每當別人留言說學到了，我就堅決了我寫博客的想法了，咳咳，話題扯開了，扯回來......javascript

en,而後我要說什麼來着？對，如何用畫布生成一張海報，就像這樣：html

咳咳，拿錯了，拿出我寫的生成報告的圖片的，博客這裏介紹入門級的，再來一次，就像這樣：java

嗯，本文就按照上方這張海報來進行講解（圖文與博主實際想法不符）。jquery

一.什麼是Canvas?canvas

HTML5 <canvas> 元素用於圖形的繪製，經過腳本 (一般是JavaScript)來完成.api

<canvas> 標籤只是圖形容器，您必須使用腳原本繪製圖形。app

你能夠經過多種方法使用 canvas 繪製路徑,盒、圓、字符以及添加圖像。函數

二.建立一個畫布（Canvas）字體

<canvas id="aa" width="370px"height="667px" style="display: none;"></canvas>

三.Canvas-文本ui

var aa = document.getElementById('aa');
var bb = aa.getContext('2d');
bb.fillStyle = '#fff';   // 文字填充顏色
bb.font = '30px Adobe Ming Std';
bb.fillText('豬年快樂！',120,200);

四.Canvas-圖片

var imgtwo = new Image;
imgtwo.src = 'img/rjgx-canvasthree.png';
 
imgtwo.onload = function () {
   bb.drawImage(imgtwo, 0,0,370,667);
}

五.Canvas-文本換行

fillText()在固寬的canvas中，字數過多的時候，並不會自動換行，咱們能夠增長canvas自己的寬度，但這不是解決問題的根本方法。還記得以前介紹canvas基本api的時候，有一個函數，

context.measureText(text)

這個函數能夠測量字體的寬高度，那就好辦了，咱們計算好咱們字符串的長度加上一個大概的寬度，基本上能夠處理這種換行的問題了。

bb.fillStyle = 'yellow';
bb.font = '26px Adobe Ming Std';
bb.lineWidth=1; 
var str = "哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈"
//            bb.fillText(str,65,750);
var lineWidth = 0;
var canvasWidth = aa.width-50;//計算canvas的寬度
var initHeight=400;//繪製字體距離canvas頂部初始的高度
var lastSubStrIndex= 0; //每次開始截取的字符串的索引
for(let i=0;i<str.length;i++){ 
lineWidth+=bb.measureText(str[i]).width; 
if(lineWidth>canvasWidth){  
  bb.fillText(str.substring(lastSubStrIndex,i),25,initHeight);//繪製截取部分
  initHeight+=40;//40爲字體的高度
  lineWidth=25;
  lastSubStrIndex=i;
} 
if(i==str.length-1){//繪製剩餘部分
  bb.fillText(str.substring(lastSubStrIndex,i+1),25,initHeight);
}
}

六.Canvas-加入容器

window.onload=function(){
var img = convertCanvasToImage(aa);
$('.box').append(img);
console.log(img);
}

function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

七.Canvas-下載

//下載海報
function downloadimg() {
    var img = $('.box').children('img').attr("src");
    var alink = document.createElement("a");
    alink.href = img;
    alink.download = "新年快樂.png";
    alink.click();
}

八.總體代碼

好了好了，知道了，我其實也不喜歡看介紹，直接給我個demo多好，直接複製看效果，可是不介紹直接發代碼會被移除首頁的，因此，大家就勉爲其難看一下吧，但願有用：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <title>文字+圖片+下載圖片</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <canvas id="aa" width="370px"height="667px" style="display: none;"></canvas>
    <div class="box" style="background-color:red;width: 370px;height: 667px;"></div>
    <input type="button"  value="下載畫報" style="margin-left: 150px;margin-top: 20px;" onclick="downloadimg()"/>
    <script>
        var aa = document.getElementById('aa');
        var bb = aa.getContext('2d');
        
        var imgone = new Image;
        imgone.src = 'img/happy.png';
 
        imgone.onload = function () {
            bb.drawImage(imgone, 0,0,370,667);
            
            bb.fillStyle = '#fff';   // 文字填充顏色
            bb.font = '30px Adobe Ming Std';
            bb.fillText('豬年快樂！',120,200);
            
            bb.fillStyle = '#fff';
            bb.font = '40px Adobe Ming Std';
            bb.fillText('2019年',120,270);
            
            bb.fillStyle = '#fff';
            bb.font = '26px Adobe Ming Std';
            bb.fillText('Bug也會一直陪在你身邊',40,320);
            
            bb.fillStyle = 'yellow';
            bb.font = '26px Adobe Ming Std';
            bb.lineWidth=1; 
            var str = "哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈"
//            bb.fillText(str,65,750);
            var lineWidth = 0;
            var canvasWidth = aa.width-50;//計算canvas的寬度
            var initHeight=400;//繪製字體距離canvas頂部初始的高度
            var lastSubStrIndex= 0; //每次開始截取的字符串的索引
            for(let i=0;i<str.length;i++){ 
                lineWidth+=bb.measureText(str[i]).width; 
                if(lineWidth>canvasWidth){  
                    bb.fillText(str.substring(lastSubStrIndex,i),25,initHeight);//繪製截取部分
                    initHeight+=40;//40爲字體的高度
                    lineWidth=25;
                    lastSubStrIndex=i;
                } 
                if(i==str.length-1){//繪製剩餘部分
                    bb.fillText(str.substring(lastSubStrIndex,i+1),25,initHeight);
                }
            }
        
        }

        window.onload=function(){
        var img = convertCanvasToImage(aa);
        $('.box').append(img);
        console.log(img);
        }
    
        function convertCanvasToImage(canvas) {
            var image = new Image();
            image.src = canvas.toDataURL("image/png");
            return image;
        }
        
        //下載海報
        function downloadimg() {
            var img = $('.box').children('img').attr("src");
            var alink = document.createElement("a");
            alink.href = img;
            alink.download = "新年快樂.png";
            alink.click();
        }
    </script>
</body>
</html>