js工具函数之将网络图片url地址转换为base64格式_一键写代码的博客-程序员ITS301

技术标签: JavaScript  

1、封装工具函数,将url地址,转换为base64格式输出

      function getBase64(url, callback) {
    
        //通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染
        var Img = new Image(),
          dataURL = '';
        Img.src = url +"?v=" + Math.random(); // 处理缓存,fix缓存bug,有缓存,浏览器会报错;
        Img.setAttribute("crossOrigin", 'Anonymous') // 解决控制台跨域报错的问题
        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://p1.pstatp.com/large/435d000085555bd8de10', (dataURL) => {
     console.log(dataURL) })

2、在上面的基础上,封装promise版本

    getBase64(url) {
    
      return new Promise((resolve, reject) => {
    
        var Img = new Image()
        var dataURL = ''
        Img.setAttribute('crossOrigin', 'Anonymous')
        Img.src = url + '?v=' + Math.random()
        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/jpeg') // 转换图片为dataURL
          resolve(dataURL)
        }
      })
    }

封装调用函数

    async baseCallback(url) {
    
      try {
    
        console.log('执行')
        const res = await this.getBase64(url)
        console.log(res) // 获取到结果
        this.bgcImgUrl = res // 我这里将结果赋值给需要用的变量属性
      } catch (err) {
    
        console.log(err)
      }
    }

补充说明:转换为base64格式的时候,也可以选择转换为png格式的。
dataURL = canvas.toDataURL('image/png')这种就可以支持背景透明度了。有时候会有用。

参考链接:
知识点https://www.jb51.net/article/128554.htm

报错解决https://blog.csdn.net/hangge0111/article/details/81585841

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42991509/article/details/100925856

智能推荐

HRBUST2048 Thrall’s Dream 题解报告_weixin_30662849的博客-程序员ITS301

题目传送门【题目大意】令人绝望的超长英文体面……然而实际上题意很简单给出$n$个点和$m$条有向边,判断这个图是否连通,连通的定义是对于任意两个点$x,y$,满足有路径从$x$到$y$或有路径从$y$到$x$。【思路分析】这题还是很简单的啦,连好边之后从每个点出发$dfs$一遍,如果连通就记录,最后判断一下就行了,复杂度$O(N)$。【代码实现】 1...

【腾讯Bugly干货分享】动态链接库加载原理及HotFix方案介绍_weixin_34117522的博客-程序员ITS301

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57bec...作者:陈昱全引言随着项目中动态链接库越来越多,我们也遇到了很多奇怪的问题,比如只在某一种 OS 上会出现的 java.lang.UnsatisfiedLinkError,但是明明我们动态库名称没错,A...

提取应用的签名和包名_SpikeKing的博客-程序员ITS301_提取系统自带应用的签名

欢迎Follow我的GitHub, 关注我的CSDN, 未经授权, 禁止转载.Android应用在使用第三方的库时, 可能需要申请密钥, 表明应用身份, 如高德定位SDK等. 应用签名(printcert)是公开的, 只要下载到Apk包, 就可以公开提取. 签名中包含MD5, SHA1, SHA256. 应用唯一性就是表现为签名+包名, 就像人的指纹一样重要, 是确定应用属性的重要信息, 也是应用

Linux /dev目录详解和Linux系统各个目录的作用_没钱的笨小孩的博客-程序员ITS301

Linux /dev目录详解    在linux下,/dev目录是很重要的,各种设备都在下面。下面简单总结一下:  dev是设备(device)的英文缩写。/dev这个目录对所有的用户都十分重要。因为在这个目录中包含了所有Linux系统中使用的外部设备。但是这里并不是放的外部设备的驱动程序,这一点和windows,dos操作系统不一样。它实际上是一个访问这些外部设备的端口。我们可以非常

机器视觉学习笔记(6)——双目摄像机标定参数说明_moverzp的博客-程序员ITS301_双目相机标定参数

机器视觉学习笔记(6)——双目摄像机标定参数说明标签: 机器视觉阅读本文之前请先阅读以下两篇博文: 机器视觉学习笔记(4)——单目摄像机标定参数说明 机器视觉学习笔记(5)——基于OpenCV的单目摄像机标定1.双目摄像机需要标定的参数双目摄像机需要标定的参数有摄像机内参数矩阵,畸变系数矩阵,本征矩阵,基础矩阵,旋转矩阵以及平移矩阵其中摄像机内参数矩阵和畸变系数矩阵可以通过单目标定的方法标定

揭秘String类型背后的故事——带你领略汇编语言魅力_我反正啥都不会的博客-程序员ITS301_汇编中string是什么意思

字符串或串(String)是由数字、字母、下划线组成的一串字符。一般记为 s=“a1a2···an”(n&gt;=0)。它是编程语言中表示文本的数据类型。在程序设计中,字符串(string)为符号或数值的一个连续序列,如符号串(一串字符)或二进制数字串(一串二进制数字)。String类型你一定不陌生,毕竟每一位coder都是从var str1 = “Hello World”过来的。但它真的就只...

随便推点

ubuntu16.04上使用IntelRealSenseD435i_pitbulll的博客-程序员ITS301

昨天D435i到货了,研究了一晚上加整整一个上午才安装好,本来还寄希望于店家能提供安装的方法,没想到,它并没有。。。 别人的方法我不太懂,有什么ROS环境与非ROS环境,我只记记录一下我自己的踩坑过程吧,为了以后能够不踩坑。。。 首先,我在https://github.com/IntelRealSense/librealsense/blob/development/doc/dis...

a 标签 onclick 事件_你猜我猜你猜不猜的博客-程序员ITS301_a标签onclick 执行ts代码

在web页面开发时,我们经常会遇到下列情况:1.一个标签仅仅是要触发onclick行为;2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果。比如执行删除操作时,为了避免误操作,我们要弹出对话框让用户确定是否删除。因此我们经常会用链接形式代替 触发onclick事件。代码如下:      function del(){           if(co

maven联通网络不能访问中央仓库_weixin_30758821的博客-程序员ITS301

我在cmd中执行:D:\java\maven\repository&gt;mvn archetype:create -DgroupId=com.ocean.maven -DartifactId=simple -DarchetypeArtifactId=maven-archetype-quickstart报错信息如下:D:\java\maven\repository&gt;mvn ...

Part3---HBase更新删除表,使用dbeaver结合Phoenix操作_Gadaite的博客-程序员ITS301_dbeaver清空表数据

更新Hbase的数据:01.数据准备​ 先查看原始Hbase里面的数据情况hbase(main):012:0&gt; scan "Gadaite"ROW COLUMN+CELL 001 column=F1:F11, timestamp=1649858571999, value=F1.F11 001

Qt之自定义搜索框_十年之少的博客-程序员ITS301

转自http://blog.csdn.net/liang19890820/article/details/50357523简述关于搜索框,大家都经常接触。例如:浏览器搜索、Windows资源管理器搜索等。当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定。 方案一:调用QLineEdit现有接口 void addAction(QAction * act...

sequelize 连接2个数据库_Koa入门(二)—— Koa使用Sequelize连接数据库_陈柏龄的博客-程序员ITS301

Koa使用Sequelize连接数据库使用的基础目录结构:Koa入门(一)—— Koa项目基础框架搭建基础表:CREATE TABLE `t_user` (`id` int(11) NOT NULL AUTO_INCREMENT,`phone` varchar(20) NOT NULL COMMENT '手机号',`password` varchar(64) NOT NULL COMMENT '密...

推荐文章

热门文章

相关标签