canvas實(shí)現(xiàn)手機(jī)端用來(lái)上傳用戶頭像的代碼
更新時(shí)間：2016年10月20日 15:55:52 作者：Yokoぃ
這篇文章主要介紹了canvas實(shí)現(xiàn)手機(jī)端用來(lái)上傳用戶頭像的代碼代碼簡(jiǎn)單易懂非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
廢話不多說(shuō)了直接給大家介紹canvas實(shí)現(xiàn)手機(jī)端用來(lái)上傳用戶頭像的代碼，具體代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
label{
height:40px;
width:100px;
border:1px solid #666;
display:block;
text-align:center;
line-height:40px;
border-radius:10px;
background:lightgreen;
opacity: 1;
}
input{
display:none;
}
span{
display:block;
height:100%;
width:100%;
}
#canvas {
border:1px solid #666;
}
</style>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<label>
<input type="file" id="file" />
<span>上傳文件</span>
</label>
<canvas width="300" height="300" id="canvas"></canvas>
</body>
<script>
$("#file").change(function (){
var file = new FileReader();//讀取文件2進(jìn)制
file.onload = function(e){
var base64 = e.target.result;
var img = new Image();//創(chuàng)建一個(gè)圖片對(duì)象
img.onload = function (){
var canvas = $("#canvas").get(0);
var ctx = canvas.getContext("2d");
//使用drawImage顯示圖片
ctx.drawImage(img,0,0,canvas.width,canvas.height);
}
//把base64添加到圖片上
img.src = base64;
};
file.readAsDataURL(this.files[0]);
});
</script>
</html>
以上所述是小編給大家介紹的canvas實(shí)現(xiàn)手機(jī)端用來(lái)上傳用戶頭像的代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了JavaScript引用類型和基本類型詳解的相關(guān)資料,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了JS回調(diào)函數(shù)簡(jiǎn)單用法,結(jié)合實(shí)例形式分析了js回調(diào)函數(shù)的定義與簡(jiǎn)單使用方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
JavaScript創(chuàng)建一個(gè)object對(duì)象并操作對(duì)象屬性的用法
這篇文章主要介紹了JavaScript創(chuàng)建一個(gè)object對(duì)象并操作對(duì)象屬性的用法,實(shí)例分析了javascript使用object類定義對(duì)象及屬性的用法,需要的朋友可以參考下2015-03-03
JavaScript實(shí)現(xiàn)復(fù)制文本到剪切板功能的方法小結(jié)
這篇文章給大家介紹了三種JavaScript實(shí)現(xiàn)復(fù)制文本到剪切板的方法,Clipboard API,document.execCommand以及useClipboard這三個(gè)接口,文章通過(guò)代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
本文主要介紹了詳解ajax、fetch、axios的區(qū)別，眾所周知它們都用來(lái)發(fā)送請(qǐng)求，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
JavaScript中防抖和節(jié)流的實(shí)戰(zhàn)應(yīng)用記錄
防抖與節(jié)流都是用來(lái)限制用戶頻發(fā)觸發(fā)事件的機(jī)制,下面這篇文章主要給大家介紹了關(guān)于JavaScript中防抖和節(jié)流的實(shí)戰(zhàn)應(yīng)用,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要介紹了JavaScript中的多種對(duì)象合并方法,通過(guò)代碼的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下，希望能夠給你帶來(lái)幫助2021-08-08
小程序點(diǎn)贊收藏功能的實(shí)現(xiàn)代碼示例
這篇文章主要介紹了小程序點(diǎn)贊收藏功能的實(shí)現(xiàn)代碼示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
JS加密插件CryptoJS實(shí)現(xiàn)AES加密操作示例
這篇文章主要介紹了JS加密插件CryptoJS實(shí)現(xiàn)AES加密操作,結(jié)合實(shí)例形式分析了CryptoJS插件的具體設(shè)置與AES加密操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
小程序?qū)崿F(xiàn)按下錄音松開識(shí)別語(yǔ)音
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)按下錄音松開識(shí)別語(yǔ)音，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11