在html中如何压缩图片和制作卡片
这篇文章主要介绍“在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 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容
方法:
readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。
readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。(其中base64的方式就是由此来获得的。。)
FileReader处理事件简介
继续上面的操作,在拿到图片之后,需要将文件进行处理转化,此时
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中如何压缩图片和制作卡片”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。