在html中如何压缩图片和制作卡片

2024-10-27 技术教程

这篇文章主要介绍“在html中如何压缩图片和制作卡片”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“在html中如何压缩图片和制作卡片”文章能帮助大家解决问题。

使用canvas压缩图片

在 html 中使用写入input标签，type为file时候，可以调出手机的相册可供选择照片，也可以支持摄像头进行拍照功能。在这个场景下，就可能出现图片的体积会更大，可能会超出后端所支持的最大范围，从而导致上传失败。

<inputid="file"type="file">

1.首先要先获取到图片文件

vareleFile=document.querySelector('#file');varreader=newFileReader()eleFile.addEventListener('change',function(event){file=event.target.files[0];console.log(file)//选择的文件是图片if(file.type.indexOf("image")==0){reader.readAsDataURL(file);}});

2.这个时候就取到了图片文件，就不得不了解一下js中FileReader对象的使用了

FileReader对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容

方法：

方法名参数描述abortnone中断读取readAsBinaryStringfile二进制码readAsDataURLfile将文件读取为 DataURLreadAsTextfile, [encoding]将文件读取为文本

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。

readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。

readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。（其中base64的方式就是由此来获得的。。）

FileReader处理事件简介

事件描述onabort中断时触发onerroronabortonload文件读取成功完成时触发onloadend读取完成触发，无论成功或失败onloadstart读取开始时触发onprogress读取中

继续上面的操作，在拿到图片之后，需要将文件进行处理转化，此时

varreader=newFileReader();//将文件以DataURL形式读入页面reader.readAsDataURL(file);reader.onload=function(e){console.log(reader)}

现在取到了图片也进行了转化，现在可以进行压缩了。

vareleFile=document.querySelector('#file');varreader=newFileReader()eleFile.addEventListener('change',function(event){file=event.target.files[0];//console.log(file)//选择的文件是图片if(file.type.indexOf("image")==0){varreader=newFileReader();//将文件以DataURL形式读入页面reader.readAsDataURL(file);reader.onload=function(e){//console.log(this.result)varpre=document.getElementById("pre");pre.setAttribute("src",this.result)canvasDataURL(this.result,100,0.5)}}})/*[canvasDataURL通过canvas进行压缩]*@paramspath图片的base64的格式*@paramstargetWidth压缩后图片的宽度*@paramsquality图片质量quality值越小，所绘制出的图像越模糊*/functioncanvasDataURL(path,targetWidth,quality){varimg=newImage();img.src=pathimg.onload=function(){//varthat=this//console.log(that)//默认按比例压缩varw=this.widthvarh=this.heightscale=w/h;w=targetWidthh=targetWidth/scalevarquality=quality;//默认图片质量为0.7//生成canvasvarcanvas=document.createElement('canvas');varctx=canvas.getContext('2d');//创建属性节点varanw=document.createAttribute("width");anw.nodeValue=w;varanh=document.createAttribute("height");anh.nodeValue=h;canvas.setAttributeNode(anw);canvas.setAttributeNode(anh);ctx.drawImage(this,0,0,w,h);//quality值越小，所绘制出的图像越模糊varbase64=canvas.toDataURL('image/jpeg',quality);varresult=document.getElementById("result");result.setAttribute("src",base64)}}

很简单，这样就可以得到压缩后的图片了，从以上的代码可得知，原理在于canvas 中的 toDataURL 方法可指定图片压缩后的格式及压缩质量，把 canvas 信息压缩并转为 base64 编码来实现压缩。

使用canvas制作卡片

场景：把刚刚压缩之后的图片与另一张图片相结合，可长按进行保存。

functiondrawCanvas(target){varcanvas=document.querySelector('#myCanvas')varctx=canvas.getContext('2d')//是设备上物理像素和设备独立像素(device-independentpixels(dips))的比例vardp=window.devicePixelRatio||1varbackingStoreRatio=ctx.webkitBackingStorePixelRatio||ctx.mozBackingStorePixelRatio||ctx.msBackingStorePixelRatio||ctx.oBackingStorePixelRatio||ctx.backingStorePixelRatio||1varratio=this.dp/this.backingStoreRatiovaroldWidth=canvas.widthvaroldHeight=canvas.heightcanvas.width=oldWidth*ratiocanvas.height=oldHeight*ratiocanvas.style.width=oldWidth+'px'canvas.style.height=oldHeight+'px'ctx.scale(ratio,ratio)varheaderImg=newImage()varbgImg=newImage()headerImg.src=targetbgImg.src='../bg.png'headerImg.onload=(e)=>{//图片的宽高比varrate=headerImg.width/headerImg.heightconsole.log(rate)bgImg.onload=(e)=>{ctx.drawImage(headerImg,10,30,50,(50/rate))//背景图片ctx.drawImage(bgImg,0,0,150,150)ctx.fillText('厉害啊',80,70)varresultImg=newImage()resultImg.src=canvas.toDataURL('image/png',1)resultImg.style.width='100%'varcardImg=document.getElementById("cardImg");cardImg.setAttribute("src",resultImg.src)}}

取到刚刚得到的图片，在图像装载完毕时后将其画到画布上，也可以配上文字等等，最后也是把canvas的信息转为base64编码来进行实现。

关于“在html中如何压缩图片和制作卡片”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。