canvas、image src、data url、blob file conversion
//canvas.toDataURL('image/jpeg'), and convert to blob,blob is a File Object. but UC don't support
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) u8arr[n] = bstr.charCodeAt(n);
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
if (window.BlobBuilder) {
var bb = new BlobBuilder();
bb.append([u8arr]);
return bb.getBlob(mime);
} else return new Blob([u8arr], { type: mime });
}
//html image src convert to dataUrl
function imageToDataURL(url, callback, mime) {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function () {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL(mime || 'image/jpeg');
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
}
canvas、image src、data url、blob file conversion的更多相关文章
- Python+request 分模块存放接口,多接口共用参数URL、headers的抽离,添加日志打印等《三》
主要介绍内容如下: 1.分模块存放接口 2.多接口共用参数URL.headers的抽离为配置文件 3.添加日志打印 4.一个py文件运行所有所测的接口 如上介绍内容的作用: 1.分模块存放接口:方便多 ...
- H5测试点总结-UI测试、功能测试、兼容性测试、体验相关(弱网、资源、手机操作等)、安全性测试、性能测试
一.概述 1.1 什么是H5 H5 即 HTML5,是最新的 Web 端开发语言版本,现如今,大多数手机 APP 页面会用 H5 实现,包括 PC Web 站点也会用它开发实现.所以 Web 的通用测 ...
- HTML之Data URL(转)
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式, ...
- url、href、src 详解
发现自己居然没把url.href.src关系及使用搞清楚,今天就理一下.主要包括:url.src.href定义以及使用区别.顺便试下在segmentfault来一发. URL(Uniform Reso ...
- url 、src 、href 的区别
url.href.src 详解 现自己居然没把url.href.src关系及使用搞清楚,今天就理一下.主要包括:url.src.href定义以及使用区别. URL(Uniform Resource L ...
- URL、SRC、HREF知识整理
今天理一下URL.SRC.HREF定义以及使用区别. URL(Uniform Resource Locator) 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上 ...
- js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现,兼容火狐,谷歌;canvas截屏跨域问题,无音频视频流加载不显示问题
项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...
- java URL、HTTP与HTML+CSS
一.Web三大基石 1 二.API(Application Programming Interface,应用程序编程接口) 1 三.题目分析总结: 3 五.HTTP协议与寄信是类似的 6 请求报文 6 ...
- 第2章 ASP.NET MVC(URL、路由及区域)
* { font: 17px/1.5em "Microsoft YaHei" } ASPNET MVC URL.路由及区域 一.URL.路由及区域 一. 配置路由器 1. ...
随机推荐
- gradient杂谈
工作中难免遇到某些小项目中没有设计的情况,这对于PS基础薄弱的我来说非常恐怖.无奈之下,只好自己自学UI方面的知识,但对于某些能用CSS实现的背景样式等,还是尽可能地用已经掌握的知识去实现.本文主要分 ...
- bootstrap 常用类名
一. 常用类1.container居中的内容展示2.row 行内容显示3.col 列内容显示, 列必须在row 中xs 宽度小于768 ,sm宽度小于990 大于768 ,md 宽度大于990,小于 ...
- 利用IIS7 解决URL访问限制问题
网站可以通过URl直接访问一些不希望被访问的东西, 比如一些图片,js,css等等. 为了解决这个问题看了好多文章,不过毕竟我是新手菜鸟级别的,没有具体的解决方法,真心不知道怎么弄. 今天在看IIS的 ...
- mvc PagerHelper静态分页
---------------分页方法----------------- public static class PagerHelper { /// <summary> ...
- MongoDB学习笔记01
MongoDB的设计理念:能从服务器端转移到驱动程序来做的事,就尽量转移. 文档是MongoDB的核心概念.多个键及其关联的值有序的放置在一起便是文档.每种编程语言表示文档的方法不太一样. 文档的键是 ...
- 百度地图API用法(传地址)
网上找了很多都是没用的,非动态用法,最后在官网论坛才问到的 现在来一步一步教大家用 1 这是地址: http://developer.baidu.com/map/ 选择web开发 先获取密钥 ...
- COMException 依赖服务或组无法启动(0x8007042C)处理办法
问题分析:这个问题主要原因是由于服务列表中的windows management instrumentation这个服务无法启动 问题解决办法: 点击屏幕左下角:开始-运行-输入regedit 打开注 ...
- java.lang.NoClassDefFoundError: javax/xml/stream/XMLStreamException
?缺少jsr173_1.0_api.jar 包 或者jdk版本不对(包括工程和tomcat等服务器的jdk版本) 以前的一个xfire工程,今天重新导进后不能运行,修改工程的jdk版本不行,最后发现是 ...
- 32位的CPU最多只能支持最大到4GBytes的内存
和总线宽度相似的,CPU每次能够处理的数据量称为字组大小(word size), 字组大小依据CPU癿设计而有32位与64位.我们现在所称的计算机是32或64位主要是依据这个 CPU解析的字组大小而来 ...
- 解决ScrollView中嵌套ListView滚动效果冲突问题
在ScrollView中嵌套使用ListView,ListView只会显示一行到两行的数据.起初我以为是样式的问题,一直在对XML文件的样 式进行尝试性设置,但始终得不到想要的效果.后来在网上查了查, ...