2. 程式人生 > >JS 對圖片base64編碼字串進行解碼並輸出影象

JS 對圖片base64編碼字串進行解碼並輸出影象

阿新 • • 發佈：2019-01-24
/////////////////////////// //base64編碼的GIF影象解碼 //By Mozart0 //2005/10/29 //////////////////// //建立GIF類的物件 //類GIF在此函式內部定義 //str64：gif檔案的Base64編碼字串 //成功返回建立的GIF物件 //失敗返回null function getGif(str64){ var bytes=decodeBase64(str64); if(!bytes){ alert("錯誤：無效的Base64編碼"); return null; } var gif=new GIF(); for(var i=0;i<6;i++) gif.version+=String
.fromCharCode(bytes[i]); if(gif.version.slice(0,3)!="GIF"){ alert("錯誤：非Gif影象格式"); return null; } gif.width=bytes[i]|(bytes[i+1]<<8); gif.height=bytes[i+2]|(bytes[i+3]<<8); var f=bytes[i+4]; gif.colorResolution=(f>>4&0x7)+1; gif.sorted=(f&0x8)?true
:false; gif.backgroundIndex=bytes[i+5]; gif.pixelAspectRadio=bytes[i+6]; if(f&0x80){ gif.globalPalette=[]; i+=getPalette(i+7,bytes,gif.globalPalette,2<<(f&0x7)); } i+=7; for(var j=i;j<bytes.length;j++) if(bytes[j]==0x21&&bytes[j+1]==0xf9) break
; if(j==bytes.length){ for(;i<bytes.length;i++) if(bytes[i]==0x2c) break; if(i==bytes.length){ alert("錯誤：找不到影象資料"); return null; } var f=new GIF_Frame(); if(!getSingleFrame(i,f)) return null; else gif.frames.push(f); } else{ i=j; do{ var f=new GIF_Frame(); var t=getSingleFrame(i,f); if(!t) return null; gif.frames.push(f); for(i+=t;i<bytes.length;i++) if(bytes[i]==0x21&&bytes[i+1]==0xf9) break; } while(i<bytes.length); } return gif; //內部過程，生成色表 function getPalette(pos,s,d,len){ len*=3; for(var i=pos;i<pos+len;i+=3) d.push('#'+(s[i]<=0xf?"0":"")+s[i].toString(16) +(s[i+1]<=0xf?"0":"")+s[i+1].toString(16) +(s[i+2]<=0xf?"0":"")+s[i+2].toString(16)); return len; } //內部過程，整合資料段 function getBlock(pos,s,d){ var p=pos; while(len=s[p++]){ for(var i=0;i<len;i++) d.push(s[p+i]); p+=len; } return p-pos; } //內部過程，獲取一幀資料 function getSingleFrame(pos,frame){ var i=pos; if(bytes[i]==0x21){ i+=3; if(bytes[i]&1) frame.transparentIndex=bytes[i+3]; frame.delay=bytes[i+1]|(bytes[i+2]<<8); for(i+=5;i<bytes.length&&bytes[i]!=0x2c;i++); if(i==bytes.length){ alert("錯誤:找不到影象標誌符"); return 0; } } frame.offsetX=bytes[i+1]|(bytes[i+2]<<8); frame.offsetY=bytes[i+3]|(bytes[i+4]<<8); frame.width=bytes[i+5]|(bytes[i+6]<<8); frame.height=bytes[i+7]|(bytes[i+8]<<8); var f=bytes[i+9]; i+=10; if(f&0x40) frame.interlace=true; if(f&0x20) frame.sorted=true; if(f&0x80){ frame.colorResolution=(f&0x7)+1; frame.localPalette=[]; i+=getPalette(i,bytes,frame.localPalette,1<<frame.colorResolution); } else{ frame.colorResolution=gif.colorResolution; frame.localPalette=gif.globalPalette; } var lzwLen=bytes[i++]+1; i+=getBlock(i,bytes,frame.data); frame.data=decodeLzw(frame.data,lzwLen); return frame.data?i-pos:0; } //定義儲存GIF檔案的資料結構 //提供方法showInfo,返回圖片資訊 function GIF(){ this.version=""; //版本號 this.width=0; //邏輯螢幕寬度 this.height=0; //邏輯螢幕高度 this.colorResolution=0; //顏色深度 this.sorted=false; //全域性色表分類標誌 this.globalPalette=null; //全域性色表 this.backgroundIndex=-1; //背景色索引 this.pixelAspectRadio=0; //畫素寬高比 this.frames=[]; //影象各幀，見GIF_Frame this.showInfo=function(sep){ //顯示圖片資訊,sep為行分隔符 if(!sep) sep="\n"; var s="Gif infomation:"+sep+"-------------------"; s+=subInfo(this)+sep; for(var i=0;i<this.frames.length;i++) s+=sep+"frames "+i+"----------"+subInfo(this.frames[i]); return s; function subInfo(o){ var s=""; for(var i in o){ if(i=="showInfo"||i=="draw") continue; s+=sep+i+":"; if(typeof(o[i])=="object") s+=(o[i]?o[i].length:"null"); else s+=o[i]; } return s; } } } //定義儲存一幀圖象的資料結構 //提供方法draw,繪圖 function GIF_Frame(){ this.offsetX=0; //X方向偏移量 this.offsetY=0; //Y方向偏移量 this.width=0; //圖象寬度 this.height=0; //圖象高度 this.localPalette=null; //區域性色表 this.colorResolution=0; //顏色深度 this.interlace=false; //交錯標誌 this.sorted=false; //區域性色表分類標誌 this.data=[]; //影象資料，儲存各畫素顏色的整數索引 this.transparentIndex=-1; //透明色索引 this.delay=0; //幀延時 this.draw=function(parent,zoom){ if(!this.data.length) return; if(!parent) parent=document.body; if(!zoom) zoom=1; if(parent.clientWidth<this.width*zoom) parent.style.width=this.width*zoom; if(parent.clientHeight<this.height*zoom) parent.style.height=this.height*zoom; var id="ImgDefaultDraw"; var img=document.getElementById(id); if(img) delete parent.removeChild(img); img=document.createElement("DIV"); img.id=id; parent.appendChild(img); img.style.position="absolute"; var t=document.createElement("DIV"); t.style.overflow="hidden"; t.style.position="absolute"; defLayout(this.data,this.localPalette,this.width,this.height,img,t,zoom); delete t; } } } //Base64解碼 //strIn，輸入字串 //成功返回一個數組，每一個元素包含一位元組資訊 //失敗返回null function decodeBase64(strIn){ if(!strIn.length||strIn.length%4) return null; var str64= "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; var index64=[]; for(var i=0;i<str64.length;i++) index64[str64.charAt(i)]=i; var c0,c1,c2,c3,b0,b1,b2; var len=strIn.length; var len1=len; if(strIn.charAt(len-1)=='=') len1-=4; var result=[]; for(var i=0,j=0;i<len1;i+=4){ c0=index64[strIn.charAt(i)]; c1=index64[strIn.charAt(i+1)]; c2=index64[strIn.charAt(i+2)]; c3=index64[strIn.charAt(i+3)]; b0=(c0<<2)|(c1>>4); b1=(c1<<4)|(c2>>2); b2=(c2<<6)|c3; result.push(b0&0xff); result.push(b1&0xff); result.push(b2&0xff); } if(len1!=len){ c0=index64[strIn.charAt(i)]; c1=index64[strIn.charAt(i+1)]; c2=strIn.charAt(i+2); b0=(c0<<2)|(c1>>4); result.push(b0&0xff); if(c2!='='){ c2=index64[c2]; b1=(c1<<4)|(c2>>2); result.push(b1&0xff); } } return result; } //用於GIF的LZW解碼函式 //arrBytes為源資料,nBits為初始編碼位數 //成功返回陣列，每個元素包括一個顏色索引 //失敗返回null function decodeLzw(arrBytes,nBits){ var cc=1<<(nBits-1); var eoi=cc+1; var table=[],mask=[],result=[]; for(var i=0;i<cc;i++) table[i]=(i>>8&0xf).toString(16) +(i>>4&0xf).toString(16)+(i&0xf).toString(16); for(i=2,mask[1]=1;i<13;i++) mask[i]=mask[i-1]<<1|1; var bc=nBits; var pos=0,temp=0,tleft=0,code=0,old=0; while(true){ while(tleft<bc){ temp=temp|(arrBytes[pos++]<<tleft); tleft+=8; } code=temp&mask[bc]; tleft-=bc; temp>>=bc; if(code==eoi) break; if(code==cc){ table.length=cc+2; bc=nBits; old=code; continue; } var t=""; if(code<table.length){ t=table[code]; if(old!=cc) table.push(table[old]+t.slice(0,3)); } else if(old<table.length){ t=table[old]+table[old].slice(0,3); table.push(t); } else{ alert("錯誤：影象資料無效"); return null; } old=code; for(var i=0;i<t.length;i+=3) result.push(parseInt(t.substr(i,3),16)) if(table.length==1<<bc&&bc<12) bc++; } return result; } //根據位元組陣列data佈局，以最少的div完成繪圖 function defLayout(data,palette,width,height,image,block,zoom){ var map=new Array(height); for(var i=0;i<height;i++){ map[i]=new Array(width); for(var j=0;j<width;j++) map[i][j]=data[i*width+j]; } var i,j,i1,i2,j1,j2,c; for(i=0;i<height;i++) for(j=0;j<width;){ if(map[i][j]==0x100){ j++; continue; } c=map[i][j]; for(i1=i+1;i1<height&&map[i1][j]==c;i1++); for(j1=j+1;j1<width;j1++){ for(i2=i;i2<i1&&map[i2][j1]==c;i2++); if(i2<i1) break; } for(i2=i;i2<i1;i2++) for(j2=j;j2<j1;j2++) map[i2][j2]=0x100; var x=block.cloneNode(true); x.style.left=j*zoom; x.style.top=i*zoom; x.style.width=(j1-j)*zoom; x.style.height=(i1-i)*zoom; x.style.backgroundColor=palette[c]; image.appendChild(x); j=j1; } } </SCRIPT>

