1. 程式人生 > >js 基於base64轉碼上傳圖片

js 基於base64轉碼上傳圖片

function imgChange(obj1, obj2){
        var file = document.getElementById("file");
        var imgContainer = document.getElementsByClassName(obj1)[0];
        var fileList = file.files;
        var input = document.getElementsByClassName(obj2)[0];

        var imgArr = [];

        for (var i = 0; i < fileList.length; i++) {
            var file1=file.files[i];
            var reader =  new FileReader();
            var str = '';
            var img = document.createElement("img");
            var imgAdd = document.createElement("div");
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext('2d');
            img.onload = function(){
                var w = img.naturalWidth,
                    h = img.naturalHeight;
                var toSize = 400;
                canvas.width = toSize;
                canvas.height = toSize
                var w2 = toSize, h2 = toSize;
                if (w > h) {
                    h2 = h / w * toSize;
                } else {
                    w2 = w / h * toSize;
                }


                ctx.drawImage(img, 0, 0, w, h, 0, 0, w2, h2);
            }
            reader.onload = function(e) {
               
                str += '<div class="z_addImg">';
                str += '<img src="'+ e.target.result+'">';
                str += '</div>';
                imgAdd.innerHTML = str;
                imgContainer.appendChild(imgAdd);
            };
            reader.readAsDataURL(file1);
        }
        setTimeout(function () {
            imgRemove();
        },2000);
    };


    function imgRemove() {
        var imgList = document.getElementsByClassName("z_addImg");
        var mask = document.getElementsByClassName("z_mask")[0];
        var cancel = document.getElementsByClassName("z_cancel")[0];
        var sure = document.getElementsByClassName("z_sure")[0];
        for (var j = 0; j < imgList.length; j++) {
            imgList[j].index = j;
            imgList[j].onclick = function() {
                var t = this;
                mask.style.display = "block";
                cancel.onclick = function() {
                    mask.style.display = "none";
                };
                sure.onclick = function() {
                    mask.style.display = "none";
                    t.style.display = "none";
                };


            }
        };
    };

相關推薦

js 基於base64圖片

function imgChange(obj1, obj2){         var file = document.getElementById("file");         var imgContainer = document.getElementsByClas

圖片基於base64技術

1、型別宣告+base64轉碼資料 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</tit

配置好fastfds和nginx,eclipse用代圖片失敗

網卡 tel 成功 info 代碼上傳 pic telnet src 上傳 1、提示:timed out,22122 說明無法訪問22122的端口 有可能是虛擬機網卡沒開,也有可能是虛擬機22122端口未打開。 兩個都打開後還是不行。 我就想知道主機能不能訪問虛擬機的2

js前端base64解碼

我們為什麼要用base base64是網路上最常見的用於傳輸8bit位元組程式碼的編碼方式之一。有時我們需要把二進位制資料編碼為適合放在URL中的形式。這時採用base64編碼具有不可讀性,即所編碼的資料不會被人直接看出。除此之外,還可以放在請求頭,響應頭進行傳輸。

react-native-image-picker在Android閃退的解決辦法(頭像base64,壓縮圖片

問題描述:最近做專案上傳頭像時用到了react-native-image-picker第三方庫,使用的是 base64格式 上傳,在以下配置的情況下,android點選選擇相簿會遇到閃退的問題,找到了

ueditor—— 一、基於springmvc的ueditor圖片後臺配置

     這段時間專案裡需要用到富文字編輯器所以就引入了ueditor,它的功能還是很豐富的不過新手使用可能會苦於配置它的後臺上傳介面其實配置它的介面蠻簡單的,我下面簡單介紹一下     首先你需要引入ueditor,將解壓後的安裝包放入專案的webapp下其完全目錄如下

H5使用Base64和Canvas圖片

    最近在做一個班級通知的H5頁面,從拿到原型到開發出完整功能的過程中,解決了一些問題,現在記錄一下發布通知時遇到的難點和解決方法。一、呼叫手機攝像頭和手機相簿選取照片1、由於使用的是最接近原生Android的mui框架,所以最開始是準備用mui的plus來呼叫camer

原生 JSBase64

kml script one 一個 中間 示例 style 轉碼 16px JavaScript 原生提供兩個 Base64 相關的方法: btoa():任意值轉為 Base64 編碼 atob():Base64 編碼轉為原來的值 註意:這兩個方法不適合非 ASCII

優化Recorder H5錄音:可邊錄邊伺服器,支援微信提供Android IOS Hybrid App原始碼

目錄 一、Recorder H5錄音庫的特性 (1)瀏覽器支援 (2)功能支援 二、使用預覽截圖 (1)移動端H5 (2)IOS Hybrid App

js圖片base64編碼壓縮

/** * 回撥函式 * @param image_base64 */ var callback = function(image

js h5 圖片 base64 進行圖片壓縮 不失真

<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="vie

base64(簡單的get方式圖片,模擬app接收圖片

首先,我們選擇用get方式接值,所以要選取一張小一點的圖片。 將圖片放在自己的根目錄下任意位置,新建pictur.php和get_pictur.php,在目錄下建img資料夾(儲存圖片)。 在picture.php中接收圖片並且將圖片用base64加密。給一個a標籤,讓頁

js獲取input圖片裝換為base64格式圖片

file .get reader wim fileread script gen fun return <input name="upimage" id="upload_file" type="file"> <img src="/img/touxiang

js 圖片並轉為base64編碼+預覽圖片+壓縮

js 上傳圖片並轉為base64編碼+預覽圖片+壓縮 html部分 <div id="adds" class="fix"> <form id="myForm" class="clearfix left" name="myForm"> <div clas

圖片裁剪外掛(基於cropper.js的封裝)

如題,這樣的功能在開發中是非常常見的,cropper.js是一款很好的工具,網上都有詳細的介紹,這篇文章提示很多友好的API和事件cropper.js 裁剪圖片並上傳(文件翻譯+demo) cropper.js需要藉助jquery來實現,所以我這裡的樣式抄襲了

Android WebView圖片(base64)到H5(JS)

最近專案需求是H5呼叫安卓的方法選擇圖片或者開啟照相機拍照,然後傳給H5顯示圖片,最後由H5上傳到伺服器。查了一下資料,大概有以下幾種方法: 利用WebChromeClient的openFileChooser(5.0+是onShowFileChooser)

圖片base64格式後OSS-Java及建立資料夾

@Test public void testAddUploadFileInfo() throws Exception{ String str = "/9j/4AAQSkZJRgABAQEAeA

基於html5 JS實現的拍照圖片

<style> #video,#canvas {display: block;margin:1em auto;width:180px;height:180px;} #snap { display: block;margin:0 auto;width:80%;he

手機網頁版JS壓縮圖片--base64位 相容IOS和安卓

首先,我用到了一款外掛,是純JS壓縮上傳外掛,第一次用CSDN,不太會用,我把外掛所有程式碼拷貝在文章末尾。 載入JS外掛<script src="__JS__/dist/lrz.mobile.min.js"></script>

基於html5、JS實現的拍照圖片

原理:調出攝像頭,拍照儲存到畫布,將圖片URi傳送到後臺 前端程式碼(Index.cshtml): <style> #video,#canvas {display: block;margin:1em auto;width:180px;height:180px