canvas实现图片编辑,支持canvas的浏览器
前言：项目中需要实现图片下载功能，第一个想到的是使用a标签的下载属性来实现，但是在不同浏览器下测试会发现，有的浏览器无效，点击后直接预览图片，所以，上网找到了另外一种兼容不同浏览器的图片下载的方法，那就是利用帆布来处理图片，实现下载；
1.项目中点击事件绑定：
a href= # @ click。prevent= download diamage(img src，name)span{{name}}/span/a2 .点击事件中操作：
下载iamage(img src，name){ const URL=img src this。converturltobabase 64(URL).然后((base64)={ const blob=this。转换base 64 urltoblo(base64)if(get browser()=== IE get browser()=== Edge ){ window。领航员。mssave blob(blob，name)} else { const a=document。createelement( a )const body=document。查询选择器( body )a . download=name image a . href=URL。创建对象URL(blob)a . style。display= none 正文。追加childURL。revokeobjecturl(a . href)} }，3。这个。converturltobabase 64(URL)就是利用帆布和今天陶尔把图片转成base64格式并返回
converturltobase 64(URL){ return new Promise((resolve，reject)={ const img=new Image()img。交叉起源=匿名 img。onload=function(){ const canvas=文档。createelement(“canvas”)画布。width=img.width画布。身高=img。高度常数CTX=画布。获取上下文( 2d )CTX。绘制图像(img，0，0，img。宽度，img。高度)const ext=img。SRG) 1)。toLowerCase()常量数据URL=canvas。toda taurl( image/ ext)const base64={ dataURL:data URL，type: image/ ext，ext: ext } resolve(base64) } }，其中：img.crossOrigin=Anonymous 是前端对图片的跨域处理；
4 .这个。将base 64 urltoblob转换为base 64是将图片base64流文件转成一滴文件
转换base 64 urltoblob(base64){ const parts=base64。数据URL。split( base64，)const contentType=parts[0].split(:)[1]const raw=window。atob(parts[1])const rawLength=raw。length const uint 8 array=new uint 8 array(rawLength)让I=0；我罗伦思；I){ uint 8 array[I]=raw。charcode at(I)} return new Blob([uint 8 array]，{ type: contentType }) }，5.getBrowser()用来判断浏览器，解决浏览器兼容性问题：
从@/utils/utils 导入{ getBrowser }导出函数get browser(){ const user agent=navigator。用户代理if(用户代理。的索引( OPR )-1){返回 Opera } if(用户代理。的索引( Firefox )-1){ return FF } if(用户代理。的索引( Trident )-1){ return IE } if(用户代理。( Edge )-1){返回 Edge } if(用户代理)的索引。索引( Chrome))-1如果是工业管理学(工业工程)或者边缘浏览器，可以直接使用窗户。领航员。mssavelob(blob，name)完成下载；
声明：由于ios系统有安全性限制，以上方法在ios上无效；
以上就是记录项目中用到的图片下载，浏览器兼容的问题，涉及到的base64和一滴的知识点和原理还不是很清晰，有时间一定要研究一下，整个方法，亲测有效；欢迎测用，与意见反馈。也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。