博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js通过Image和canvas获取图片的base64格式的字符串(只能接受服务器上的图片,不支持本地图片直接转化为base64,因为js没有系统io的权限,js只能操作dom)...
阅读量:6958 次
发布时间:2019-06-27

本文共 649 字,大约阅读时间需要 2 分钟。

function getBase64(url){

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

        var Img = new Image();

        var dataURL='';

        Img.src=url;

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

        Img.οnlοad=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('')

转载于:https://www.cnblogs.com/xuanbingbingo/p/8607756.html

你可能感兴趣的文章
leetcode:Reverse Linked List
查看>>
C++ 模板特化
查看>>
gulp完全开发指南 => 快来换掉你的Grunt吧
查看>>
sicily 1151 魔板
查看>>
Numerical Analysis
查看>>
linux下的apache服务自启动的几种方式
查看>>
php将数据写入另外一个文件
查看>>
20181113-2 每周例行报告
查看>>
16.Python网络爬虫之Scrapy框架(CrawlSpider)
查看>>
开发人员linux命令总结
查看>>
递归求简单交错幂级数的部分和
查看>>
TYVJ 1016 装箱问题 by C++
查看>>
小组冲刺第九天
查看>>
JS原型和原型链
查看>>
全面理解Java内存模型
查看>>
小程序知识总结-分享
查看>>
HTML列表
查看>>
判断字符串a和b是否互为旋转词
查看>>
锁消除
查看>>
Android开发之炫酷MD风格
查看>>