zoukankan      html  css  js  c++  java
  • 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')

  • 相关阅读:
    linux之scp
    Supervisor之浅谈
    Linux 命令之 2>&1 &
    python多线程实现异步
    python之多进程demo1
    二分查找(python)
    awk命令之小结1
    修改文件权限之chmod
    处理日期数据
    stack unstack pivot 数据的透视
  • 原文地址:https://www.cnblogs.com/xuanbingbingo/p/8607756.html
Copyright © 2011-2022 走看看