这里引用《HTML5 Canvas核心技术》一书中的表1-2,并稍作简化。
属性 | 描述 |
---|---|
getContext() | 返回与该Canvas元素相关的绘图对象。 |
toDataURL(type,quality) | 返回一个数据地址(dataURL),type:image/jpeg或image/png |
toBlob(callback,type,args...) | 创建一个用于表示此canvas元素图像文件的Blob,type:默认image/png,最后一个参数是介于0.0-1.0之间的值,用于表示JPEG图像的质量。 |
对于DataURL和Blob需要进一步了解:
调用,toDataURL后返回这样一串代码。dataURL是将数据按base64进行编码,并在前面声明数据类型的一种数据结构。将这个代码,直接用img src=“...”即可显示,如下图:
具体的base64编码规则可以参见阮老师的blog:http://www.ruanyifeng.com/blog/2008/06/base64.html
toBlob的使用结果如下
开始的时候,误以为该函数会返回一个Blob对象,看了文档后发现是将Blob作为参数传给回调函数。
利用iframe和Blob显示内容,结果如上图。