//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的更多相关文章

  1. Python+request 分模块存放接口,多接口共用参数URL、headers的抽离,添加日志打印等《三》

    主要介绍内容如下: 1.分模块存放接口 2.多接口共用参数URL.headers的抽离为配置文件 3.添加日志打印 4.一个py文件运行所有所测的接口 如上介绍内容的作用: 1.分模块存放接口:方便多 ...

  2. H5测试点总结-UI测试、功能测试、兼容性测试、体验相关(弱网、资源、手机操作等)、安全性测试、性能测试

    一.概述 1.1 什么是H5 H5 即 HTML5,是最新的 Web 端开发语言版本,现如今,大多数手机 APP 页面会用 H5 实现,包括 PC Web 站点也会用它开发实现.所以 Web 的通用测 ...

  3. HTML之Data URL(转)

    Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式, ...

  4. url、href、src 详解

    发现自己居然没把url.href.src关系及使用搞清楚,今天就理一下.主要包括:url.src.href定义以及使用区别.顺便试下在segmentfault来一发. URL(Uniform Reso ...

  5. url 、src 、href 的区别

    url.href.src 详解 现自己居然没把url.href.src关系及使用搞清楚,今天就理一下.主要包括:url.src.href定义以及使用区别. URL(Uniform Resource L ...

  6. URL、SRC、HREF知识整理

    今天理一下URL.SRC.HREF定义以及使用区别. URL(Uniform Resource Locator) 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上 ...

  7. js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现,兼容火狐,谷歌;canvas截屏跨域问题,无音频视频流加载不显示问题

    项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...

  8. java URL、HTTP与HTML+CSS

    一.Web三大基石 1 二.API(Application Programming Interface,应用程序编程接口) 1 三.题目分析总结: 3 五.HTTP协议与寄信是类似的 6 请求报文 6 ...

  9. 第2章 ASP.NET MVC(URL、路由及区域)

    * { font: 17px/1.5em "Microsoft YaHei" } ASPNET MVC URL.路由及区域 一.URL.路由及区域 一.      配置路由器 1. ...

随机推荐

  1. [Python][自己写的杀病毒脚本]

    电脑里的HTML都插入了一段VB病毒代码..只能自己手动清除了..发现Python确实好用 import os import re; Root = ["H:"]; for root ...

  2. javascript 多图无缝切换

    思路只要是ul移动前,首先将当前显示的li克隆岛ul最后,当每次运动执行完毕后,再将前面的li删除,如此循环. <!DOCTYPE html> <html> <head& ...

  3. 爆出错误:The Geometry has no Z values

    ArcGis添加地图标注,爆出错误:The Geometry has no Z values 解决方法如下: public bool AddFeature( ESRI.ArcGIS.Geometry. ...

  4. event和window.event

    type:事件的类型,如onlick中的click:srcElement/target:事件源,就是发生事件的元素:button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下 ...

  5. MySQL用户管理语句001

    总的来说mysql的用户管理方法可以分为如下两种: 1.直接对mysql.user 表进行[insert | update | delete] + flush privileges 这种方式主要针对那 ...

  6. SPOJDIVCNT2: Counting Divisors(莫比乌斯反演)

    http://acm.tzc.edu.cn/acmhome/vProblemList.do?method=problemdetail&oj=SPOJ&pid=DIVCNT2 给出n求 ...

  7. 感觉tbceditor很不错,如果作者能坚持下来,非常非常看好啊

    感觉tbceditor很不错,如果作者能坚持下来,非常非常看好啊 你技术好,可以做个自用的IDE慢慢加功能 ,很方便的用这个控件,写个支持Delphi和html混编的编辑器,要不到2个小时

  8. javascript之Number

    一.构造函数 Number(value) new Number(value) 二.Number属性 1.Number.MAX_VALUE 返回能表示的最大数字. 2.Number.MIN_VALUE ...

  9. Regex类

    一.属性 CacheSize 获取或设置已编译的正则表达式的当前静态缓存中的最大项数. 默认是15个,最近使用的15个会存在缓存中,避免重新创建.当有第16个进来会替换掉第  1个.保持15个.Opt ...

  10. ISBN-10和ISBN-13有什么区别?

    ISBN扩升至13位 1. 现有ISBN的结构 国际标准书号ISBN是英文International Standard Book Number的缩写,1971年国际标准化组织ISO(Internati ...