HTMLCanvasElement.toBlob() 兼容性及使用
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() 兼容性及使用的更多相关文章
- 浏览器端用JS实现创建和下载图片
问题场景 在前端很多的项目中,文件下载的需求很常见.尤其是通过JS生成文件内容,然后通过浏览器端执行下载的操作.如图片,Execl 等的导出功能.日前,项目中就遇到了这类需求,在浏览器端实现保存当前网 ...
- a 标签的download 属性在谷歌浏览器下无法下载图片,如何处理?
a 标签的download属性在下载图片文件的时候是如何的方便,可是可是谷歌浏览器不支持下载,而是下载打开新窗口预览图片.这个兼容性问题如何解决呢? 了解了一番,HTMLCanvasElement.t ...
- 使用canvas给图片添加水印, canvas转换base64,,canvas,图片,base64等转换成二进制文档流的方法,并将合成的图片上传到服务器,
一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...
- 使用HTML5的canvas做图片剪裁
前言 图片裁剪上传,不仅是一个很贴合用户体验的功能,还能够统一特定图片尺寸,优化网站排版,一箭双雕. 需求就是那么简单,在浏览器里裁剪图片并上传到服务器. 我第一个想到的方法就是,将图片和裁剪参数(x ...
- 如何用CropBox实现头像裁剪并与java后台交互
如何用CropBox实现头像裁剪并与java后台交互 参考网站:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 参考: http://blo ...
- a标签 download base64 下载 网络失败
使用html2canvas 生成尺寸较大 base64 后进行 a标签 download 下载 ,浏览器报网络失败错误 通过谷歌搜索 发现原因是 因为截取尺寸较大 导致生成base64 长度太大 ...
- Vue中使用Cropper.js裁剪图片
Cropper.js是一款很好用的图片裁剪工具,可以对图片的尺寸.宽高比进行裁剪,满足诸如裁剪头像上传.商品图片编辑之类的需求. github: https://github.com/fengyuan ...
- js实现div转图片并保存
最近工作中遇到的需求,将div转成图片并保存. 1.准备需要用到的js插件jquery-1.8.2.js,html2canvas.min.js(将div转换为canvas),bluebird.js(用 ...
- html2canvas 实现页面转图片并下载
一 前言 最近做了一个周报,从不同的数据表抓取数据,然后展示到前端页面显示.这个过程不难,让我烦恼的是:要把周报的数据导出来,然后打印,打印也必须在一张纸上.想到这里,我整理了一下思绪,我要写几个存储 ...
随机推荐
- jQuery 插件运行机制和 $冲突解决
1.jQuery.fn.extend(object) 基本插件假设我们要创建一个插件,使一组元素中的文本变为绿色.我们要做的就是添加一个名为greenify的函数, $.fn 将像其他任何jquery ...
- sublime text 2 php 语法错误检查
使用sublime text 2 编写php程序的时候,保存代码的时候,直接检查出语法错误,有利于提高效率. 1.安装sublime text 2 package menu : preferences ...
- 模拟QQ分组
package com.lixu.fenzu; import java.util.ArrayList; import java.util.HashMap; import android.app.Lis ...
- delphi中TQueue的使用问题
TQueue里存放的是指针,所要存储的内容最好建立在堆上,在pop方法之后释放掉这个空间. 实例代码: MMSQueue:= TQueue.Create; MMSQueue.Push(StrNew(P ...
- (C/C++学习笔记) 十一. 数组
十一. 数组 ● 基本概念 数组:数组是一组在内存中依次连续存放的(数组所有元素在内存中的地址是连续的).具有同一类型的数据变量所组成的集合体.其中的每个变量称为数组元素,它们属于同一种数据类型,数组 ...
- L1-015 跟奥巴马一起画方块
美国总统奥巴马不仅呼吁所有人都学习编程,甚至以身作则编写代码,成为美国历史上首位编写计算机代码的总统.2014年底,为庆祝“计算机科学教育周”正式启动,奥巴马编写了很简单的计算机代码:在屏幕上画一个正 ...
- Adaboost新理解
Adaboost有几个难点: 1.弱分类器的权重怎么理解? 误差大的弱分类器权重小,误差小的弱分类器权重大.这很好理解.在台湾大学林轩田老师的视频中,推导说,这个权值实际上貌似梯度下降,权值定义成1/ ...
- what is bitcoin
- 开源库dlib的安装与编译-CMake
前言 最近项目涉及到关于face alignment的实现,了解到目前主要的算法有ERT.SDM.LBF等,其中由于dlib开源库实现了ERT算法,效果也很不错,故开始研究dlib的使用.而使用的第一 ...
- TJU Problem 1100 Pi
注: 1. 对于double计算,一定要小心,必要时把与double计算相关的所有都变成double型. 2. for (int i = 0; i < N; i++) //N 不 ...