我需要将我的图像转换为base64字符串,以便我可以将我的图像发送到服务器.这个有没有js文件......?否则如何转换它
我有一个基本的HTML表单,我可以从中获取一些我在Firebug中检查的信息.
我唯一的问题是我试图在将文件数据发送到服务器之前对文件数据进行base64编码,然后需要将该文件数据保存到数据库中.
<input type="file" id="fileupload" />
Run Code Online (Sandbox Code Playgroud)
在Javascript + jQuery中:
var file = $('#fileupload').attr("files")[0];
Run Code Online (Sandbox Code Playgroud)
我有一些基于可用的javascript的操作:.getAsBinary(),. getAsText(),. getAsTextURL
但是这些都没有返回可插入的可用文本,因为它们包含不可用的"字符" - 我不希望在我上传的文件中出现"回发",我需要有多个表单来定位特定对象,所以这很重要获取文件并以这种方式使用Javascript.
我应该如何获得文件,以便我可以使用一个广泛可用的Javascript base64编码器!?
这是我在的地方:
<input type="file" id="fileuploadform" />
<script type="text/javascript>
var uploadformid = 'fileuploadform';
var uploadform = document.getElementById(uploadformid);
/* method to fetch and encode specific file here based on different browsers */
</script>
Run Code Online (Sandbox Code Playgroud)
跨浏览器支持的几个问题:
var file = $j(fileUpload.toString()).attr('files')[0];
fileBody = file.getAsDataURL(); // only works in Firefox
Run Code Online (Sandbox Code Playgroud)
此外,IE不支持:
var file = $j(fileUpload.toString()).attr('files')[0];
Run Code Online (Sandbox Code Playgroud)
所以我必须替换为:
var element …Run Code Online (Sandbox Code Playgroud) 如何使用jQuery或JavaScript在上传到我的网站之前获取文件大小,图像高度和宽度?
我想使用半径边框从矩形图像创建圆形图像.
有没有简单的方法来实现这一点使用CSS而不扭曲图像并确保圆是完美的圆形.
看到失败的尝试:
.rounded-corners-2{
border-radius: 100px;
height: 150px;
width: 150px;
Run Code Online (Sandbox Code Playgroud)
这可以只在CSS中完成吗?
我在一个Web应用程序上工作,用于绘制图像.我使用CANVAS元素和javascript来绘制它,但我有一个问题:如何从用户的PC加载图像并在画布上绘制?我不想将它保存在服务器上,只在网页上保存!
这是代码的缩短版本(完整代码太长):
HTML:
Open file: <input type="file" id="fileUpload" accept="image/*" /><br />
<canvas id="canvas" onmousemove="keepLine()" onmouseup="drawLine()" onmousedown="startLine()" width="900" height="600" style="background-color:#ffffff;cursor:default;">
Please open this website on a browser with javascript and html5 support.
</canvas>
Run Code Online (Sandbox Code Playgroud)
JavaScript的:
var x = 0;
var y = 0;
var clicked = false;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.strokeStyle = "black";
context.lineCap = "round";
canvas.addEventListener('mousemove', function(e) { getMousePos(canvas, e); }, false);
takePicture.onchange = function (event) {
var files = event.target.files,
file;
if (files && files.length …Run Code Online (Sandbox Code Playgroud) javascript ×4
base64 ×2
html ×2
html5 ×2
canvas ×1
css ×1
css3 ×1
dimensions ×1
file-upload ×1
image-size ×1
jquery ×1