怎么得到图片的base64编码 - 技术问答 如何把img元素里面的图片的base64编码获取
\u600e\u4e48\u5f97\u5230\u56fe\u7247\u7684base64\u7f16\u7801 - \u6280\u672f\u95ee\u7b54\u5982\u9898 \u8c22\u8c22\u4e86\u5c31\u662f\u76f4\u63a5\u5c06\u56fe\u7247\u6587\u4ef6\u7684\u7f16\u7801base64_encode\u554a, \u4e0d\u4fe1\u4f60\u8fd9\u6837\u8bd5\u8bd5.[php]
\u6ee1\u610f\u8bf7\u91c7\u7eb3
\u6211\u89c9\u5f97\u5b9a\u4e49\u4e00\u4e2ajava\u7c7b\u64cd\u4f5c\u6587\u4ef6\uff0c\u7528js\u53bb\u8c03\u7528\u5b83\uff0c\u6700\u76f4\u63a5\u6700\u7b80\u5355\u3002
\u5982\u679c\u4e0d\u7528file:// \u8bbf\u95ee\u7684\u8bdd\uff0c\u5012\u662f\u8fd8\u53ef\u4ee5\u4f7f\u7528CORS\u89e3\u51b3\u8de8\u57df\u3001canvas\u7684getImageData\u3001toDataURL\u4e4b\u7c7b\u7684\u65b9\u6cd5\u8bfb\u53d6\u6570\u636e\u3002
所以思路是：
获得canvas对象
加载图片到canvas对象里面
从canvas对象中获取base64数据
给个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/png");
return dataURL
// return dataURL.replace("data:image/png;base64,", "");
}
function main() {
var img = document.createElement('img');
img.src = './images/yeoman.png';
img.onload =function() {
var data = getBase64Image(img);
console.log(data);
}
document.body.appendChild(img);
}
main()
</script>
</body>
</html>
然后可以在控制台看到base64的数据。
就是直接将图片文件的编码base64_encode啊, 不信你这样试试.[php]
绛旓細// 2. 鑾峰彇鍥惧儚鏁版嵁, API 1.9.0 wx.canvasGetImageData({ canvasId: canvasID, x: 0, y: 0, width: 300, height: 200, success(res) { // 3. png缂栫爜 let pngData = upng.encode([res.data.buffer], res.width, res.height) // 4. base64缂栫爜 let base64 = wx.arrayBufferToBase64(png...
绛旓細锛3锛夊綋浜岃繘鍒跺瓧鑺傛暟灏戜簬3涓紝鍗充簩杩涘埗bit鏁颁笉鏄6鐨勫嶆暟鏃讹細浜岃繘鍒朵綅鏁拌ˉ闆剁洿鍒癰it鏁颁负6鐨勬渶灏忓叕鍊嶆暟锛屽啀鎸6浣嶅垎闅旀煡琛寰楀埌瀵瑰簲鐨凚ASE64鍙墦鍗板瓧绗︼紱鏈鍚庯紝灏嗙紪鐮佺粨鏋滅敤鈥=鈥濊ˉ榻愪负4涓瓧绗︺傘恮hy锛熶负浜嗕笌鍘熺爜涓湰鏉ユ湁鐨0杩涜鍖哄埆銆戜緥锛氬皢a杩涜BASE64缂栫爜涓篩Q== 4. BASE64 ...
绛旓細鍧忚泲锛岄檲浜岀嫍鐨勫瀛戒汉鐢 锛 涓涓栨灜闆勶紝 榛戦亾瀛︾敓1 锛 鏍″洯鐙傚皯锛屾瀬鍝佸殻寮狅紝瓒呮瀬鍝佹祦姘 锛岄偑姘斿嚊鐒讹紝鐙遍攣鐙傞緳
绛旓細濡傛灉涓嶇敤鍚庡彴锛屽浘鐗囩殑璇濆彲浠ョ敤canvas.toDataURL鏂规硶鑾峰緱鍥剧墖鐨刡ase64瀛楃涓诧紙鍙栧緱鐨勫叾瀹炴槸鍥剧墖鐨勭洰鍓嶇殑鏄剧ず鏁版嵁娴佽屼笉鏄簮鏂囦欢鏁版嵁锛屾晠涓嶆秹鍙婂悓婧愮瓥鐣ラ棶棰橈級銆備絾濡傛灉鏄换鎰忔枃浠讹紝璨屼技鏃犺В锛岃繖閲屾秹鍙婂悓婧愮瓥鐣ラ棶棰橈紝鍗充竴涓紙涓嶅彈鎺э級鐨勭綉绔欙紝閫氳繃鍓嶇椤甸潰锛岄氳繃js璇诲彇鏈湴锛堥潪鍚屾簮锛変换鎰忔枃浠讹紝寰楀埌杩欎釜鏂囦欢鐨...
绛旓細鑰 Base64 缂栫爜鍙互閫氳繃 Data URL 鎶鏈鍥剧墖浠ュ瓧绗︿覆鐨勬牸寮忕洿鎺ュ祵鍏ラ〉闈紝涓 HTML 鎴愪负涓浣撱傝繖鏍峰湪鍔犺浇鏃跺氨鍙互閬垮紑瀵瑰閮ㄨ祫婧愮殑璇锋眰 涓轰粈涔堥夋嫨 Data URL 鑷充簬涓轰粈涔堥夋嫨 Data URL 鎶鏈紝鏄洜涓鸿窡浼犵粺鐨勫閮ㄨ祫婧愬紩鐢ㄦ柟寮忕浉姣旓紝瀹冩嫢鏈変互涓嬩紭鐐癸細閫氳繃杩欑鏂瑰紡 Base64 缂栫爜鍙互鏇翠负蹇嵎鏂逛究寰瀵瑰墠绔殑鍚勭...
绛旓細鏈杩戝叕鍙哥殑鏌愪釜鎺ュ彛闇瑕佸皢鍥剧墖浠ase64缂栫爜鍚庣殑瀛楃涓蹭綔涓哄弬鏁般傚熸浜嗚В鍥剧墖鐨凚ase64缂栫爜銆傚浘鐗囪繘杩嘊ase64缂栫爜鍚庣敓鎴愮殑鏁版嵁濡備笅锛 data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B鈥oqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJ...
绛旓細浣跨敤璇存槑 1锛変粠 iOS7.0 寮濮嬶紝鑻规灉灏辨彁渚涗簡base64鐨勭紪鐮鍜岃В鐮佹敮鎸 2锛夊鏋滄槸鑰侀」鐩紝鍒欒繕鑳界湅鍒base64缂栫爜鍜岃В鐮佺殑绗笁鏂规鏋讹紝濡傛灉褰撳墠涓嶅啀鏀寔iOS7.0浠ヤ笅鐗堟湰锛屽垯寤鸿鏇挎崲銆 鎻忚堪 Base64鍙互鎴愪负瀵嗙爜瀛︾殑鍩虹煶锛岄潪甯搁噸瑕併傜壒鐐 缁撴灉 鎵鏈夌殑鏁版嵁閮借兘琚紪鐮佷负骞跺彧鐢 65 涓瓧绗﹀氨...
绛旓細鍙互浣跨敤Image瀵硅薄鏉鑾峰彇鍥剧墖鐨鍍忕礌澶у皬锛屼唬鐮佸涓嬶細var img = new Image()img.src = base64;锛鍥剧墖鐨刡ase64缂栫爜瀛楃涓诧級img.height鍗充负鍥剧墖鐨勯珮搴 img.width鍗充负鍥剧墖鐨勫搴
绛旓細String s = new sun.misc.BASE64Encoder().encode(url.getByte());
绛旓細杈撳嚭html 鏍煎紡锛屾斁姝宨mg 鏍囩锛1鍏堟妸base64缂栫爜杞负鍥剧墖锛屽啀鐢熸垚world./// <summary> /// base64缂栫爜鐨勬枃鏈浆涓哄浘鐗 /// </summary> /// <param name="txtFilePath">鏂囦欢鐩稿璺緞(瀛樺埌鏈嶅姟鍣ㄤ笂)</param> /// <param name="str">鍥剧墖瀛楃涓</param> private void Base64...
