利用 HTML5 的 <canvas></canvas> 標簽和 canvasapi ，我們可以得到圖片的 base64 碼，可以在前臺完成圖片向 base64 的轉(zhuǎn)碼而不用借助后臺，下面看一下實現(xiàn)方法。

為密山等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及密山網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計、密山網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

1.HTML代碼片段：

HTML 代碼非常簡單，只需要用到 HTML5 的<canvas></canvas> 標簽即可，指定其 id 方便我們找到該元素：

<canvas id="load-area"></canvas>

但是需要注意的一點是，需要轉(zhuǎn)換為 base64 碼的圖片都需要事先包含在 <img /> 標簽中，同時這么做可以為我們提供圖片的真實寬度和高度值。為了不影響顯示，可以選擇將其設(shè)置為隱藏：

<img id="convert-img" src="img/demo.png"  />

2.JavaScript代碼片段：

JavaScript 代碼中我們用到 canvas api 中的三個方法：getContext(“2d”) 、 drawImage(tmpImage, 0, 0) 、 toDataURL(“p_w_picpath/png”)，我們不去深究這些方法，只要知道“2d” 指定圖片維度， tmpImage 為 Image 對象，0, 0 分別為生成后的圖片距左及距上的像素數(shù)即可。來看具體代碼：

$(window).load(function(){   var loadCanvas = document.getElementById("load-area"),   context = loadCanvas.getContext("2d"),   tmpImage = new Image(),   base64Str = "";   loadCanvas.width = $('#convert-img').width();   loadCanvas.width = $('#convert-img').height();   tmpImage.src = "img/demo.png";   context.drawImage(tmpImage, 0, 0);   base64Str = loadCanvas.toDataURL("p_w_picpath/png"); };

至此，變量 base64Str即為圖片轉(zhuǎn)換成的 base64 碼。可以通過 ajax 向直接 POST 給后臺，通過 base64 解碼保存，完成圖片上傳。

補充：

在JavaScript 代碼中我們用到了 jQuery 中的

$(window).load(function(){});

方法，該方法作用幾乎等同于 JavaScript 中的

window.onload =function() {};

只是前者在同一個頁面中可以使用多次，而后者在同一個頁面中只能使用一次。這里不使用

$(document).ready(function(){}); //$(function () {});

是因為該方法的時間節(jié)點是 DOM 加載完畢，而圖片、音樂等大型文件可能仍為加載完。如果想要使用，需要將 JavaScript 做如下改造：

$(function() {   var tmpImage = new Image();   tmpImage.src = "img/demo.png";   tmpImage.onload = function() {     var loadCanvas = $('#load-area').get(0),     context = loadCanvas.getContext("2d"),     base64Str = "";     loadCanvas.height = $('#convert-img').height();     loadCanvas.width = $('#convert-img').width();     context.drawImage(tmpImage, 0, 0);     base64Str = loadCanvas.toDataURL("p_w_picpath/png");   }; });

注：附件為該 demo 的源代碼，可供參考（原為 .html 文件，由于不允許上傳而轉(zhuǎn)換為 .txt 文件，可以在下載后自行修改文件后綴名）。

附件：http://down.51cto.com/data/2365621

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站標題：工作積累（一）——使用canvas實現(xiàn)前臺圖片base64轉(zhuǎn)-創(chuàng)新互聯(lián)
URL鏈接：http://aaarwkj.com/article40/pjeho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、定制開發(fā)、靜態(tài)網(wǎng)站、ChatGPT、搜索引擎優(yōu)化、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)