html 在线图片压缩,JS HTML图片显示Canvas 压缩功能

简单到延伸

最新需要js 文件压缩图片上传 以前没搞过，新手把学习过程分享

一.选择图片并显示

Title

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);

}

二.使用canvas代码

Title

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() 方法清空给定矩形内的指定像素。

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);

}

}

}

三.压缩处理

Title

canvas图片

压缩图片

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转化成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});

}

四.分辨率调节尝试

Document

*{

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;

}

240x120

320x240

480x320

640x420

800x480

Your browser does not support the canvas element.

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]);

}

总结

以上所述是小编给大家介绍的JS HTML图片显示Canvas 压缩功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！