canvas压缩图片上传,
在做一些活动页面的时候，往往会有一些上传图片的要求，也需要生成图片的卡片，生成的文字和地图，供用户按下保存。这个要求以前完成过一次，最近又满足了一次，都是用canvas实现的。简单地发布一个博客。如果有更好的实现方法，请大家一起讨论。
使用canvas压缩图片
在html中使用write input标签。类型为文件时，可以调出手机相册选择照片，也可以支持相机拍照。在这种情况下，图片的大小可能会更大，可能会超出后端支持的最大范围，导致上传失败。
Input= file type= file 1。首先，获取图片文件。
var eleFile=document . query selector( # file )；var reader=new file reader()elefile . addevent listener( change ，function(event){ file=event . target . files[0]；Console.log(file) //所选文件为图片if(file . type . index of( image )==0){ reader . readasdataurl(file)；} });2.这个时候我拿到了图片文件，所以不得不了解一下js中FileReader对象的使用。
FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容。
方法：
方法参数描述abort none中断读取readAsBinaryString文件二进制代码readAsDataURL文件将文件读取为数据URL readasextfile，[编码]将文件读取为文本。
ReadAsText:这个方法有两个参数，第二个参数是文本的编码方法。默认值是UTF-8。这个方法很好理解。将文件作为文本读取，读取的结果就是这个文本文件中的内容。ReadAsBinaryString:该方法将文件作为二进制字符串读取。通常我们发送到后端，后端可以通过这个字符串存储文件。ReadAsData URL:这是示例程序中使用的方法。该方法将文件作为以data:开头的字符串读取，该字符串的本质是数据URL。DataURL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图片和html格式的文件。(base64的方式就是由此得出的。)FileReader处理事件简介
描述onabort文件中断时触发的OnError onabort事件。当成功读取文件时，无论成功与否，都会触发onloadend读取完成触发器。onloadstart在read开始时触发onprogress read。
继续上述操作。得到图片后，需要对文件进行处理和转换。此时此刻
var reader=new FileReader()；//将文件以Data URL的形式读入页面reader . readas data URL(file)；reader . onload=function(e){ console . log(reader)}现在图片已经拍摄转换好了，现在可以压缩了。
var eleFile=document。查询选择器(“# file”)；var reader=new file reader()elefile。addevent侦听器( change ，function(event){ file=event。目标。文件[0]；//console.log(文件)//选择的文件是图片如果(文件。类型。的索引( image )==0){ var reader=new FileReader()；//将文件以数据统一资源定位器形式读入页面reader.readAsDataURL(文件);读者。onload=function(e){//控制台。日志(这个。结果)var pre=document。getelementbyid( pre )；pre.setAttribute(src ，this。结果)canvasDataURL(这个。result，100，0.5)} })/*[canvasDataURL通过帆布进行压缩] * @params路径图片的base64的格式* @params targetWidth压缩后图片的宽度* @params质量图片质量质量值越小，所绘制出的图像越模糊*/function canvasDataURL(path，targetWidth，quality){ var img=new Image()；img。src=路径img。onload=function(){//var=this//console。log(that)//默认按比例压缩var w=this。宽度var h=this。高度比例=w/h；w=目标宽度h=目标宽度/标度变量质量=质量；//默认图片质量为0.7 //生成canvas var canvas=文档。createelement(“canvas”)；var CTX=画布。获取上下文(“2d”)；//创建属性节点var anw=文档。创建属性(“宽度”)；anw。nodevalue=w；var Anh=文档。创建属性(“高度”)；安。nodevalue=h；画布。setattributenode(anw)；画布。setattributenode(Anh)；ctx.drawImage(this，0，0，w，h)；//质量值越小，所绘制出的图像越模糊var base64=画布。toda taurl( image/JPEG ，质量)；var结果=文档。getelementbyid(“结果”)；result.setAttribute(src ，base64) } }很简单，这样就可以得到压缩后的图片了，从以上的代码可得知，原理在于帆布中的今天陶尔方法可指定图片压缩后的格式及压缩质量，把帆布信息压缩并转为base64编码来实现压缩。
使用canvas制作卡片
场景：把刚刚压缩之后的图片与另一张图片相结合，可长按进行保存。
函数绘制画布(目标){ var canvas=document。查询选择器(“#我的画布”)var CTX=画布。获取上下文( 2d )//是设备上物理像素和设备独立像素（与设备无关的像素(蘸))的比例var DP=窗口。devicepixelrratio 1 var backingstorereratio=CTX。webkitbackingstorepixelrratio CTX。mozbackingstorepixelrratio CTX。CTX。obackingstorepixelrratio 1 var ratio=this。DP/这个。backingstorepixelrratio var旧宽度=画布。宽度改变旧高度。宽度=画布。宽度=旧宽度*画布比例。高度=旧宽度*比例画布。高度=旧高度*比例画布。风格./BG。png 标题img。onload=(e)={//图片的宽高比var rate=标题img。宽度/页眉图像。高度控制台。对数(比率)bgi mg。onload=(e)={ CTX。绘制图像(header img，10，30，50，(50/rate)) //背景图片ctx.drawImage(bgImg，0，0，150，150) ctx.fillText(厉害啊，80，70)var结果img=new Image()结果img。src=画布。toda aurl( Image/png ，1)结果img。风格。width= 100% var卡img=document。getelementbyid(卡片img )；cardImg.setAttribute(src ，resultImg.src) } }取到刚刚得到的图片，在图像装载完毕时后将其画到画布上，也可以配上文字等等，最后也是把帆布的信息转为base64编码来进行实现。可以通过代码来进行实例的实践
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。