相關推薦

JS 對圖片base64編碼字串進行解碼並輸出影象

/////////////////////////// //base64編碼的GIF影象解碼 //By Mozart0 //2005/10/29 //////////////////// //建立GIF類的物件 //類GIF在此函式內部定義 //str64：gif檔案的Base64編碼字串 //成功返回建

JAVA-從題目看演算法，將輸入字串進行排序並輸出

來看一個排列的例子，它所做的工作是將輸入的一個字串中的所有元素進行排序並輸出，例如：你給出的引數是"abc" 則程式會輸出：abc acb bac bca cab cba 這是一個典型的可用遞迴演算法來實現的例子，我們來看一下利用遞迴的2種不同解法。 1.典型遞迴元素交換

JS對URL字符串進行編碼/解碼分析

rdquo 說明 cbe 字符值 name ide 就會 aca img 雖然escape()、encodeURI()、encodeURIComponent()三種方法都能對一些影響URL完整性的特殊 字符進行過濾。但後兩者是將字符串轉換為UTF-8的方式來傳輸，解決了頁面

JavaSE8基礎 String 對字符串進行編碼 對字節數組進行解碼

utf-8 block rac news bsp 手冊 try lease pre os ：windows7 x64 jdk：jdk-8u131-windows-x64 ide：Eclipse Oxygen Release (4.7.0) code：

