js通过Image和canvas获取图片的base64格式的字符串(只能接受服务器上的图片,不支持本地图片直接转化为base64,因为js没有系统io的权限,js只能操作dom)

function getBase64(url){

        //通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染

        var Img = new Image();

        var dataURL='';

        Img.src=url;

        Img.setAttribute('crossOrigin', 'anonymous');

        Img.onload=function(){ //要先确保图片完整获取到,这是个异步事件

            var canvas = document.createElement("canvas"); //创建canvas元素

            var width=Img.width; //确保canvas的尺寸和图片一样

            var height=Img.height;

            canvas.width=width;

            canvas.height=height;

            canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中

            dataURL=canvas.toDataURL('image/png'); //转换图片为dataURL

            console.log(dataURL)

        };

    }

    getBase64('http://d.hiphotos.baidu.com/image/pic/item/d833c895d143ad4b3ae286d88e025aafa50f06de.jpg')

posted @ 2018-03-20 10:31  炫冰G爱  阅读(972)  评论(0编辑  收藏  举报