通常获取图片的base64编码都是通过input的上传file属性获取转化,但是有时候需要的是本地图片不经过上传操作,直接拿本地图片转成base64编码就不行了,input上传操作需要人为操作一下,没有认为操作拿到的只是图片路径,现在可以通过canvas的toDataURL属性来将本地图片直接转换成base64编码形式,如下方法直接可以用:

changeBase64(url) {
  var imgSrc = url; // 图片本地路劲
  var image = new Image()
  image.src = imgSrc
  image.onload = () => {
    var canvas = document.createElement("canvas")
    canvas.width = image.width
    canvas.height = image.height
    var ctx = canvas.getContext("2d")
    ctx.drawImage(image, 0, 0, image.width, image.height)
    var ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase()
    var dataUrl = canvas.toDataURL("image/" + ext)
    var base64 = JSON.parse(JSON.stringify(dataUrl)) // 这里就是转化成的编码
  }
}

本地图片转base64编码的更多相关文章

  1. JS 获取图片的base64编码

    获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  2. java编写之jpg图片与base64编码之间的转换

    /** * @author zyq * 将网络图片进行Base64位编码 * @param imgUrl * */ public static String encodeWebImageToBase6 ...

  3. 用javascript实现base64编码器以及图片的base64编码

    前面的话 base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用 ...

  4. 图片的 base64 编码

    图片的 base64 编码就是将一幅图片编码成一串字符串,使用该字符串代替图像地址.我们所看到的网页上的图片,都是需要消耗一个 http 请求下载而来的:(所有才有了 csssprites 技术< ...

  5. Base64编码 图片与base64编码互转

    package com.education.util; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import jav ...

  6. PHP将图片转base64编码以及base64图片转换为图片并保存代码

    图片转base64编码 /*图片转换为 base64格式编码*/ $img = 'uploads/01.png'; $base64_img = base64EncodeImage($img); ech ...

  7. PHP远程下载图片,微信头像存到本地,本地图片转base64

    方法一(推荐): function download_remote_pic($url){ $header = [ 'User-Agent: Mozilla/5.0 (Windows NT 6.1; W ...

  8. 图片的Base64编码

    Base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上显示的时候,可以用该字符串来代替图片的url属性. 我们可以来看一下实际的效果 Base64编码效果 在上图中,我们 ...

  9. H5 Js图片转base64编码

    <!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. C# 24点游戏求解算法

    经常跟儿子玩24点,有时候比较难算的,算一会儿,两人算不出来,就收了,当作没法算. 以我的数学能力,一般来说,算不出来的,大概率确实是算不出来的. 但是遇到比较变态的,当作算不出来是可能的,所以一直想 ...

  2. Spring Cloud Gateway简单入门,强大的微服务网关

    我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 1 简介 见名知义,Spring Cloud Gateway是用于微服务场景的网关组件,它是基于Spring WebFlu ...

  3. .NET Core/.NET5/.NET6 开源项目汇总3:工作流组件

    系列目录     [已更新最新开发文章,点击查看详细] 开源项目是众多组织与个人分享的组件或项目,作者付出的心血我们是无法体会的,所以首先大家要心存感激.尊重.请严格遵守每个项目的开源协议后再使用.尊 ...

  4. kubernetes之副本控制器(RC/RS)

    1.了解ReplicationController ReplicationController是一种kubernetes资源,可确保它的pod始终保持运行状态. 如果pod因任何原因消失(例如节点从集 ...

  5. Vsftpd虚拟用户登陆配置(Centos7)

    1 安装Vsftpd服务 # yum install vsftpd -y vsftp虚拟用户是为了保证FTP服务器的安全性,由vsftpd服务器提供的非系统用户账号, 相对于FTP的本地用户来说,虚拟 ...

  6. linux中如何添加用户并赋予root权限详解

    #adduser username 修改 /etc/sudoers 文件,找到下面一行,在root下面添加一行,如下所示: ## Allow root to run any commands anyw ...

  7. 深入浅出图神经网络 GCN代码实战

    GCN代码实战 书中5.6节的GCN代码实战做的是最经典Cora数据集上的分类,恰当又不恰当的类比Cora之于GNN就相当于MNIST之于机器学习. 有关Cora的介绍网上一搜一大把我就不赘述了,这里 ...

  8. 《手把手教你》系列技巧篇(八)-java+ selenium自动化测试-元素定位大法之By id(详细教程)

    1.简介 从这篇文章开始,要介绍web自动化核心的内容,也是最困难的部分了,就是:定位元素,并去对定位到的元素进行一系列相关的操作.想要对元素进行操作,第一步,也是最重要的一步,就是要找到这个元素,如 ...

  9. FastTunnel-内网穿透原理揭秘

    之前写了一篇关于GVP开源项目FastTunnel的一篇介绍 <FastTunnel-开源内网穿透框架>,只简单介绍了使用方法,不少伙伴对其原理表示好奇,今天画抽空了一下其内部实现原理流程 ...

  10. [转载]API网关

    1. 使用API网关统一应用入口 API网关的核心设计理念是使用一个轻量级的消息网关作为所有客户端的应用入口,并且在 API 网关层面上实现通用的非功能性需求.如下图所示:所有的服务通过 API 网关 ...