javascript從image轉換為base64位元編碼的String_javascript技巧
最近需要把app的微信分享方法開放給webview，涉及到分享的圖片，如果透過傳送圖片連接，那將要在後台再取一次圖片文件，會影響速度，我選擇webview把image以base64位元編碼的方式傳給本地應用。 以下是實作的參考程式碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Image to Base64 - jsFiddle demo by handtrix</title>
<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css" rel="external nofollow" >
<style type='text/css'>
@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css');
body{
padding: 20px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
/**
* convertImgToBase64
* @param {String} url
* @param {Function} callback
* @param {String} [outputFormat='image/png']
* @author HaNdTriX
* @example
convertImgToBase64('http://goo.gl/AOxHAL', function(base64Img){
console.log('IMAGE:',base64Img);
})
*/
function convertImgToBase64(url, callback, outputFormat){
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL);
// Clean up
canvas = null;
};
img.src = url;
}
$('#img2b64').submit(function(event){
var imageUrl = $(this).find('input[name=url]').val();
console.log('imageUrl', imageUrl);
convertImgToBase64(imageUrl, function(base64Img){
$('.output')
.find('textarea')
.val(base64Img)
.end()
.find('a')
.attr('href', base64Img)
.text(base64Img)
.end()
.find('img')
.attr('src', base64Img);
});
event.preventDefault();
});
});//]]>
</script>
</head>
<body>
<h2>Input</h2>
<form class="input-group" id="img2b64">
<input
type="url"
name="url"
class="form-control"
placeholder="Insert an IMAGE-URL"
value="http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png"
required>
<span class="input-group-btn">
<input
type="submit"
class="btn btn-default">
</span>
</form>
<hr>
<h2>Output</h2>
<div class="output">
<textarea class="form-control"></textarea><br>
<a></a><br><br>
<img><br>
</div>
</body>
</html>
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
11個常見的分類特徵的編碼技術
Apr 12, 2023 pm 12:16 PM
機器學習演算法只接受數值輸入，所以如果我們遇到分類特徵的時候都會對分類特徵進行編碼，本文總結了常見的11個分類變數編碼方法。 1.ONE HOT ENCODING最受歡迎且常用的編碼方法是One Hot Enoding。一個具有n個觀測值和d個不同值的單一變量被轉換成具有n個觀測值的d個二元變量，每個二元變量使用一位（0，1）進行標識。例如：編碼後最簡單的實作是使用pandas的' get_dummiesnew_df=pd.get_dummies(columns=[‘Sex’], data=df)2、
如何在 Windows 11 上安全地停用 Windows Modules Installer Worker
Apr 13, 2023 pm 03:43 PM
無論您使用的是舊電腦還是需要您的 PC 同時執行許多任務，您可能會想要停用 Windows 模組安裝程式工作程式。原因是 Windows 模組安裝程式工作人員對您的磁碟、CPU 和記憶體施加了很高的負載。您可能會使用最好的軟體來修復高 CPU 使用率，但一些報告顯示它甚至可能佔用 100% 的 CPU 使用率。雖然它可以幫助您維護一個更安全和可靠的系統，但它會付出代價。因此，您可以決定保留或停用它以避免效能問題。在本文中，我們將詳細探討什麼是 Windows 模組安裝程式工作人員以及如何啟用或
utf8編碼漢字佔多少位元組
Feb 21, 2023 am 11:40 AM
utf8編碼漢字佔3個位元組。在UTF-8編碼中，一個中文等於三個位元組，一個中文標點佔三個位元組；而在Unicode編碼中，一個中文（含繁體）等於兩個位元組。 UTF-8使用1~4位元組為每個字元編碼，一個US-ASCIl字元只需1位元組編碼，帶有變音符號的拉丁文、希臘文、西里爾字母、亞美尼亞語、希伯來文、阿拉伯文、敘利亞文等字母則需要2位元組編碼。
知識圖譜：大模型的理想搭檔
Jan 29, 2024 am 09:21 AM
大型語言模式（LLM）具有產生流暢和連貫文字的能力，為人工智慧的對話、創意寫作等領域帶來了新的前景。然而，LLM也存在一些關鍵限制。首先，它們的知識僅限於從訓練資料中辨識出的模式，缺乏對世界的真正理解。其次，推理能力有限，不能進行邏輯推理或從多個資料來源融合事實。面對更複雜、更開放的問題時，LLM的回答可能變得荒謬或矛盾，被稱為「幻覺」。因此，儘管LLM在某些方面非常有用，但在處理複雜問題和真實世界情境時，仍存在一定的限制。為了彌補這些差距，近年來出現了檢索增強生成（RAG）系統，其核心思想是
常見的幾種編碼方式
Oct 24, 2023 am 10:09 AM
常見的編碼方式有ASCII編碼、Unicode編碼、UTF-8編碼、UTF-16編碼、GBK編碼等。詳細介紹：1、ASCII編碼是最早的字符編碼標準，使用7位二進制數表示128個字符，包括英文字母、數字、標點符號以及控製字符等；2、Unicode編碼是一種用於表示世界上所有字元的標準編碼方式，它為每個字元分配了一個唯一的數字碼點；3、UTF-8編碼等等。
如何免費使用Bing Image Creator
Feb 27, 2024 am 11:04 AM
本文將介紹七種利用免費的BingImageCreator獲得高品質輸出的方法。 BingImageCreator（現稱為MicrosoftDesigner的ImageCreator）是一個出色的線上人工智慧藝術生成器之一。它能根據使用者的提示產生高度逼真的視覺效果。提示越具體、清晰和創意，生成的效果也會更出色。 BingImageCreator在創建高品質影像方面取得了重大進展。現在它使用Dall-E3訓練模式，顯示出更高水準的細節和現實主義。然而，它能否始終如一地產生高清結果取決於幾個因素，包括快速
小米手機image怎麼刪除
Mar 02, 2024 pm 05:34 PM
小米手機image怎麼刪除?在小米手機中是可以刪除image，但是多數的用戶不知道image如何的刪除，接下來就是小編為用戶帶來的小米手機image刪除方法教程，感興趣的用戶快來一起看看吧！小米手機image怎麼刪除1、先打開小米手機中的【相簿】功能;2、然後勾選不需要的圖片，點擊右下角的【刪除】按鈕;3、之後點擊最頂部的【相簿】進入到專區，選擇【回收站】;4、接著直接點選下圖所示的【清空回收站】;5、最後直接點選【永久刪除】即可完成。
PHP編碼小技巧：如何產生具有防偽驗證功能的二維碼？
Aug 17, 2023 pm 02:42 PM
PHP編碼小技巧：如何產生具有防偽驗證功能的二維碼？隨著電子商務和互聯網的發展，二維碼越來越被廣泛應用於各行各業。而在使用二維碼的過程中，為了確保產品的安全性和防止偽造，為二維碼添加防偽驗證功能是十分重要的一環。本文將介紹如何使用PHP產生具有防偽驗證功能的二維碼，並附上對應程式碼範例。在開始之前，我們需要準備以下幾個必要的工具和函式庫：PHPQRCode：PHP
