chrome用type=file获取图片路径并转base64字符串

 

 

1 html页面

<div class="col-sm-2" style="height: 200px;margin-top: 14px;">
<input id="photo" name=" " type="file" value="选择图片"  ng-model="photoUrl">
<input type="button" ng-click = "uploadPic()" value="确定" style="margin-top: 150px;margin-left: 10px;"/>
</div>

2 js里面

$scope.uploadPic = function(){
var obj = document.getElementById("photo");
console.log("13:"+obj.value)
if(obj.value){
var file = obj.files[0]

//注意此处,chrome不支持直接获取文件的绝对路径,需要把文件放到一个中间地址,然后用js获取这个中间地址的绝对路径
var windowURL = window.URL || window.webkitURL;  
   var dataURL = windowURL.createObjectURL(file); 
console.log($('#img1'))
console.log(dataURL)
 $('#img1').attr('src',dataURL)
var img = document.createElement('img');
img.src = dataURL;

以上是在中间地址放文件的逻辑
var data
img.onload =function() {

//转base64
data = getBase64Image(img);
console.log("changdu:"+data.length);

一般浏览器对提交字符串有大小限制,要限定一下,要不会报错
if(data.length<1050000){
console.log(data);
$('#img1').attr('src',data)
$scope.pic = {};
$scope.pic.idPark = idPark;
$scope.pic.picture = data;
dataParkSettingAdmin.saveOrUpdateParkPicture(idPark,$scope.pic).success(function(data) {
console.log("shangchuantupian:"+data.result);
})
}else{

app.modalWin.info({title:' ', content:'该图片不支持上传' });
}
}
}
}

以下是图片转base64字符串的函数
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/png");
return dataURL // return dataURL.replace("data:image/png;base64,", "");
}

转载于:https://www.cnblogs.com/zhaoblog/p/6534299.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/456269.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python - Django - 中间件 process_exception

process_exception(self, request, exception) 函数有两个参数&#xff0c;exception 是视图函数异常产生的 Exception 对象 process_exception 函数的执行顺序是按照 settings.py 中设置的中间件的顺序的倒序执行 process_exception 函数只在视图函数中出现异常的时候才执行…

NTV Media Server G3性能测试

Hello&#xff01;大家好&#xff0c;我是资深测试工程师Jackie&#xff0c;今天我来和大家一起对云视睿博的高性能流媒体服务器NTV Media Server G3做一次性能测试。今天测试有一个小目标&#xff0c;那就是验证在一台普通的PC机上&#xff0c;NTV Media Server G3的并发能力是…

人生不只是上坡路

从前的自己都是非常顺利的&#xff0c;觉得自己有一天一定可以成就一番事业。 可是谁也预料不到这几年的变化&#xff0c; 似乎人生就要跌落到了谷底&#xff0c; 不知道该如何去面对&#xff0c; 压力很大、惶恐不安、不知道未来的路该如何去走。 人生不只是上坡路&#xff0c…

Django 时间与时区设置问题

Django 时间与时区设置问题 在Django的配置文件settings.py中&#xff0c;有两个配置参数是跟时间与时区有关的&#xff0c;分别是TIME_ZONE和USE_TZ 如果USE_TZ设置为True时&#xff0c;Django会使用系统默认设置的时区&#xff0c;即America/Chicago&#xff0c;此时的TIME_…

Oracle+ASM单机环境下,开启归档的最简单的方法

在ASM单机环境下&#xff0c;开启归档的最简单的方法。环境&#xff1a;oracle11g 11.2.0.4 登陆sqlplus[oracleudevasm ~]$ sqlplus / as sysdbaSQL*Plus: Release 11.2.0.4.0 Production on Thu Jun 8 18:20:41 2017Copyright (c) 1982, 2013, Oracle. All rights reserved…

【Python】 配置解析ConfigParser 命令行参数解析optparser

ConfigParser ConfigParser包装了配置文件的读取和写入&#xff0c;使得python程序可以更加轻松操作配置文件了。这里的配置文件是指.ini的那种文件&#xff0c;基本格式如下 [section_a] a_key1 a_value1 a_key2 a_value2[section_b] b_key1 b_value1 b_key2 b_value2 b_k…

解决:build_attrs() takes at most 2 arguments (3 given)

1.这个原因是由于captcha版本安装太低引起的&#xff0c;所以导致register页面打开报错 2.解决办法就是安装更高级版本的captcha 解决pip install django-simple-captcha0.5.5

docker registry v2与harbor的搭建

