Just nu i M3-nätverket
Gå till innehåll
sundrik

Spara bild på server efter client-side resize?

Rekommendera Poster

sundrik

Hejsan =)

 

Mitt mål är att man skall kunna lägga upp bilder på serverna via sidan. Har lyckats få till några gratis koder som gör detta.

 

Problemet har varit att dom har använt flash, som inte fungerar på mobiler. Och dom jag hittat som har upload utan flash inte kan göra om storleken på bilderna.

 

Det var då jag hitta denna:

http://davidwalsh.name/resize-image-canvas

 

Kod som gör om storleken på bilden på client-side. Vilket också fungerar i mobilen. 

 

Men nu är mitt problem hur jag skall kunna spara den omgjorda bilden på servern.

 

Skulle det gå att lägga in den omgjorda bilden i en input file på någotvis?

 

Har kört fast helt. Jätte tacksam för svar =)

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
.M

 

 

document.getElementById("canvas").toDataURL("image/png")

Denna funktion kommer returnera en base64 encodad sträng med bilden i. Den kan du lägga in i en input type hidden till exempel. Sen på servern så tar du emot strängen gör en base64 decode och får då en byte-array som innehåller bilden. Den kan du sedan spara ned.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
sundrik

Nu kanske jag är helt ute och cyklar.

 

Försökte få fram den strängen för att dubbelkolla att den finns där.

 

Så jag gjorde så här:

<script type="text/javascript">
function popResult()
{
var base64Data=document.getElementById("canvas").toDataURL("image/png");
document.getElementById("result").value=base64Data;
}
</script>

Och gjorde en form:

<form>
<input id="width" type="hidden" value="320" />
<input id="height" type="hidden" />
<input id="file" type="file"/>
<input type='button' value='submit' onclick="popResult()">
<input type="text" id="result">
</form>
  
<br /><span id="message"></span><br />
<div id="img"></div>

Efter att jag fått in en bild skalad och allt på sidan så trycker jag på knappen för att försöka få in strängen i input texten. Men det går inte.

 

 

Sen förstod jag inte riktigt hur jag kan spara filen på servern. Har hittat kod som skall kunna decoda base64. Men hur det blir en fil förstår jag inte.

Fortsätter googla på det.

 

Men gärna om du kan förklara varför jag inte får in strängen i input texten?

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
sundrik

hej igen.

 

Jag har hittat hur det skulle gå att föra in den som fil på servern.

 

Det är ju en liten bit på vägen, även om jag inte får det att fungera just nu.

 

Detta är koden jag har för att kunna spara på servern:

Function Base64Data2Stream(sData)
    Set Base64Data2Stream = Server.CreateObject("Adodb.Stream")
        Base64Data2Stream.Type = 1 'adTypeBinary
        Base64Data2Stream.Open
    With Server.CreateObject("MSXML2.DomDocument.6.0").createElement("b64")
        .dataType = "bin.base64"
        .text = sData
        Base64Data2Stream.Write .nodeTypedValue 'write bytes of decoded base64 to stream
        Base64Data2Stream.Position = 0
    End With
End Function

Dim CanvasStream
Set CanvasStream = Base64Data2Stream(Request.Form("imageData"))

'Write binary to Response Stream
'Response.BinaryWrite CanvasStream.Read

'Write binary to File
CanvasStream.SaveToFile Server.Mappath("imgFileFromCanvas.png"), 2 'adSaveCreateOverWrite

Får detta felmeddelande:

Körningsfel i Microsoft VBScript error '800a01c2'

Fel antal argument eller felaktig egenskapstilldelning.: 'Base64Data2Stream.Write'

 

 

På rad:

Base64Data2Stream.Write .nodeTypedValue 'write bytes of decoded

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
sundrik

I mitt felsökande så försöker jag fånga formulärets data och skriva ut det. Men "imageData" är tom.

 

Gör jag fel när jag försöker sätta value på input-hidden?

<script type="text/javascript">
function popForm()
{
var document.getElementById("imageData").value=document.getElementById("canvas").toDataURL("image/png");

}
</script>
    <div>
	<form method='POST' action='?what=saveFile' onsubmit="popForm()">
	<input name="width" id="width" type="hidden" value="600" />
	<input name="height" id="height" type="hidden" />
	<input name="imageData" id="imageData" type="hidden" value="" />
	<input name="file" id="file" type="file"/>
	<input type='submit' value='submit' onclick="popResult()">
	<input type="text" id="result">
	</form>


