JS HTML图片显示Canvas 压缩功能

2024-10-01 16:32:01

简单到延伸

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

一.选择图片并显示

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

四.分辨率调节尝试

<!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>

总结

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

Js利用Canvas实现图片压缩功能

最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢.为此,需要对图片进行压缩处理来优化上传功能.以下是具体实现: /* * 图片压缩 * img 原始图片 * width 压缩后的宽度 * height 压缩后的高度 * ratio 压缩比率 */ function compress(img, width, height, ratio) { var canvas, ctx, img64; canvas = document.createElement
JS图片压缩（pc端和移动端都适用）

最近在做移动端遇到了一个问题就是:手机拍照后,图片过大如果上传到服务器务必会浪费带宽,最重要的是流量啊别慌,好事儿来了,务必就会有人去研究研究图片的压缩: 鄙人结合前人的经验,结合自己实战,总结出一个方法供大家参考: /** * 图片压缩,默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径 * @param {Object} obj * obj 对象有 width, height, qualit
JS HTML图片显示Canvas 压缩功能

简单到延伸最新需要js 文件压缩图片上传以前没搞过,新手把学习过程分享一.选择图片并显示 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Title</title> </head>
js实现图片显示局部，鼠标经过显示全部的效果

这个是例如了CSS的margin负值和相对定位做的一个图片放大的效果.图片开始只是局部的,鼠标放上去显示整个图片. 无标题文档 body{ font-size:12px; } ul,li,ol{ margin:0; padding:0; list-style:none; } .box{ margin:100px; clear:both; border:1px solid #000; } .box ul li{ list-style:none; float:left; width:60px; he
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片

最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候的想法是如果给file表单加了 multiple 属性就没有办法调用手机的摄像头拍照了,如果不加,就无法同时选择多张图片,于是我就照实跟同事说了这个情况.但回头一想,单张图片可以上传,那多张图片呢?于是就有了本文的内容. HTML5定义了 FileReader 作为文件 API 的重要成员用于读取文
vue.js 实现图片本地预览裁剪压缩上传功能

以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还是用上了 flash,第二篇来解释解释. 代码结构 <div id="wrap"> <label> 点我上传图片 <input type='file' @change="change" ref="input"> &
JS实现控制图片显示大小的方法【图片等比例缩放功能】

本文实例讲述了JS实现控制图片显示大小的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea
javascript实现移动端 HTML5 图片上传预览和压缩功能示例

本文实例讲述了javascript实现移动端 HTML5 图片上传预览和压缩功能.分享给大家供大家参考,具体如下: 在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个API file 和 FileList 对象 file对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个 input 元素上选择文件后
node.js（express）中使用Jcrop进行图片剪切上传功能

需求说明简单来说就是要实现用户上传头像,并且要保存用户裁切后的部分作为用户头像. 第一步,选择图片: 第二步,在弹窗页面中展现并进行裁切: 第三步,点击"保存",上传服务器. 实现过程说来有点坎坷,相当于做了2遍,走了弯路. 第1遍是用户一选择图片,就进行了上传,然后返回一个地址,所以在弹层上展现的图片已经是服务器上的图片了,然后进行裁切,再保存. 第2遍找到的一个方法,是在第1遍做到裁切处理时候想到的,即弹层展现的是用户机器上选择的图片,不用先上传,但是用image/base64
微信小程序实现图片压缩功能

小龙大哥的微信小程序在初始阶段相当于IE界的6,在这里给大家说一个刚趟过去的坑. 拍照的API. wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,temp
JS中图片压缩的方法小结

首先想一想我们有哪些需求?大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器:有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库:有时候后它还有可能是一块canvas画布,或者是一个Image对象,或者直接就是一个图片的url地址,我们需要将它们压缩上传到远程:面对这么多的需求,王二索性画了一张图: Alt text 二.解决办法如上图所示,王二一共写了七个方法,基本覆盖了JS中大部分文件类型的转换与压缩,其中: 1. url

JS HTML图片显示Canvas 压缩功能

相关推荐

随机推荐