js獲取圖片的base64編碼并壓縮
更新時間：2020年12月05日 09:07:06 作者：君子笑而不語
這篇文章主要介紹了js獲取圖片的base64編碼并壓縮，幫助大家更好的理解和使用js，感興趣的朋友可以了解下
獲取圖片的base64編碼
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title></title>
</head>
<body>
<input accept="image/*" name="upimage" id="upload_file" type="file" onchange="gen_base64()">
<br/>
<textarea id="base64_output" name="Word" style=" width:820px"></textarea>
<br/>
<img src="" id="myImg" />
<script type="text/javascript">
function $_(id) {
return document.getElementById(id);
}
function gen_base64() {
var file = $_('upload_file').files[0];
r = new FileReader(); //本地預(yù)覽
r.onload = function(){
$_('base64_output').value = r.result;
$_('myImg').src= r.result;
}
r.readAsDataURL(file); //Base64
}
</script>
</body>
</html>
案例2：js壓縮圖片
<html>
<body>
<script>
function getUrl(fil) {
var Cnv = document.getElementById('myCanvas');
var Cntx = Cnv.getContext('2d');//獲取2d編輯容器
var imgss = new Image();//創(chuàng)建一個圖片
var agoimg=document.getElementById("ago");
for (var intI = 0; intI < fil.length; intI++) {//圖片回顯
var tmpFile = fil[intI];
var reader = new FileReader();
reader.readAsDataURL(tmpFile);
reader.onload = function (e) {
url = e.target.result;
imgss.src = url;
agoimg.src=url;
agoimg.onload = function () {
//等比縮放
var m = imgss.height / imgss.width;
Cnv.width = 300 ;//該值影響縮放后圖片的大小
Cnv.height =300*m;
//img放入畫布中
Cntx.drawImage(agoimg, 0, 0,300,300*m);
//把畫布中的數(shù)據(jù)，寫出到某img的src里
var Pic = document.getElementById("myCanvas").toDataURL("image/png");
var imgs =document.getElementById("press");
imgs.src =Pic ;
}
}
}
}
</script>
<input type="file" id="fileId" name="fileId" value="上傳圖片" hidefocus="true" onchange="getUrl(this.files);"/> <br/>
<canvas id="myCanvas" style="display: block" ></canvas>
old img::<img src="" alt="" id="ago" style="width: 500px;"/>
new img::<img src="" alt="" id="press"/>
</body>
</html>
效果圖
以上就是js獲取圖片的base64編碼并壓縮的詳細內(nèi)容，更多關(guān)于js 圖片base64編碼的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了深入淺析Extjs中store分組功能的使用方法的相關(guān)資料,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了Webpack的Loader和Plugin的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了JavaScript中計算網(wǎng)頁中某個元素的位置,本文先是講解了一些必要的知識和實現(xiàn)難點,然后給出實現(xiàn)代碼,需要的朋友可以參考下2015-06-06
echarts報錯Cannot?read?properties?of?null?(reading?‘getA
最近在開發(fā)Echarts忽然遇到了個問題,這篇文章主要給大家介紹了關(guān)于echarts報錯Cannot?read?properties?of?null?(reading?‘getAttribute‘)的解決方法,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)上下切換位置，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了如何通過原生js實現(xiàn)設(shè)為首頁并兼容ie、火狐和谷歌,需要的朋友可以參考下2014-06-06
Web Worker 是一種在后臺線程中運行的 JavaScript 腳本,允許我們在不阻塞主線程的情況下執(zhí)行復(fù)雜計算或處理,Worker 加載的 JS 腳本如果存在跨域問題,可能導(dǎo)致腳本無法正常加載和執(zhí)行,以下是解決 Worker 加載 JS 腳本跨域問題的幾種方法,需要的朋友可以參考下2025-02-02
knockoutjs動態(tài)加載外部的file作為component中的template數(shù)據(jù)源的實現(xiàn)方法
Knockoutjs 的Components 是一種自定義的組件，它以一種強大、簡介的方式將你自己的ui代碼組織成一種單獨的、可重用的模塊。接下來通過本文給大家介紹knockoutjs動態(tài)加載外部的file作為component中的template數(shù)據(jù)源的實現(xiàn)方法，一起看看吧2016-09-09
數(shù)據(jù)結(jié)構(gòu)中的各種排序方法小結(jié)(JS實現(xiàn))
下面小編就為大家?guī)硪黄獢?shù)據(jù)結(jié)構(gòu)中的各種排序方法小結(jié)(JS實現(xiàn))。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
函數(shù)副作用 指當調(diào)用函數(shù)時，除了返回函數(shù)值之外，還對主調(diào)用函數(shù)產(chǎn)生附加的影響。例如修改全局變量（函數(shù)外的變量）或修改參數(shù)。2011-08-08