IF Request("what") = "saveFile" THEN
response.write Request.Form("imageData")&" - Image<br>"
response.write Request.Form("width")&" - width<br>"
END IF

Widthen får jag ut, men inget ur "imageData"

 

Tips är väldigt välkommet =)

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
.M

Av någon anledning så fungerar inte toDataURL för dig. Som du nämnde tidigare så fick du tomt när du körde den. Vilken browser använder du? Kanske så att funktionen inte är implementerad i den browser du använder?

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
sundrik

Av någon anledning så fungerar inte toDataURL för dig. Som du nämnde tidigare så fick du tomt när du körde den. Vilken browser använder du? Kanske så att funktionen inte är implementerad i den browser du använder?

 

Jag använder Chrome version 29. finns inga uppdaterinag tillgängliga.

Försökte även i IE 10 nu. får inte ut något ur imageData trots det.

 

Väldigt märkligt.

 

Kan det vara för att jag har filen som samplar om i en include?

<script src="includes/javascript/resample.js"></script>

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
sundrik

 

 

Kan det vara för att jag har filen som samplar om i en include?

<script src="includes/javascript/resample.js"></script>

Nope.

La in den javascripten i samma fil, och det gjorde ingen skillnad.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
sundrik

Känner faktiskt att jag håller på att bli aningen tokig just nu..

 

Jag borde väl ändå kunna skriva ut strängen ifrån .toDataURL. Jag får ju upp bilden på sidan och den är ändrad i storlek.

 

Så logiskt sett borde jag kunna haffa strängen och skicka den i en input hidden? Eller bara skriva ut den på sidan så jag kan se att jag fått tag i den på något vis...

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
sundrik

Nu har jag fått lite liv i sakerna.. men ytterst lite.

 

Jag lyckade lägga in något i input hidden. Även i en input text för att se så något hamnar där.

// retrieve the canvas content as
// base4 encoded PNG image
// and pass the result to the callback
onresample(canvas.toDataURL("image/png"));
document.getElementById("imageData").value = onresample(canvas.toDataURL("image/png"));

Men det som hamnar där är "undefined".

 

Så jag kom inte så långt alls... *tunnhårig*

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
sundrik

wiiiihooo...

Nu får jag ut en sträng som ser ut som så här: data:image/png;base64,iVBORw0KGgoAA......

 

Nu är det kvar att kunna omvandla och spara den på servern.

 

Tips på hur jag kan börja?

 

Den koden jag postade ovan fungerar inte alls.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
.M

Jag tror det fungerar så här.

 

data: innebär att det är en data-url.

image/png berättar vad det är för typ av bild. I det här fallet png.

base64 berättar att bilden är base64 encoded.

Sen TROR jag att det som kommer efter kommatecknet är själva bilden. Så du får göra lite strängmanipulation på din serversida där du plockar ut det som står efter kommatecknet och använder det i din Base64Data2Stream.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
sundrik

Jag tror det fungerar så här.

 

data: innebär att det är en data-url.

image/png berättar vad det är för typ av bild. I det här fallet png.

base64 berättar att bilden är base64 encoded.

Sen TROR jag att det som kommer efter kommatecknet är själva bilden. Så du får göra lite strängmanipulation på din serversida där du plockar ut det som står efter kommatecknet och använder det i din Base64Data2Stream.

 

Du slog huvudet på spiken. Tog ut endast det som stod efter kommat, så fungerar det.

 

Självklart går man på nästa nit.

 

Så länge jag gör bilderna väldigt små, så går det att föra in dom. Men direkt när dom blir lite större, typ över ca 150kb. Så får jag felmeddelande. 

 

Detta meddelandet: Request object error 'ASP 0104 : 80004005'

 

Jag googlad och förstod att det är längden på strängen som blir för lång mot vad servern tillåter.

 

Finns det något annat sätt att föra över en sådan lång sträng utan att få problem?

 

Kanske via någon ajax lösning. Men där kanske det också är sträng limit?

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
.M

Gör du en post eller en get i ditt formulär? Get och querystring kan inte ta emot mer än 1024 bytes i har jag för mig.

 

En post borde kunna ta emot betydligt mer.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
sundrik

Jo, kör ju post och request.form..

 

Men att göra en ajax är väl uingefär som att göra en get. För datan går väl genom urlen med ajax?

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
.M

Hmmm. Nästan alla exempel jag hittar använder jQuery för att posta bilden.

