• toBlob 兼容性:

    在最新版chrome和firefox中能正常使用,在Safari中报错:没有这个函数

  • 规避方法:

    不使用toBlob,使用toDataURL()将file转成base64编码,然后转成blob,如果需要,可以再转成file

    以下为在vue中的写法:

                        var file = this.blobToFile(this.dataURItoBlob(this.form.headPicSrc), 'file')
this.formData.append('avatar', file)
        dataURItoBlob (dataURI) {
let arr = dataURI.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type: mime})
},
blobToFile (theBlob, fileName) {
theBlob.lastModifiedDate = new Date()
theBlob.name = fileName
return theBlob
}

HTMLCanvasElement.toBlob() 兼容性及使用的更多相关文章

  1. 浏览器端用JS实现创建和下载图片

    问题场景 在前端很多的项目中,文件下载的需求很常见.尤其是通过JS生成文件内容,然后通过浏览器端执行下载的操作.如图片,Execl 等的导出功能.日前,项目中就遇到了这类需求,在浏览器端实现保存当前网 ...

  2. a 标签的download 属性在谷歌浏览器下无法下载图片,如何处理?

    a 标签的download属性在下载图片文件的时候是如何的方便,可是可是谷歌浏览器不支持下载,而是下载打开新窗口预览图片.这个兼容性问题如何解决呢? 了解了一番,HTMLCanvasElement.t ...

  3. 使用canvas给图片添加水印, canvas转换base64,,canvas,图片,base64等转换成二进制文档流的方法,并将合成的图片上传到服务器,

    一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...

  4. 使用HTML5的canvas做图片剪裁

    前言 图片裁剪上传,不仅是一个很贴合用户体验的功能,还能够统一特定图片尺寸,优化网站排版,一箭双雕. 需求就是那么简单,在浏览器里裁剪图片并上传到服务器. 我第一个想到的方法就是,将图片和裁剪参数(x ...

  5. 如何用CropBox实现头像裁剪并与java后台交互

    如何用CropBox实现头像裁剪并与java后台交互 参考网站:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 参考: http://blo ...

  6. a标签 download base64 下载 网络失败

    使用html2canvas 生成尺寸较大 base64 后进行 a标签  download 下载 ,浏览器报网络失败错误 通过谷歌搜索 发现原因是 因为截取尺寸较大  导致生成base64 长度太大 ...

  7. Vue中使用Cropper.js裁剪图片

    Cropper.js是一款很好用的图片裁剪工具,可以对图片的尺寸.宽高比进行裁剪,满足诸如裁剪头像上传.商品图片编辑之类的需求. github: https://github.com/fengyuan ...

  8. js实现div转图片并保存

    最近工作中遇到的需求,将div转成图片并保存. 1.准备需要用到的js插件jquery-1.8.2.js,html2canvas.min.js(将div转换为canvas),bluebird.js(用 ...

  9. html2canvas 实现页面转图片并下载

    一 前言 最近做了一个周报,从不同的数据表抓取数据,然后展示到前端页面显示.这个过程不难,让我烦恼的是:要把周报的数据导出来,然后打印,打印也必须在一张纸上.想到这里,我整理了一下思绪,我要写几个存储 ...

随机推荐

  1. Android studio Suggestion: use tools:overrideLibrary=”jp.wasabeef.blurry” to force usage

    异常提示: 应用在Android Studio Build的时候,抛出了如下异常: Error:Execution failed for task ‘:app:processDebugManifest ...

  2. OC Foundation框架—字符串

    一.Foundation框架中一些常用的类 字符串型: NSString:不可变字符串 NSMutableString:可变字符串 集合型: 1) NSArray:OC不可变数组 NSMutableA ...

  3. 申请和使用github共享代码

    1.申请github帐号 https://github.com/join?source=header-home 2.创建项目 2.1 或者: 2.2 输入信息 2.3创建成功,地址及基本命令提示 3. ...

  4. 跟我一起学习ASP.NET 4.5 MVC4.0(五)

    前面几篇文章介绍了一下ASP.NET MVC中的一些基础,今天我们一起来学习一下在ASP.NET MVC中控件的封装.在页面中我们会经常使用到Html对象,来程序控件,当然这里的控件不是说ASP.NE ...

  5. java关于null的介绍及比较问题..未完待续

    非对象比较内容,用== 对象比较内容,用相应的方法比如equais. demo1

  6. U盘安装Ubuntu三步走

    需要工具: U盘.Ubuntu的ISO镜像.universal usb installer 1.下载Ubuntu (1) (2)我这里下载14.04版本 (3)我这里下载64位系统 下载后得到的是个t ...

  7. js 怎样获取div 图片等的宽度,只要值,不要px

    给你的div命名id=“abc”,js中用下面的语句就能获取到js的宽度并赋值给a a=document.all.abc.offsetWidth; 然后通过 alert(a); 就能弹出这个值来了.

  8. 获取bean的两种方式

    BeanFactory方式: 1: public void testFactory(){ ResourcePatternResolver rpt=new PathMatchingResourcePat ...

  9. CCleaner 垃圾文件清理规则 编写指南

    以下内容的英文版本来源于 CCleaner 官方论坛,仅供参考.欢迎大家编写并分享针对常用国产软件的垃圾文件清理规则!需要说明的是规则文件(Winapp2.ini)需和程序文件放于同一文件夹下,才能被 ...

  10. View的事件拦截机制浅析

    为什么要去分析view的事件 记得上周刚立的flag就是关于view的事件机制.那现在我来说说我对view的感受.关于view的事件,百度google一搜.一批又一批.但是能让人理解的少之又少.换句话 ...