国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

node環(huán)境安裝canvas并自定義字體

testHs / 1385人閱讀

摘要:那便是極好的自定義字體不過可能會發(fā)現(xiàn)這是因為版本的沒有這個函數(shù)。

為什么要在服務(wù)端裝canvas? 因為并不是所有的客戶端都能很好的支持canvas(比如微信小程序不能修改自定義字體),所以我們需要一個
能夠在服務(wù)端生成圖片的,然后將圖片傳輸

安裝node-canvas 1. 更新編譯環(huán)境
sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++ -y
2. 安裝node-canvas
npm install -g canvas
3. 測試代碼
var Canvas = require("canvas"),
    canvas = new Canvas(300, 200),
    ctx = canvas.getContext("2d"),
    fs = require("fs");
 
var out = fs.createWriteStream(__dirname + "/image.png")
  , stream = canvas.createPNGStream();
 
stream.on("data", function(chunk){
  out.write(chunk);
});
 
//在左邊畫正方形
ctx.fillStyle = "#A00"    
ctx.fillRect(0, 30,50,50);   
  
 
//在右邊畫正方形
ctx.fillStyle = "#aaa"    
ctx.fillRect(50, 30, 50, 50);
 
//畫文字
ctx.fillStyle = "#000";
ctx.font = "20px Arial";
ctx.fillText("Hello World", 0, 20);
 
//畫一個圓
ctx.beginPath();
ctx.arc(30, 110, 20, 0, 2*Math.PI);
ctx.stroke();
ctx.fillStyle = "green";                                                                                                                          
ctx.fill();
ctx.save();  
可能遇到的問題
如果你按上述方法操作,并且運行成功了。那便是極好的
1. 自定義字體
// You need to call it before the Canvas is created
Canvas.registerFont("comicsans.ttf", {family: "Comic Sans"});

var canvas = new Canvas(500, 500),
  ctx = canvas.getContext("2d");

ctx.font = "12px "Comic Sans"";
ctx.fillText(250, 10, "Everyone hates this font :(");
不過可能會發(fā)現(xiàn)Canvas.registerFont is not a function這是因為npm版本的沒有這個函數(shù)。

所以你需要去找另一個github版https://github.com/chearon/node-canvas#12971f64a66b

git clone 下來

然后將Canvas = require("canvas")改成require("./node-canvas"),
var canvas = new Canvas(300, 200)改成var canvas = new Canvas.Canvas(300, 200)
2. Error: Cannot find module "../build/Release/canvas.node"
如果遇到這個問題,請cd進你的node-canvas目錄執(zhí)行npm install

如果還是不行,請執(zhí)行npm install -g node-gyp

然后再cd項目目錄執(zhí)行node-gyp rebuild,then cd 進node-canvas同樣執(zhí)行node-gyp rebuild

如果成功則會出現(xiàn)

示例代碼 我的項目目錄
.
├── 1.html
├── composer.json
├── font
├── fz.ttf
├── img
├── index.js
├── node-canvas
├── node_modules
├── package.json
└── package-lock.json
我的代碼
var fs = require("fs"),path = require("path");
var http = require("http"),url = require("url");
var Canvas = require("./node-canvas"),Image = Canvas.Image;
var Fonts = [];
var filePath = path.resolve("./font");

let promise = new Promise(function(resolve, reject) {
  let i=0;
  fs.readdir(filePath,function(err,files){  
    if(err){  
      console.warn(err)  
    }else{
      files.forEach(function(filename){
        Canvas.registerFont(filePath + "/" + filename, {family: "font" + i});
        console.log(i);
        i++;
      });
    }
  });
  
});

promise.then(function() {
  console.log("ASDF");
  Fonts.forEach((Element) =>{
    console.log(Element);
  });
});

console.log("Hi!");


http.createServer(function (req, res) {
  var params = url.parse(req.url, true).query;
  var str = params.str + "
",site = params.site;
  var row =  1,col = 15,width = 1500;
  row = str.length / 15 + 1;
  var fontsize = width/col;
  var height = fontsize * row + 200;
  if(height < 1000){height = 1000}
  var canvas = new Canvas.Canvas(width, height), ctx = canvas.getContext("2d")
  res.writeHead(200,{"Content-Type": "image/png"});
  ctx.fillStyle = "#FFF";
  ctx.fillRect(0,0,canvas.width, canvas.height);
  ctx.fillStyle = "#000";
  if(row < 2){
    let num = str.length
    fontsize = 1200 / num;
    ctx.font = fontsize + "px "font"+ site +""";
    ctx.fillText(str,( width - num * fontsize ) / 2, (height-fontsize)/2 -200 + fontsize);
  }
  else{
    ctx.font = fontsize + "px "font"+ site +""";
    for(let i = 0;i < row ; i++){
      ctx.fillText(str.substring(i*15,(i+1)*15), 0, fontsize*(i+1));
    }
  }
  
  fs.readFile(__dirname + "/img/brand.png", function(err, squid){
    if (err) throw err;
    img = new Image;
    img.src = squid;
    ctx.fillStyle = "#42b983";
    ctx.fillRect(0,canvas.height - 230,canvas.width, 230);
    ctx.drawImage(img, canvas.width - img.width / 2 - 50, canvas.height - img.height / 2 - 50, img.width / 2, img.height / 2);
    res.end(canvas.toBuffer());
  });
}).listen(8080);

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/95545.html

相關(guān)文章

  • 使用vue完成微信公眾號網(wǎng)頁小記

    摘要:前言公司最近有一個頁面的功能,比較簡單的一個調(diào)查表功能,嵌套在我們微信公眾號里面。同時用到了微信的登錄和分享接口。參考鏈接使用微信接口前端部分我們用微信接口主要是做的登錄和分享功能,首先是上微信公眾平臺上邊看看,把權(quán)限搞好之后后端配置。 showImg(https://segmentfault.com/img/bVbrOkH); 前言: 公司最近有一個H5頁面的功能,比較簡單的一個調(diào)查...

    phoenixsky 評論0 收藏0
  • 使用vue完成微信公眾號網(wǎng)頁小記

    摘要:前言公司最近有一個頁面的功能,比較簡單的一個調(diào)查表功能,嵌套在我們微信公眾號里面。同時用到了微信的登錄和分享接口。參考鏈接使用微信接口前端部分我們用微信接口主要是做的登錄和分享功能,首先是上微信公眾平臺上邊看看,把權(quán)限搞好之后后端配置。 showImg(https://segmentfault.com/img/bVbrOkH); 前言: 公司最近有一個H5頁面的功能,比較簡單的一個調(diào)查...

    notebin 評論0 收藏0
  • 使用vue完成微信公眾號網(wǎng)頁小記

    摘要:前言公司最近有一個頁面的功能,比較簡單的一個調(diào)查表功能,嵌套在我們微信公眾號里面。同時用到了微信的登錄和分享接口。參考鏈接使用微信接口前端部分我們用微信接口主要是做的登錄和分享功能,首先是上微信公眾平臺上邊看看,把權(quán)限搞好之后后端配置。 showImg(https://segmentfault.com/img/bVbrOkH); 前言: 公司最近有一個H5頁面的功能,比較簡單的一個調(diào)查...

    yck 評論0 收藏0

發(fā)表評論

0條評論

testHs

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<