JQuery
GOJs 다이어그램 이미지로 저장하기 (로컬 ,서버)
스티커
2019. 8. 2. 12:50
아래와 같이 하면 이미지파일로 떨어진다.
mycallback 에서 파일정보를 얻을수 있다.
function makeBlob() {
var blob = myDiagram.makeImageData({
background: "white"
, returnType: "blob"
, scale: 1
, callback: myCallback
});
//
}
파일 서버로 보내기
// When the blob is complete, make an anchor tag for it and use the tag to initiate a download
// Works in:
// * Chrome
// * IE11, Edge
// * Firefox
function myCallback(blob) {
//서버로 전송
$.ajax({
type: "POST",
url: "/api/diagramUpload/100",
data: blob,
processData: false,
contentType: false,
success: function (data) {
alert('저장성공');
},
error: function (message) {
alert(message);
}
});
return;
//여기서 부터는 파일을 웹브라우저에서 바로 다운받는다.
var url = window.URL.createObjectURL(blob);
var filename = "pbot.png";
var a = document.createElement("a");
a.style = "display: none";
a.href = url;
a.download = filename;
// IE 11
if (window.navigator.msSaveBlob !== undefined) {
window.navigator.msSaveBlob(blob, filename);
return;
}
document.body.appendChild(a);
requestAnimationFrame(function () {
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
});
}
ASP.NET API 에서 파일을 다운로드 하는방법
/// <summary> 프로젝트 파일을 저장 합니다.</summary>
/// <returns></returns>
[System.Web.Http.Route("api/diagramUpload/{projectId}")]
[System.Web.Http.HttpPost]
public Task diagramUploadAsync(int projectId)
{
string root = System.Web.HttpContext.Current.Server.MapPath("~/ProjectImages");
HttpRequestMessage request = this.Request;
var content = request.Content;
FileStream fileStream = null;
string pathname = string.Format(@"{0}\{1}.png", root, projectId);
try
{
fileStream = new FileStream(pathname, FileMode.Create, FileAccess.Write, FileShare.None);
return content.CopyToAsync(fileStream).ContinueWith(
(copyTask) =>
{
fileStream.Close();
});
}
catch
{
if (fileStream != null)
{
fileStream.Close();
}
throw;
}
}
끝