docker的仓库 1 registry的安装 docker的仓库我们可以使用docker自带的registry,安装起来很简单&#xff0c;但是可能有点使用起来不是很方便。没有图形化。 开始安装 1 使用镜像加速器 2 curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://dc945b6d.m…

在windows下安装Redis

一、下载windows版本的Redis 由于官网上没有windows版的下载地址&#xff0c;所以需要下载windows版本的Redis有以下两个地址&#xff1a; 博主的csdn资源地址&#xff1a;http://download.csdn.net/detail/u010608551/9778240 github下载地址&#xff1a;https://github.com/M…

Django REST framework【学习内容】

快速入门 我们将创建一个简单的允许管理员用户查看和编辑系统中的用户和组的API。 项目设置 创建一个名为 tutorial 的新django项目&#xff0c;然后启动一个名为 quickstart 的新app。 # 创建项目目录 mkdir tutorial cd tutorial# 创建一个virtualenv来隔离我们本地的包依…

DotNetCore跨平台~发布脚本PowerShell的设计

回到目录 这几天对PS情有独忠&#xff0c;被它的强大功能所希引&#xff0c;它可以快速部署&#xff0c;快速发布&#xff0c;将一些连带的动作一次的完成&#xff0c;挺方便&#xff0c;类似于早期的bat文件&#xff0c;也像linux平台的bash脚本&#xff0c;但功能上&#xff…

解决: 'Cannot call `.is_valid()` as no `data=` keyword argument was ' AssertionError: Cannot call `

#注册 def add_person(request):p_name request.POST.get("p_name")p_password request.POST.get("p_password")person_data {"p_name": p_name,"p_password": p_password,}print(person_data)serializer PersonSerializer(person…

软件与程序

一、Java的起源 最初是为家用电器设计的&#xff0c;因为其特点适合于internet&#xff0c; 于是通过internet成为一种计算语言&#xff0c;一个平台&#xff0c;一个网络计算的架构。 二、Java平台分类 ①JavaSE适用于普通PC及笔记本电脑&#xff0c;为其他JAVA程序的开发和运…

Django使用n内置模块发送HTML格式的邮件

def send(request):# subject "小伙子很帅"# message "不禁夸啊"# send_mail(subject,message,"18332191389163.com",["18332191389163.com"])# return HttpResponse("ok")from django.core.mail import EmailMultiAltern…

EDM营销之如何使邮件列表更加有效

营销转化往往是营销人员专攻的必修课&#xff0c;大数据时代&#xff0c;只有真实有效的活跃用户数据&#xff0c;才能进一步促进转化。但仍然有想走捷径的企业会选择通过购买来获取用户数据&#xff0c;不仅数据质量不高&#xff0c;还会降低自身信誉等级。本次Focussend从购买…

spring用的很开心的标签(随时增加)

1Scheduled定时任务标签&#xff0c;cron用表达式&#xff0c;或者其他几种方式&#xff0c;方便不能说。使用再方法智商&#xff0c;不能设置范围域。 2PropertySource定义在整个class文件上&#xff0c;整个class中可以直接用表达式获取properties的内容。 3Value 定义在变量…

Flask-DebugToolbar的配置

该扩展为 Flask 应用程序添加了一个包含有用的调试信息的工具栏。 安装 简单地使用 pip 来安装: $ pip install flask-debugtoolbar用法 设置调试工具栏是简单的: from flask import Flask from flask_debugtoolbar import DebugToolbarExtensionapp Flask(__name__)# the…

微信第三方登录

微信第三方登录&#xff1a; 公众平台以access_token为接口调用凭据&#xff0c;来调用接口&#xff0c;所有接口的调用需要先获取access_token&#xff1b; 网页授权获取用户基本信息&#xff1a;通过该接口&#xff0c;可以获取用户的基本信息&#xff08;获取用户的OpenID是…

MVC 中Simditor上传本地图片

1.引用样式和js文件 <link href"~/Content/scripts/plugins/simditor/css/simditor.css" rel"stylesheet" /><script src"~/Content/scripts/plugins/simditor/js/simditor.js"></script> 2.初始化Simditor var editor null;…

在pycharm中自定义模板代码,快速输出固定代码块

pycharm中有时会经常输出固定一段代码,为避免每次重复输入,可以自定义一段模板代码,请看以下图教程: 1. 点击 file 里面的 setting 2. 在搜索框输入live,就会显示出Live Templates, 点击后边的加号, 点击 Live Template 3. 选择设置的语言, 点击下图的Define, 设置要设置…