通常获取图片的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. Servlet--核心内容汇总

    Servlet汇总 因为看公司代码,有个cookie+jwt.Token登录验证接口,于是回顾下servlet.cookie.session.前后端分离restful.jwt.token相关内容.虽然 ...

  2. 2021年Wordpress博客装修美化(二)

    使用古腾堡来排版页面 废话不多说,我们直接开始吧,今天主要来聊聊如何使用Wordpress自带的可视化页面编辑器.我相信只有驾驭最基础的可视化排版,后面才能对高级版本的扩展可视化编辑器elemento ...

  3. PowerMockito的一些注意事项

    PowerMockito的一些注意事项 目录 PowerMockito的一些注意事项 1 注解@PowerMockIgnore({"javax.crypto.*"}) 2 Powe ...

  4. 技术实践:教你用Python搭建gRPC服务

    摘要:gRPC是一个高性能.通用的开源RPC框架,其由Google主要面向移动应用开发并基于HTTP/2协议标准而设计,基于ProtoBuf序列化协议开发,且支持众多开发语言. 本文分享自华为云社区& ...

  5. BGP路由技术

    BGP路由技术 目录 一.BGP概述 1.1.自治系统 1.2.动态路由分类 1.3.BGP概念 1.4.BGP的特征 1.5.BGP工作原理 二.命令配置 2.1.BGP配置思路 2.2.命令 一. ...

  6. C# 实现复制Excel内容到DataGridview中

    业务要求:复制:将Excel内容复制到datagridview中 最终效果:复制Excel内容,点击datagridview中的某个单元格,顺着这个单元格自动填充自动增加行.偷懒了,没写填充在选择哪些 ...

  7. 如何管理MongoDB的用户和权限

    管理用户的创建及使用 创建用户的函数是db.createUser({...}),创建用户时通常需要为该用户添加权限,如read.readWrite权限. 可添加的权限以及说明: 权限 作用 read ...

  8. Mweb发布blog到各博客平台

    Mweb发布blog到各博客平台 主流博客平台 博客平台 博客园 CSDN 51CTO 博客类型 MetaWeblog API MetaWeblog API MetaWeblog API 博客网址 h ...

  9. Jquery Validate动态添加和删除校验规则

    以下面文本框为例, <input type="text"name="username" id="username"/> 我们要让 ...

  10. Python实现 利用朴素贝叶斯模型(NBC)进行问句意图分类

    目录 朴素贝叶斯分类(NBC) 程序简介 分类流程 字典(dict)构造:用于jieba分词和槽值替换 数据集构建 代码分析 另外:点击右下角魔法阵上的[显示目录],可以导航~~ 朴素贝叶斯分类(NB ...