標籤：
<!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 type="text/javascript" src="js/jquery-3.1.1.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進位file.onload = function(e) {var base64 = e.target.result;var img = new Image(); //建立一個圖片對象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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
