国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術(shù)干貨  > canvasbase64詳解

canvasbase64詳解

來源:千鋒教育
發(fā)布人:xqq
時間: 2023-11-23 12:50:04 1700715004

一、canvas是什么

Canvas是一個HTML5標簽,可以用來繪制圖形、動畫、甚至是視頻。使用Canvas,你可以基于用戶的事件動態(tài)地生成圖像,例如游戲或數(shù)據(jù)可視化,也可以將其用作簡單的圖像編輯器或者成為一個復(fù)雜應(yīng)用的重要組件。

在Canvas中,繪制是由Javascript覆蓋到特定區(qū)域中的基礎(chǔ)圖形初始化而完成的。每一個Canvas元素有一個2D渲染內(nèi)容區(qū)域。這里可以通過Javascript來繪制圖像。

二、base64是什么

Base64是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)碼的編碼方式之一,大家實際上可以將Base64理解為一種編碼格式、而非加密算法。Base64編碼將3個字節(jié)的二進制數(shù)據(jù)編碼成4個字節(jié)的文本數(shù)據(jù),長度增加33%。

Base64常用于在HTTP協(xié)議下傳輸HTTP認證信息,因為一些特殊字符沒有被HTTP協(xié)議允許直接傳輸,所以進行Base64編碼。

三、canvasbase64的基本原理

Canvas中我們可以使用toDataURL()方法將Canvas圖像轉(zhuǎn)換為一個base64圖片。toDataURL()方法返回的是Canvas元素的一個數(shù)據(jù)地址。該地址包含了Canvas圖像的基本信息,標志了該圖像類型、尺寸等內(nèi)容,并且以base64的形式顯示了Canvas圖像的具體內(nèi)容。

使用Canvas+base64的組合,我們可以輕松地將Canvas圖像轉(zhuǎn)換為base64圖片,并按需傳輸或者展示。

四、canvasbase64的特點與用途

Canvasbase64具有以下幾個特點:

1、base64編碼后的圖片可以嵌入HTML或者CSS文件中,實現(xiàn)無縫展示。

2、base64編碼后的圖片不需要額外的下載,節(jié)省了圖片下載的網(wǎng)絡(luò)開銷。

3、base64編碼后的圖片可以直接使用Javascript加載,實現(xiàn)異步加載。

Canvasbase64主要應(yīng)用于以下場景:

1、生成二維碼。


let canvas = document.createElement("canvas");
let context = canvas.getContext("2d");
canvas.width = 200;
canvas.height = 200;
QRCode.toCanvas(canvas, "Hello World", function (error) {
  if (error) console.error(error);
});
let imgData = canvas.toDataURL("image/png");

2、繪制海報。


let img = new Image();
img.crossOrigin = "";
img.src = "http://www.kei0345678.cn/2023/1123/1700715002105.png";
img.onload = function () {
  let canvas = document.createElement("canvas");
  let context = canvas.getContext("2d");
  canvas.width = img.width;
  canvas.height = img.height;
  context.drawImage(img, 0, 0);
  context.font = "18px Arial";
  context.fillText("Example", 10, 50);
  let imgData = canvas.toDataURL("image/png");
};

3、實現(xiàn)手寫板。


let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.strokeStyle = "black";
context.lineWidth = 5;
let drawing = false;
canvas.addEventListener("mousedown", function (event) {
  drawing = true;
  context.beginPath();
  context.moveTo(
    event.pageX - canvas.offsetLeft,
    event.pageY - canvas.offsetTop
  );
});
canvas.addEventListener("mousemove", function (event) {
  if (!drawing) return;
  context.lineTo(
    event.pageX - canvas.offsetLeft,
    event.pageY - canvas.offsetTop
  );
  context.stroke();
});
canvas.addEventListener("mouseup", function (event) {
  drawing = false;
});

五、canvasbase64的示例代碼

下面我們來看一個完整的Canvasbase64實現(xiàn)過程的示例代碼:


// HTML


// JavaScript
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.fillStyle = "#fff";
context.fillRect(0, 0, canvas.width, canvas.height);
context.font = "30px Arial";
context.fillStyle = "#000";
context.fillText("Hello World", 50, 100);
let imgData = canvas.toDataURL("image/png");
let imgElement = document.createElement("img");
imgElement.src = imgData;
document.body.appendChild(imgElement);

tags: canvasbase64
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學 138****2860 剛剛成功領(lǐng)取
王同學 131****2015 剛剛成功領(lǐng)取
張同學 133****4652 剛剛成功領(lǐng)取
李同學 135****8607 剛剛成功領(lǐng)取
楊同學 132****5667 剛剛成功領(lǐng)取
岳同學 134****6652 剛剛成功領(lǐng)取
梁同學 157****2950 剛剛成功領(lǐng)取
劉同學 189****1015 剛剛成功領(lǐng)取
張同學 155****4678 剛剛成功領(lǐng)取
鄒同學 139****2907 剛剛成功領(lǐng)取
董同學 138****2867 剛剛成功領(lǐng)取
周同學 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT