canvas的toDataURL方法

  • 内容
  • 评论
  • 相关

前一阵搞了一个微信活动,共享男女友,时间紧任务重,记得当时是周三提的需求,那就抓紧搞起来,后来会有一个生成图片的功能,遇到了一些坎,下面分析下技术点,用到的就是canvas的toDataURL()方法,可是生成图片的时候,需要取微信授权后的用户头像和昵称,调试了一番头像的图片总是概率性的不显示出来,郁闷5秒钟,后来改成了服务端生成图片,虽然解决了问题,但是总感觉用toDataURL()方法没有问题,今天有时间再整理和巩固下这个语法的内容,当时这个项目是用vue搞的,顺便把vue的常用功能也深入的应用了一下。

toDataURL语法

canvas.toDataURL(type, encoderOptions);

参数
type 可选
图片格式,默认为image/png
encoderOptions 可选
图片质量。取值范围为0到1。如果指定图片格式为image/jpeg或image/webp。如果超出取值范围,将会使用默认值0.92。其他参数会被忽略。

返回值
包含dataURI的DOMString。
DataURI格式:data:[<mediatype>][;base64],<data>。其中mediatype声明了文件类型,遵循MIME规则,如“image/png”、“text/plain”;之后是编码类型,这里我们只涉及 base64;紧接着就是文件编码后的内容了。

在这儿我随便介绍下URI和URL。
URI(Uniform Resource Identifier):统一资源标识符,服务器资源名被称为统一资源标识符。比如:

img src="images/image.png"/

URL(Uniform Resource Locator):统一资源定位符,描述了一台特定服务器上某资源的特定位置。比如:

img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAWCAYAAAArdgcFAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAAsTAAALEwEAmpwYAAABSUlEQVQ4Ee1VPUsDQRB9s3dBRCRNQvCjkDQW/hJ/gb9AOwWDoIXFgYXYXGP+hYW1/gIr7WzsE8VGxZBcwt04dznCJWw2twtWutXMmzdvlrd7t4SZVbvi1ZihZuCFqT9A/B7Qd5FI44RpPcQpE1oC1IsEq5jRBeGyc0zXaV8mvhbyOREurIRMZMZhp0VthYB9mXBi4jrUztIev1bNbKg6CMxvIWwg5GWVDOHNZ7lX6l/wrG+Fzbh/ca1bf9QWBhKtHznobgtjKF92ZBL3TUWpRbK7LhiVCY8kY3xK/iTiexNcEywSXxKBrfHvrdBN2JRsp4BoQ3dbtHLT4K+JqxWw8vr4YDaf+vR+SmXRWw99lT9N96VaypIYtwgoyWyJRtiX3T+X7TXxROcxGeAo5chlyNcBVxrb2JVpTUHsz4IQi/DL6wPucENxqvoDx69PXP8OKn4AAAAASUVORK5CYII="/

需要注意的是在转换成dataURI前必须先确保图片成功加载到,于是.toDataURL()方法应该写在<img>的onload异步事件中。

function getBase64(url, callback){
    //通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染
    var Img = new Image(),
        dataURL='';
    Img.src=url;
    Img.onload=function(){ //要先确保图片完整获取到,这是个异步事件
        var canvas = document.createElement("canvas"), //创建canvas元素
            width=Img.width, //确保canvas的尺寸和图片一样
            height=Img.height;
        canvas.width=width;
        canvas.height=height;
        canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
        dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL
        callback?callback(dataURL):null; //调用回调函数
    };
}

在执行时添加回调:

getBase64('http://www.topfe.cn/wp-content/cache/Beginning/thumbnail/4dacbe492d7a-170x120.jpg',(dataURL)=>{
    console.log(dataURL);
});

参考:http://www.jianshu.com/p/17d7e5ddf10a

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注