js html 图片显示 canvas 压缩

最新推荐文章于 2024-05-10 10:10:22 发布
最新推荐文章于 2024-05-10 10:10:22 发布
阅读量840 收藏 1
点赞数
分类专栏： 移动开发 图片压缩 文章标签： html android webview canvas 压缩 图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28940471/article/details/75638610
版权

简单到延伸
最新需要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/*" οnchange="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/*" οnchange="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/*" οnchange="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>


多米的大大
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于canvas实现图片压缩
Justicky
12-27 524
用法： compressImg(target.files[0], 2).then(base64 =&gt; { console.log(base64) // 在这里实现压缩后的上传操作 // ... }).catch(err =&gt; { // 压缩异常 Indicator.close() _this.$toast(err) }) 详细见代码注释 /** * 图片...
canvas实现图片压缩
cuteccc的博客
11-06 449
使用H5canvas实现图片压缩 用于移动端图片上传，由于现在手机拍的照片动辄几M，如果直接上传速度慢也没有必要，这里利用H5 canvas实现图片压缩 基本原理是通过canvas渲染图片，再通过 toDataURL 方法压缩保存为base64字符串（能够编译为jpg格式的图片） // 利用canvas压缩图片，传入四个参数，分别是data:获取到的文件，w, h 要压缩的
HTML5 CANVAS 实现图片压缩和裁切
Solo23456789的博客
12-08 241
原文地址：http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/?utm_source=tuicool&utm_medium=referral 前面的话 早些时候用Node-webkit（现在叫 nw.js） 编写过一个辅助前端切图的工具，其中图片处理部分用到了gm，gm 虽然功能强大，但用于 ...
Canvas绘制图片和区域（前端使用Canvas绘制图片，并在图片上绘制区域）
weixin_65793170的博客
05-10 3153
1. 初始化Canvas画布// 获取canvas容器元素并设置宽高// 获取canvas元素并获取2D绘图上下文// 2. 初始化图片Canvas// 计算画布和图片的宽高比} else {// 设置三个canvas的宽高// 加载图片并绘制到imgCanvas上console.log("图片已加载");// 渲染已有数据// 3. 开始绘制。
使用canvas进行图片压缩(前端图片压缩核心处理)
yiguoxiaohai的博客
12-23 4412
前端如何进行图片压缩然后上传？如何通过js或ts进行压缩图片，原理是什么，canvas实现图片压缩的基本步骤，react 对图片压缩的实现，vue 对图片压缩的实现
JS HTML图片显示Canvas 压缩功能
12-29
最新需要js 文件压缩图片上传 以前没搞过，新手把学习过程分享 一.选择图片并显示 <!DOCTYPE html> <html lang=en> <head> <meta http-equiv=content-type content=text/html;charset=UTF-8>...
html5 canvas 图片压缩
01-06
总的来说，HTML5 Canvas提供了一种灵活的方式来处理和压缩图片，适配各种浏览器和设备。通过理解并运用上述技术，你可以创建一个高效且兼容性强的图片压缩解决方案，确保在微信、Chrome、Firefox等不同环境中都能...
html5使用canvas压缩图片的示例代码
09-22
HTML5的Canvas元素是网页上用于绘制图形的强大工具，它不仅可以用来绘制动态图像，还能用于处理图像数据，比如压缩图片。在这个示例中，我们关注的是如何使用Canvas来压缩图片，以便于更高效地上传到服务器。以下是...
纯 Js 结合 Canvas 实现图片压缩
最新发布
06-19
本文将深入探讨如何使用纯JavaScript结合Canvas API实现图片压缩，这是一项非常实用的技术，可以帮助我们减少图片文件大小，从而提高网页性能。 首先，我们要了解HTML5中的Canvas元素。Canvas是一个二维绘图上下文...
使用canvas压缩图片
伟深么的博客
10-29 3017
要用canvas实现前端的图片压缩，有几个步骤。 1.拿到图片元素。 2.绘制一个空白的canvas。 3.将图片绘制在canvas上。 4.将canvas转成base64。（这里调用的方法可以实现压缩，base64就可以直接放入src或者传入后端、转成别的格式传输等。） 上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie.
html5+canvas实现图片的压缩上传
热门推荐
q814908133的博客
06-23 1万+
在任何项目中，图片的上传都是很常用的功能，在html5未普及之前，人们用插件来实现这个功能，比如jquery.fileupload.js，这些插件虽然功能强大，但是总觉得挺麻烦。如果你的功能的浏览器要求是在IE10以上，那么不妨用html5的FileReader对象来实现。       FileReader对象主要用来把文件读入内存，并且读取文件中的数据。对图片上传这里用到的是该对象的readA
html canvas压缩图片
yeyuehunluhongyu的博客
07-06 624
function compress(img) { var initSize = img.src.length; var width = img.width; var height = img.height; //如果图片大于四百万像素，计算压缩比并将大小压至400万以下 var ratio; if
canvas-图片的渲染
weixin_41040445的博客
12-14 2847
<canvas width="1000" height="600" id="mycanvs"></canvas> <script> var canvas = document.querySelector("canvas"); var ctx = canvas.getContext("2d"); //创建图片 var image = new Image(); //设置图片地址 ...
HTML5 javascript修改canvas的大小
weixin_30889885的博客
11-28 352
方法1： 设定固定的值，这种方式跟在html中设定canvas的值没有什么区别： window.onload = function(){ canvas.height = 100; canvas.width = 200; } changeCanvasSize = function(){ canvas.height = 100; canv...
微信小程序 canvas画布 渲染云存储的图片
qq_37170740的博客
03-11 1295
【已解决】在云开发小程序过程种，用canvas画布 渲染云存储的图片，发现不能显示。用http带头的网络图片是可以显示的，用cloud带头的云存储图片就是不行。
canvas代替img渲染图片
weixin_30496751的博客
02-06 313
移动端用canvas代替img渲染图片，可以提高性能 var oImg = new Image(); oImg.src = url; oImg.onload = function(){ var cvs = $('#cvsIndex')[0].getContext('2d'); cvs.width = this.width; cvs.width = ...
基于Canvas实现图片的上传和渲染
weixin_52268321的博客
04-18 954
基于Canvas实现图片的上传和渲染
canvas压缩图片原理
06-11
Canvas 压缩图片的原理是使用 HTML5 中的 Canvas 元素，将图片绘制到 Canvas 中，再将 Canvas 中的图像数据转换为指定格式的图片数据。 具体步骤如下： 1. 使用 JavaScript 中的 Image 对象加载图片，创建 Canvas ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值