Go後臺對圖片base64解碼，並儲存至檔案伺服器。

單人開發移動端專案前後端，對專案中出現的一些問題做記錄。 前端使用vue，預設base64編碼上傳圖片，略過。 後臺使用go-gin框架，主要使用了路由和資料傳輸和繫結的功能 1. 後端宣告一個結構體用於接收前端資料和將資料儲存到資料庫（mangodb） 其中ImgList用於接收

java網路圖片Base64編碼解碼

編碼 /** * 線上圖片Base64編碼 * @param link 線上圖片請求地址 * @return * @throws IOException */ public static String toBase

對一個json的字串進行反編碼操作

json字串要求是"單引號"定義 $jn_city = "{'shandong':'jinan','zhejiang':'hangzhou','liaoning':'shenyang'}"; $fan_city = json_decode($jn_city,true); var_dump

java將base64編碼字串還原為圖片

web專案經常需要上傳圖片，若後臺獲取到的是base64編碼的字串，就需要將字串還原為圖片了   String src1 = request.getParameter("src1"); //從頁面獲取一個base64編碼的字串 byte[] b1 = imageBase64

Jmeter測試上傳圖片base64編碼接口

jmeter 上傳圖片 base64 接口測試 轉碼 最近遇到一個項目，接口中有需要上傳圖片的字段，它是以圖片base64編碼格式的形式傳遞的。（Base64目前主要用於HTML5、移動開發等不考慮IE6的場景中。）請求報文示例如下： 關於如何測試實現的問題： 1）如何對圖片進行編碼？2

Java圖片Base64編碼

//##########################################################//    String uploadDir = com.bstek.dorado.core.Configure.getString(  &

PHP實現將圖片base64編碼&&上傳資料庫&&顯示

  view檢視上傳程式碼->一個form表單即可: <form action="{{url('file64')}}" method="post" enctype="multipart/form-data"> {{csrf_field()}} &l

JSONP 跨域Ajax請求，利用js對獲取到的資料進行處理.

先看看獲取到的資料: 前端內容ajax 使用jsonp跨域請求方式,理解如下： JSONP本質: 利用script標籤src跨域訪問，獲得一個回撥函式，再利用回撥函式引數內容獲取返回的資料args img src   亦可以， Form src會被本地同源策略阻

[Xcode10 實際操作]九、實用進階-(18)影象人臉識別：對圖片中的人像進行面部檢測

本文將演示對圖片中的人像，進行面部檢測。 在專案導航區，開啟檢視控制器的程式碼檔案【ViewController.swift】 1 import UIKit 2 //匯入要使用的CoreImage框架 3 //該框架提供了強大和高效的圖片處理功能。 4 //用來對基於畫素的影象進行分析

圖片base64 編碼 iOS

/** * 壓縮圖片到指定檔案大小 * * @param image 目標圖片 * @param size 目標大小（最大值） * * @return 返回的圖片檔案 */ -

JavaScript讀取圖片base64編碼

HTML程式碼 <input type="file" onchange="onChange(event)"> JavaScript程式碼 function onChange(event)

圖片base64轉字串傳輸

String base64; base64 = request.getParameter("picture").replace(" ", "+"); System.out.println(base64); //Base64解碼 Base64.Deco

js image轉base64編碼

function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas

js壓縮圖片base64長度

var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var i

js對陣列或陣列物件進行排序

定義一個數組物件 var arr = [ { name: '名字4', time: '2018-07-07 12:00:00' }, { name: '名字3', time: '2018-07-05 15:35:00' },

獲取圖片 base64編碼

// 獲取圖片並編碼 byte[] data = null; try { // 建立URL