$.ajax({
type: 'POST',
url: 'CanvasSave.aspx/UploadImage',
data: '{ "imageData" : "' + image + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
                 success: function (msg) {
                      alert('Image saved successfully !');
                 }

Och för att ändra storleken på tillåtna request så måste du ändra inställning i web servern.

 

http://stackoverflow.com/questions/9466081/how-to-increase-request-accept-limit-for-asp-classic

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
sundrik

Jag hittade denna kodsnutt. Men fattar inte hur jag skall kunna anropa så den körs. Är jätte dålig på javascript.

<script type="text/javascript">
var dataURL = document.getElementById("result");    
dataURL = dataURL.replace('data:image/png;base64,', '');

var areturn = $.ajax({
  url: "includes/save_image.asp",
  type: "POST",
  data: '{ "imageData" : "' + dataURL + '" }',
  dataType: "json",
  beforeSend: function(x) {
      x.overrideMimeType("application/j-son;charset=UTF-8");
  }
}).done(function(result) {
    console.log("Success Done!\n" + result);
}).always(function(data) {
    console.log("Always:\n" + data.responseText);
}); 
</script>

 Och i save_image.asp ser koden ut:

<%
Function Base64Data2Stream(sData)
    Set Base64Data2Stream = Server.CreateObject("Adodb.Stream")
        Base64Data2Stream.Type = 1 'adTypeBinary
        Base64Data2Stream.Open
    With Server.CreateObject("MSXML2.DomDocument.6.0").createElement("b64")
        .dataType = "bin.base64"
        .text = sData
        Base64Data2Stream.Write .nodeTypedValue 'write bytes of decoded base64 to stream
        Base64Data2Stream.Position = 0
    End With
End Function

Dim CanvasStream
Set CanvasStream = Base64Data2Stream(Request.Form("imageData"))

'Write binary to Response Stream
'Response.BinaryWrite CanvasStream.Read

'Write binary to File
CanvasStream.SaveToFile Server.Mappath("imgFileFromCanvas.png"), 2 'adSaveCreateOverWrite
%>

Så försöker jag köra koden så filen sparas med en knapp. Men det verkar inte gå. Mest tror jag det är för att areturn() inte är en function.

<input type='button' value='Save imge' onclick="areturn();">

Jag får inte detta att fungera alls. Känner mig lite lost nu och skulle gärna vilja få en liten knuff i rätt riktning =)

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
.M

Det som står i din script-tagg, lägg det i en funktion som du anropar ifrån din knapp.

<script type="text/javascript">
function minFunktion() {
var dataURL = document.getElementById("result");    
dataURL = dataURL.replace('data:image/png;base64,', '');

var areturn = $.ajax({
  url: "includes/save_image.asp",
  type: "POST",
  data: '{ "imageData" : "' + dataURL + '" }',
  dataType: "json",
  beforeSend: function(x) {
      x.overrideMimeType("application/j-son;charset=UTF-8");
  }
}).done(function(result) {
    console.log("Success Done!\n" + result);
}).always(function(data) {
    console.log("Always:\n" + data.responseText);
}); 
}
</script>
<input type='button' value='Save imge' onclick="minFunktion();">

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
sundrik

 

Det som står i din script-tagg, lägg det i en funktion som du anropar ifrån din knapp.

 

Ja, såklart =)

 

Fungerade ju mycket bättre.

 

Nu håller jag på att försöka lösa varför jag får 

ADODB.Stream error '800a0bb9'
Arguments are of the wrong type, are out of acceptable range, or are in conflict with one another.
save_image.asp line 9

Line 9 i den filen är

Base64Data2Stream.Write .nodeTypedValue 'write bytes of decoded base64 to stream

hela save_image.asp

<%
Function Base64Data2Stream(sData)
    Set Base64Data2Stream = Server.CreateObject("Adodb.Stream")
        Base64Data2Stream.Type = 1 'adTypeBinary
        Base64Data2Stream.Open
    With Server.CreateObject("MSXML2.DomDocument").createElement("b64")
        .dataType = "bin.base64"
        .text = Mid(sData, InStr(sData, ",") + 1) ' append data text (all data after the comma)
        Base64Data2Stream.Write .nodeTypedValue 'write bytes of decoded base64 to stream
        Base64Data2Stream.Position = 0
    End With
End Function

Dim CanvasStream
Set CanvasStream = Base64Data2Stream(Request.Form("imageData"))

'Write binary to Response Stream
'Response.BinaryWrite CanvasStream.Read

'Write binary to File
CanvasStream.SaveToFile Server.Mappath("imgFileFromCanvas.png"), 2 'adSaveCreateOverWrite
%>

Jag har fått för mig att base64 strängen inte skickas på något vis.

 

Funderar på om man inte skall inkludera någon fil för json?

 

