<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p>Upload File: <input id="fileId" type="file" name="file" /></p>
<canvas id="canvas">Your Broswer don't support html5 canvas</canvas>
<hr>
測試base64圖片:<br>
<img alt="" id="img_test" src="">
<script>
$(document).ready(function(){
$("#fileId").change(function(){
var file = this.files[0];
var url = webkitURL.createObjectURL(file);//獲取文件的url
var $img = new Image();
$img.onload = function() {
//生成比例
var width = $img.width,
height = $img.height,
scale = width / height;
// width = parseInt(800);
// width = parseInt(width);
height = parseInt(width / scale);
//生成canvas
var $canvas = $('#canvas');
// alert($canvas[0]);
var ctx = $canvas[0].getContext('2d');
$canvas.attr({width : width, height : height});
ctx.drawImage($img, 0, 0, width, height);
var base64 = $canvas[0].toDataURL('image/jpeg',0.3);//壓縮過的base64編碼形式圖片
// png 會放大圖片體積，jpeg 會縮小體積
// alert(base64);
// alert(base64.length);//獲取字符串比FileReader的短
var img_test = $("#img_test");
img_test.attr("src",base64);
}
$img.src = url;//指定Image的路徑（$img.src="common/imgs/add-97617_640.png"）
});
});
</script>
</body>
</html>
canvas圖片體積壓縮
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
JavaScript 音頻插件和圖表插件
howler音頻插件 配置項及事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s
JavaScript中的window對象
window對象：每一個該對象代表一個瀏覽器窗口 1.常用方法如下 open("要打開的頁面文件名","打開窗口在操作系統中的名稱(任何名稱都可以)", "toolbar=?,menubar=?,