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. ...
随机推荐
- MVC中的View2(转)
MVC中View是专门用来向浏览器显示结果的,它只负责把传入到View的数据展现给用户: 一,自定义view引擎:实现IViewEngine接口 namespaceSystem.Web.Mvc { p ...
- Global.asax使用1
Application_start: 1.第一个访问网站的用户会触发该方法.(针对访问的是asp.net应用程序的类,及ashx,aspx等才会触发) 2. 通常会在该方法里定义一些系统变量,如聊天室 ...
- String()与toString()区别和应用
首先,String()和toString()方法都是将其它类型的变量转换为字符串的方法.但两者存在一定的区别: x.toString(): 无法转换null和undefined: 来看下面的小例子: ...
- 跨平台渲染框架尝试 - GPU Buffer的管理(1)
buffer资源 下面来谈谈buffer的管理.buffer资源从广义上就是C语言的数组.如下图所示. 图 buffer的广义模型 在渲染管线中,无论是opengl还是dx或者其他的渲染api,都会提 ...
- android ant 最简单的打包签名,混淆方法
使用ant打包,如果脚本都是我们自己一步一步来写的话,是一个比较麻烦的东西. 关于ant,我们详细看下: ant支持 ant debug,ant release等命令,我们需要签名混淆,那么就需要an ...
- jQuery Moblile Demos学习记录Theming、Button、Icons图标,脑子真的不好使。
jQuery Moblile Demos学习记录Theming.Button.Icons图标,脑子真的不好使. 06. 二 / Jquery Mobile 前端 / 没有评论 本文来源于www.i ...
- 再谈php乱码问题
在开博不久,写了一篇关于解决php乱码问题文章,php 解决乱码的通用方法,绝大部分乱码,这篇博文都可以解决,但是也有例外. 如果有人传参数给你,你根本不知道,传给你的参数到底是什么编码,这个时候该怎 ...
- linux bugfree 安装
前段时间用了下bugzilla,请参考:linux bugzilla nginx 安装配置 详解,感觉不是很好用.下面说一下,bugfree的安装 bugfree3.0.1是用php的yii框架开发的 ...
- 闲聊之Python的数据类型 - 零基础入门学习Python005
闲聊之Python的数据类型 让编程改变世界 Change the world by program Python的数据类型 闲聊之Python的数据类型所谓闲聊,goosip,就是屁大点事可以咱聊上 ...
- SQL Server 2008空间数据应用系列六:基于SQLCRL的空间数据可编程性
原文:SQL Server 2008空间数据应用系列六:基于SQLCRL的空间数据可编程性 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft SQL Server 2008 ...