Hittade denna som man kan inkludera. Vet inte om det gör någon skillnad. Eller om det är någon annan eller någon mer fil som borde vara inkluderad?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Snart så kanske man kan få igång det här. Är extremt tacksam för den hjälpen jag fått hittills =D

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
.M

Ja om du inte har jquery på sidan sedan tidigare så måste du inkludera den script-taggen för att det skall fungera.

 

Och det som kommer hända är att jquery skickar ett javascriptobjekt till din server och du måste tolka den i din asp-sida. Jag har aldrig försökt tolka json objekt i klassisk asp utan enbart asp.net.

 

Men prova med att ändra din kod så att den ser ut så här

data: dataURL,
//  dataType: "json",

Då skickar du enbart din data-url och inte någon javascriptkod. Och sen vill du i chrome trycka F12 och välja fliken network. Se till att ha den uppe när du testar för då kommer browsern kunna visa exakt vad som skickas. Och det behöver du veta för att kunna koda asp-koden för att reagera på vad som skickas.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
sundrik

Då skickar du enbart din data-url och inte någon javascriptkod. Och sen vill du i chrome trycka F12 och välja fliken network. Se till att ha den uppe när du testar för då kommer browsern kunna visa exakt vad som skickas. Och det behöver du veta för att kunna koda asp-koden för att reagera på vad som skickas.

 

Jag har testat med både dataType "json" och utan.

Får samma resultat.

 

Kollade med F12 och vad som skickas. Under headers och form data, så finns hela base64 koden med.

{ "imageData" : "iVBORw0KGgo.........

Kan jag inte på någotvis skriva tillbaka text från save_image.asp. Då kan man skriva ut hur svaren ser ut och kanke se mer exakt vart det skiter sig?

 

Jag försökte med en alert-box. Men får ju inte in asp-strängen i den.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
sundrik

nu jäklar börjar det närma sig.

 

Nu behöver jag bara lista ut hur jag kan parsa strängen på server-side.

 

Jag gör så här på client-side:

url: "includes/save_image.asp",
		type: "POST",
		dataType: "text",
		contentType: "application/x-www-form-urlencoded",
		data: "imageData=" + JSON.stringify(dataURL),

Och på serverside måste jag köra

JSON.parse(Request.Form("imageData"));

Men jag kan ju inte köra JSON.parse i ASP-koden. Då blir det: Object required: 'JSON'

 

Jag var såpass korkad att jag försökte:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="includes/javascript/json2.js"></script>
<%
Function Base64Data2Stream(sData)
    Set Base64Data2Stream = Server.CreateObject("Adodb.Stream")
        Base64Data2Stream.Type = 1 'adTypeBinary
        Base64Data2Stream.Open
			With Server.CreateObject("MSXML2.DomDocument").createElement("b64")
				.dataType = "bin.base64"
				.text = JSON.parse(sData) 'Mid(sData, InStr(sData, ",") + 1) ' append data text (all data after the comma)
				Base64Data2Stream.Write .nodeTypedValue 'write bytes of decoded base64 to stream
				Base64Data2Stream.Position = 0
			End With
End Function

Dim CanvasStream
Set CanvasStream = Base64Data2Stream(Request.Form("imageData"))


'Write binary to Response Stream
Response.BinaryWrite CanvasStream.Read

'Write binary to File
CanvasStream.SaveToFile Server.Mappath("imgFileFromCanvas.png"), 2 'adSaveCreateOverWrite
%>

Tips på hur jag kan göra JSON.parse för att få rätt kodning av strängen?

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
.M

Om du hoppar över JSON.stringify så borde du inte behöva json på serversidan. Då borde du nämligen få in allt som en vanlig request parameter.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
sundrik

Om du hoppar över JSON.stringify så borde du inte behöva json på serversidan. Då borde du nämligen få in allt som en vanlig request parameter.

 

Jo men då får jag

msxml3.dll error '80004005'

Error parsing '"iVBORw0KGgoAAAANSUhEUgAAADIAAAAmCAYAAACGeMg8AAAYBUlEQVRYRy1Zd2Bb9bX rvayZVnykPfeM3acxLGzl4GEhFVWKSNAgUKBFtq 0vcoD0oHpbTslb4...' as bin.base64 datatype.

Så jag trodde jag vart tvungen. Men det kanske är något annat som strular?

 

Nu kan jag iaf se att strängen kommer så långt.

Tror det har att göra med " som blir i början och slutet av strängen när den skickas så här. Men jag vet faktiskt inte riktigt vad det beror på.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...