商业源码 通过js保存图片到本地中遇到的跨域问题
<html>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<head>
<script>
windowonload = function() {
draw();
var saveButton = documentgetElementById("saveImageBtn");
bindButtonEvent(saveButton, "click", saveImageInfo);
var dlButton = documentgetElementById("downloadImageBtn");
bindButtonEvent(dlButton, "click", saveAsLocalImage);
};
function draw(){
var canvas = documentgetElementById("thecanvas");
var ctx = canvasgetContext("2d");
ctxfillStyle = "rgba(125, 46, 138, 05)";
ctxfillRect(25,25,100,100);
ctxfillStyle = "rgba( 0, 146, 38, 05)";
ctxfillRect(58, 74, 125, 100);
ctxfillStyle = "rgba( 0, 0, 0, 1)"; // black color
ctxfillText("Gloomyfish - Demo", 50, 50);
}
function bindButtonEvent(element, type, handler)
{
if(elementaddEventListener) {
elementaddEventListener(type, handler, false);
} else {
elementattachEvent('on'+type, handler);
}
}
function saveImageInfo ()
{
var mycanvas = documentgetElementById("thecanvas");
var image = mycanvastoDataURL("image/png");
var w=windowopen('about:blank','image from canvas');
wdocumentwrite("<img src='"+image+"' alt='from canvas'/>");
}
function saveAsLocalImage () {
var myCanvas = documentgetElementById("thecanvas");
// here is the most important part because if you dont replace you will get a DOM 18 exception
// var image = myCanvastoDataURL("image/png")replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobarpng");
var image = myCanvastoDataURL("image/png")replace("image/png", "image/octet-stream");
windowlocationhref=image; // it will save locally
}
</script>
</head>
<body bgcolor="#E6E6FA">
<div>
<canvas width=200 height=200 id="thecanvas"></canvas>
<button id="saveImageBtn">Save Image</button>
<button id="downloadImageBtn">Download Image</button>
</div>
</body>
</html>
好像这个可以 不错 你试一试吧 把下载下来的文件 重命名 为 格式 就可以预览啦
1、先准备一个json文件。
2、使用vscode创建一个html文件。
3、开始撰写js方法，使用原生javascript来处理，先处理读取json文件，之后运行这个html。
4、得到的json就是我们indexjson文件中的内容。
5、为了便于查看我们json文件的内容显示在html网页中。
javascript在浏览器本地和与服务器通讯方面都有优异的表现。
使用javascript对本地文件进行操作实际上是有一点技术后退的感觉。毕竟桌面应用程序微软的、java的已经相当成熟了。不过用 javascript做点小程序来处理本地事务，在没有java或者MFC开发环境的时候还是很方便的。
闲话少说，入正题：
1先上代码：
//读文件
var fso, f1, ts;
var ForReading = 1;
fso = new ActiveXObject("ScriptingFileSystemObject");
ts = fsoOpenTextFile(documentallattachFilevalue/此处为含全部路径的文件名/, ForReading);
documentallmailbdyvalue=tsReadAll();
tsClose();
//写文件
var title = documentgetElementById("title")value;//文件名
var fso=new ActiveXObject("ScriptingFileSystemObject");
var f=fsoCreateTextFile("C://"+title+"nc",true); //可随意选择后缀名
fwrite(documentgetElementById("babala")value);
fClose();
很简单吧，这就是基本过程，从文件中读取到数据以后就可以进行相关操作了。
2由于安全性原因ActiveXObject对象在firefox中无法使用。因此想要在firefox中完成类似的功能就需要采取别的方法 了。（怎么做，现在我也不知道，嘻嘻）
3选择输入文件。可以使用<input type="file" name="attachFile"> 来获取包含路径的文件名。
4我使用了<textarea>来进行文件的显示和修改。在保存的时候。也可以使用window的saveAs命令。不过在保存窗口 内容的时候，因为存在/n和<br />的转换问题，因此在保存文件时可能会导致格式错误。不过用ActiveXObject保存内容可以不用考虑该问题。
5javascript的字符串类提供的方法可以很方便的编写字符串处理程序。另外在处理字符到数字的转换时，可以使用praseInt（） 和parseFloat（）方法。
javascript操作教程：http://edu51ctocom/course/course_id-1886html
0条评论