相关疑难解决方法(0)

如何使用javascript将图像转换为base64字符串

我需要将我的图像转换为base64字符串,以便我可以将我的图像发送到服务器.这个有没有js文件......?否则如何转换它

javascript base64

456
推荐指数
12
解决办法
63万
查看次数

从输入表单获取Base64编码文件数据

我有一个基本的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)

html javascript base64 file-upload

94
推荐指数
5
解决办法
24万
查看次数

如何在上传之前预览图像,获取文件大小,图像高度和宽度?

如何使用jQuery或JavaScript在上传到我的网站之前获取文件大小,图像高度和宽度?

html javascript jquery dimensions image-size

93
推荐指数
3
解决办法
17万
查看次数

仅使用CSS在矩形图像上的圆角

我想使用半径边框从矩形图像创建圆形图像.

有没有简单的方法来实现这一点使用CSS而不扭曲图像并确保圆是完美的圆形.

看到失败的尝试:

http://jsfiddle.net/v8g3y0na/

.rounded-corners-2{
    border-radius: 100px;
    height: 150px;
    width: 150px;
Run Code Online (Sandbox Code Playgroud)

这可以只在CSS中完成吗?

css html5 css3

23
推荐指数
4
解决办法
5万
查看次数

javascript:上传图片文件并将其绘制到画布中

我在一个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 html5 canvas image-uploading

16
推荐指数
2
解决办法
2万
查看次数