JS HTML圖片顯示Canvas 壓縮功能
更新時間：2017年07月21日 14:28:26 作者：多米的大大
最新需要js 文件壓縮圖片上傳 以前沒搞過，新手把學(xué)習(xí)過程分享，對JS HTML圖片顯示Canvas 壓縮功能感興趣的朋友一起看看吧
簡單到延伸
最新需要js 文件壓縮圖片上傳 以前沒搞過，新手把學(xué)習(xí)過程分享
一.選擇圖片并顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Title</title>
</head>
<body>
<input id="imginput" type="file" accept="image/*" onchange="showImg(this)">
<div id="img1">
<canvas class="convas01"></canvas>
</div>
</body>
<script>
window.URL=window.URL||window.webkitURL;
var divimg1 = document.getElementById("img1");
function showImg(obj){
var files = obj.files;
var img = new Image();
img.width = 100;
if(window.URL){
img.src = window.URL.createObjectURL(files[0]);
}else{
//opera不支持createObjectURL/revokeObjectURL方法。需要用FileReader對象來處理
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = function(e){
img.src = this.result;
img.width = 200;
img.id="img01";
divimg1.appendChild(img);
}
}
img.id="img01";
divimg1.appendChild(img);
}
</script>
</html>
二.使用canvas代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Title</title>
</head>
<body>
<input id="imginput" type="file" accept="image/*" onchange="showImg(this)">
<div id="img1">
<canvas id="convas01"></canvas>
</div>
</body>
<script>
window.URL=window.URL||window.webkitURL;
var divimg1 = document.getElementById("img1");
var convas = document.getElementById("convas01");
var ht = convas01.getContext("2d");
convas.width = 200;
convas.height = 200;
function showImg(obj){
var files = obj.files;
var img = new Image();
img.width = 200;
if(window.URL){
img.src = window.URL.createObjectURL(files[0]);
img.onload = function(e){
window.URL.revokeObjectURL(this.src);//方便引用無效回收
ht.clearRect(0, 0, convas.width, convas.width);//clearRect() 方法清空給定矩形內(nèi)的指定像素。
ht.drawImage(img,0,0,convas.width,convas.height);
convas.toDataURL("image/png");
}
}else{
//opera不支持createObjectURL/revokeObjectURL方法。需要用FileReader對象來處理
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = function(){
img.src = this.result;
img.width = 200;
img.id="img01";
divimg1.appendChild(img);
}
}
}
</script>
</html>
三.壓縮處理
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Title</title>
</head>
<body>
<input id="imginput" type="file" accept="image/*" onchange="showImg(this)">
<div id="img1">
canvas圖片
<canvas id="convas01"></canvas>
</div>
<div id="img2">
壓縮圖片
</div>
</body>
<script>
window.URL=window.URL||window.webkitURL;
var divimg1 = document.getElementById("img1");
var divimg2 = document.getElementById("img2");
var convas = document.getElementById("convas01");
var ht = convas01.getContext("2d");
convas.width = 200;
convas.height = 200;
function showImg(obj){
var files = obj.files;
var img = new Image();
img.width = 200;
if(window.URL){
img.src = window.URL.createObjectURL(files[0]);
img.onload = function(e){
window.URL.revokeObjectURL(this.src);//方便引用無效回收
ht.drawImage(img,0,0,convas01.width,convas01.height);
var imgdata = convas.toDataURL("image/png");
//將canvas轉(zhuǎn)化成Blob對象
var imgobj = new Image();
var blob =dataURLtoBlob(imgdata);
var url = window.URL.createObjectURL(blob);
imgobj.onload = function(e){
window.URL.revokeObjectURL(this.src);
}
imgobj.src= url;
divimg2.appendChild(imgobj);
}
}else{
//opera不支持createObjectURL/revokeObjectURL方法。需要用FileReader對象來處理
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = function(){
img.src = this.result;
img.width = 200;
img.id="img01";
divimg1.appendChild(img);
}
}
}
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
</script>
</html>
四.分辨率調(diào)節(jié)嘗試
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;padding:0;
}
body{
width:100%;height:100%;background:black;
}
canvas{
width:800px;height:480px;outline:1px solid pink;position:absolute;
left:0;top:0;right:0;bottom:0;margin:auto;
}
</style>
</head>
<body>
<button>240x120</button>
<button>320x240</button>
<button>480x320</button>
<button>640x420</button>
<button>800x480</button>
<canvas id="canvasId" width="480" height="320">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById('canvasId');
var context = canvas.getContext('2d');
var btns = document.getElementsByTagName('button');
var resolution = [
[240, 120],
[320, 240],
[480, 320],
[640, 420],
[800, 480]
];
//canvas分辨率
var resolutionW = canvas.getAttribute('width');
var resolutionH = canvas.getAttribute('height');
//canvas大小
var sizeW = canvas.offsetWidth;
var sizeH = canvas.offsetHeight;
console.log(resolutionW);
console.log(resolutionH);
console.log(sizeW);
console.log(sizeH);
var img = new Image();
img.src = "http://img5.niutuku.com/phone/1301/0920/0920-niutuku.com-483082.jpg"; //這張圖片像素為800x480
img.onload = function() {
draw(3);
for (var i = 0; i < btns.length; i++) {
(function(i) {
btns[i].onclick = function() {
draw(i);
}
})(i);
}
}
function draw(i) {
canvas.setAttribute('width', resolution[i][0]);
canvas.setAttribute('height', resolution[i][1]);
context.clearRect(0, 0, sizeW, sizeH);
context.drawImage(img, 0, 0, sizeW, sizeH, 0, 0, resolution[i][0], resolution[i][1]);
}
</script>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的JS HTML圖片顯示Canvas 壓縮功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- js canvas實現(xiàn)5張圖片合成一張圖片
- js canvas實現(xiàn)二維碼和圖片合成的海報
- JavaScript+Canvas實現(xiàn)彩色圖片轉(zhuǎn)換成黑白圖片的方法分析
- JS和Canvas實現(xiàn)圖片的預(yù)覽壓縮和上傳功能
- js HTML5 canvas繪制圖片的方法
- js實現(xiàn)canvas圖片與img圖片的相互轉(zhuǎn)換的示例
- js canvas實現(xiàn)放大鏡查看圖片功能
- js+html5繪制圖片到canvas的方法
- javascript結(jié)合canvas實現(xiàn)圖片旋轉(zhuǎn)效果
- 使用JavaScript+canvas實現(xiàn)圖片裁剪
- js+canvas實現(xiàn)兩張圖片合并成一張圖片的方法
相關(guān)文章
這篇文章主要為大家總結(jié)了Bootstrap Table使用心得,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了如何利用JavaScript實現(xiàn)簡單的蜘蛛俠動作游戲，文中的示例代碼講解詳細，對我們學(xué)習(xí)JavaScript游戲開發(fā)有一定的幫助，需要的可以參考一下2022-06-06
indexOf()?方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置，這篇文章主要介紹了js?indexOf?的正確用法,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了微信小程序傳值以及獲取值方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Bootstrap基本插件學(xué)習(xí)筆記之Tooltip提示工具(18)
這篇文章主要為大家詳細介紹了Bootstrap基本插件學(xué)習(xí)筆記之oltip提示工具的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
uniapp常用路由跳轉(zhuǎn)的幾種方式(navigateTo、redirectTo...)
uni-app有兩種方式進行路由跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于uniapp常用路由跳轉(zhuǎn)的幾種方式(navigateTo、redirectTo...),文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
消滅星星是一款經(jīng)典的益智手游,單位里看到同事天天在手機上玩的游戲，現(xiàn)在也有web版了,出于業(yè)余愛好，自己嘗試用javascript實現(xiàn)了下，就是略簡單了點，文中給出了完整的實例代碼，大家可以自行完善??！下面來一起看看吧。2016-11-11
這篇文章主要介紹了微信小程序判斷頁面是否從其他頁面返回的實例代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07
網(wǎng)上找的，經(jīng)我整理添加demo如下2009-06-06
AJAX異步從優(yōu)酷專輯中采集所有視頻及信息（JavaScript代碼）
上次寫了一個 .NET從優(yōu)酷專輯中采集所有視頻及信息（VB.NET代碼）2010-11-11