电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

js獲取圖片的base64編碼并壓縮

瀏覽:86日期:2024-04-10 15:17:28

獲取圖片的base64編碼

<!DOCTYPE html><html> <head> <meta charset='gbk'> <title></title> </head> <body> <input accept='image/*' name='upimage' type='file' onchange='gen_base64()'> <br/> <textarea name='Word' style=' width:820px'></textarea> <br/> <img src='http://www.hdgsjgj.cn/bcjs/14276.html' /> <script type='text/javascript'> function $_(id) { return document.getElementById(id); } function gen_base64() {var file = $_(’upload_file’).files[0];r = new FileReader(); //本地預覽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();//創建一個圖片 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); //把畫布中的數據,寫出到某img的src里 var Pic = document.getElementById('myCanvas').toDataURL('image/png'); var imgs =document.getElementById('press'); imgs.src =Pic ; }} } } </script><input type='file' name='fileId' value='上傳圖片' hidefocus='true' onchange='getUrl(this.files);'/> <br/><canvas ></canvas>old img::<img src='http://www.hdgsjgj.cn/bcjs/14276.html' alt='' />new img::<img src='http://www.hdgsjgj.cn/bcjs/14276.html' alt='' /></body></html>

效果圖

js獲取圖片的base64編碼并壓縮

以上就是js獲取圖片的base64編碼并壓縮的詳細內容,更多關于js 圖片base64編碼的資料請關注好吧啦網其它相關文章!

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 贴片电感_贴片功率电感_贴片绕线电感_深圳市百斯特电子有限公司 贴片电容代理-三星电容-村田电容-风华电容-国巨电容-深圳市昂洋科技有限公司 | 送料机_高速冲床送料机_NC伺服滚轮送料机厂家-东莞市久谐自动化设备有限公司 | 上海诺狮景观规划设计有限公司 | 磁力抛光机_磁力研磨机_磁力去毛刺机-冠古设备厂家|维修|租赁【官网】 | 电镀整流器_微弧氧化电源_高频电解电源_微弧氧化设备厂家_深圳开瑞节能 | 北京签证代办_签证办理_商务签证_旅游签证_寰球签证网 | 深圳市索富通实业有限公司-可燃气体报警器 | 可燃气体探测器 | 气体检测仪 | OLChemim试剂-ABsciex耗材-广州市自力色谱科仪有限公司 | 重庆LED显示屏_显示屏安装公司_重庆LED显示屏批发-彩光科技公司 重庆钣金加工厂家首页-专业定做监控电视墙_操作台 | 海南在线 海南一家 | 武汉天安盾电子设备有限公司 - 安盾安检,武汉安检门,武汉安检机,武汉金属探测器,武汉测温安检门,武汉X光行李安检机,武汉防爆罐,武汉车底安全检查,武汉液体探测仪,武汉安检防爆设备 | 密集架-手摇-智能-移动-价格_内蒙古档案密集架生产厂家 | 常州律师事务所_常州律所_常州律师-江苏乐天律师事务所 | 高压负荷开关-苏州雷尔沃电器有限公司 | 软启动器-上海能曼电气有限公司 真空搅拌机-行星搅拌机-双行星动力混合机-广州市番禺区源创化工设备厂 | 数控专用机床,专用机床,自动线,组合机床,动力头,自动化加工生产线,江苏海鑫机床有限公司 | 压滤机滤板_厢式_隔膜_板框压滤机滤板厂家价格型号材质-大凯环保 | 气动隔膜泵厂家-温州永嘉定远泵阀有限公司 | 防爆正压柜厂家_防爆配电箱_防爆控制箱_防爆空调_-盛通防爆 | 无锡网站建设_小程序制作_网站设计公司_无锡网络公司_网站制作 | 营养师网,营养师考试时间,报名入口—网站首页 | 成都办公室装修-办公室设计-写字楼装修设计-厂房装修-四川和信建筑装饰工程有限公司 | 湖南长沙商标注册专利申请,长沙公司注册代理记账首选美创! | 小型数控车床-数控车床厂家-双头数控车床 | 挤出熔体泵_高温熔体泵_熔体出料泵_郑州海科熔体泵有限公司 | 铁盒_铁罐_马口铁盒_马口铁罐_铁盒生产厂家-广州博新制罐 | PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | 昆明化妆培训-纹绣美甲-美容美牙培训-昆明博澜培训学校 | 集菌仪厂家_全封闭_封闭式_智能智能集菌仪厂家-上海郓曹 | CXB船用变压器-JCZ系列制动器-HH101船用铜质开关-上海永上船舶电器厂 | 贴板式电磁阀-不锈钢-气动上展式放料阀-上海弗雷西阀门有限公司 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 | 芜湖厨房设备_芜湖商用厨具_芜湖厨具设备-芜湖鑫环厨具有限公司 控显科技 - 工控一体机、工业显示器、工业平板电脑源头厂家 | 集菌仪厂家_全封闭_封闭式_智能智能集菌仪厂家-上海郓曹 | 南京试剂|化学试剂|分析试剂|实验试剂|cas号查询-专业60年试剂销售企业 | 冷轧机|两肋冷轧机|扁钢冷轧机|倒立式拉丝机|钢筋拔丝机|收线机-巩义市华瑞重工机械制造有限公司 | 二手回收公司_销毁处理公司_设备回收公司-找回收信息网 | 合肥角钢_合肥槽钢_安徽镀锌管厂家-昆瑟商贸有限公司 | 重庆磨床过滤机,重庆纸带过滤机,机床伸缩钣金,重庆机床钣金护罩-重庆达鸿兴精密机械制造有限公司 | 火锅底料批发-串串香技术培训[川禾川调官网] | 超细粉碎机|超微气流磨|气流分级机|粉体改性设备|超微粉碎设备-山东埃尔派粉碎机厂家 | 洗瓶机厂家-酒瓶玻璃瓶冲瓶机-瓶子烘干机-封口旋盖压盖打塞机_青州惠联灌装机械 |