how to save an image?

[AMpos]

Hi!

I have a program: the user selects an image from his device and it is uploaded to my server.

Currently, my upload routine uploads files fine.

But I want to reescale images before uploading them.

Anyone knows how to do it? (I was planning loading-reescaling-saving-upload_saved_image but it dows not work.

Any hint how to do it?

Code: Select all

Procedure UploadFileCallback(Success, Filename.s, Result.s)
 
  Debug "--UploadFileCallback('" + Filename + "'):"
  Debug "-->"+Success+"<"
  Debug "--("+Result+")"
  Debug "------------------------------"
  
EndProcedure

Procedure UploadFile(URL.s, File, Callback)

  Protected FileToUpload
  Protected Filename.s
  
  ! v_filetoupload = spider.file.objects.Get(v_file).localFile;
  
  ! v_filename     = v_filetoupload.name;
  
  Debug "4-Uploading " + Filename + "..."
 
	! var formData = new FormData();
 
	! formData.append('fileToUpload', v_filetoupload);
	
  ! $.ajax({
  !   url: v_url,
  !   data: formData,
  !   contentType: false,
  !   processData: false,
  !   method: 'POST',
  !   type: 'POST',
  !   success: function(response)           { v_callback(true,  v_filename, response) },
  !   error:   function(xhr, status, error) { v_callback(false, v_filename, xhr.statusText) },
  ! });
 
EndProcedure

Procedure ReadCallback(Status, Filename.s, File, Size)
	 
  If Status = #PB_Status_Loaded
   
  	Debug "2-File: " + Filename.s + " / Size: " + Size + " bytes"
  	
    UploadFile("upload.php", File, @UploadFileCallback()) ; <-- adjust the path to your upload-component!
    CloseFile(File)
   
  ElseIf Status = #PB_Status_Error
   
  	Debug "Error when loading the file: " + Filename
   
  EndIf
 
EndProcedure

Procedure OpenFileRequesterCallback()
	Define file.s
	
	NewList fotos.s()
	While NextSelectedFile()
		AddElement (fotos())
		fotos()=SelectedFileID()
		total+1
	Wend
	Debug "1-Total images: "+total
	
	ForEach fotos()
		file=fotos()
		ReadFile(#PB_Any, file, @ReadCallback(), #PB_LocalFile)
		Debug "1-image: "+file
	Next
	
EndProcedure

Procedure ChooseFileEvent()		;AQUI SE ABRE EL REQUESTER PARA ELEGIR FOTOS
  OpenFileRequester("image/jpeg,image/png", @OpenFileRequesterCallback(), #PB_Requester_MultiSelection)
EndProcedure

OpenWindow(0, 0, 0, 300, 50, "WORK IN PROGRESS", #PB_Window_ScreenCentered)
ButtonGadget(0, 10, 10, 280, 30, "Choose file(s) to upload...")

BindGadgetEvent(0, @ChooseFileEvent())

[AMpos]

Just this:

Code: Select all

loadimage (1,"image.jpg")
resizeimage(1,128,128)
saveimage(1,"resized.jpg")

so, another part of the program can load/upload this "resized.jpg" image

[Puffolino]

Starting with SpiderBasic to create a tool which loads all images of a directory, crops each image to a certain size and save it then.
But .. how to save (or overwrite) an image without seeing a filerequester?

Code: Select all

; Define

	Enumeration Window
		#Win_Main
	EndEnumeration

	Enumeration Gadget
		#Cont_Menu
		#Cont_Editor
		; Menu Gadgets
		#Txt_Title
		#Btn_Menu
		#Btn_Image
		#Btn_Dir
		#Btn_Format
		#Btn_Exit
		; Editor Gadgets
		#Btn_Ed_Back
		#Txt_Ed_Info
		#Btn_Ed_Prev
		#Btn_Ed_Next
		#Can_Editor
		#Btn_Ed_Crop
		#Btn_Ed_Replace
	EndEnumeration

	Global AspectRatio.f = 3.0 / 2.0
	Global CurrentImage.i
	Global ViewMode.i = 0 ; 0 = Menu, 1 = Editor

	Global ImgDrawX.f, ImgDrawY.f, ImgDrawW.f, ImgDrawH.f
	Global FrameX.f, FrameY.f, FrameW.f, FrameH.f
	Global IsDragging.i = #False
	Global DragOffX.f, DragOffY.f
	Global FrameIsExactMatch.i = #False

	Declare DrawEditor()
	Declare UpdateEditorLayout()

; EndDefine

Procedure.f Clamp(Value.f, Min.f, Max.f)
	If Value < Min : ProcedureReturn Min : EndIf
	If Value > Max : ProcedureReturn Max : EndIf
	ProcedureReturn Value
EndProcedure
Procedure ResizeGUI()
	Protected W = WindowWidth(#Win_Main)
	Protected H = WindowHeight(#Win_Main)

	ResizeGadget(#Cont_Menu, 0, 0, W, H)
	ResizeGadget(#Cont_Editor, 0, 0, W, H)

	If ViewMode = 0
		Protected BtnW = 250, BtnH = 50, Spacing = 20
		Protected PosX = (W - BtnW) / 2
		Protected StartY = (H - (4 * BtnH + 3 * Spacing)) / 2

		ResizeGadget(#Txt_Title, 50, 0, W - 50, 40)
		ResizeGadget(#Btn_Menu, 0, 0, 40, 40)

		ResizeGadget(#Btn_Image, PosX, StartY, BtnW, BtnH)
		ResizeGadget(#Btn_Dir, PosX, StartY + BtnH + Spacing, BtnW, BtnH)
		ResizeGadget(#Btn_Format, PosX, StartY + 2*(BtnH + Spacing), BtnW, BtnH)
		ResizeGadget(#Btn_Exit, PosX, StartY + 3*(BtnH + Spacing), BtnW, BtnH)
	Else
		Protected TopBarH = 50
		Protected BottomBarH = 60

		ResizeGadget(#Btn_Ed_Back, 5, 5, 60, 40)
		ResizeGadget(#Btn_Ed_Prev, 70, 5, 40, 40)
		ResizeGadget(#Txt_Ed_Info, 115, 5, W - 230, 40)
		ResizeGadget(#Btn_Ed_Next, W - 115, 5, 40, 40)

		ResizeGadget(#Can_Editor, 0, TopBarH, W, H - TopBarH - BottomBarH)

		Protected BottomBtnW = (W - 30) / 2
		ResizeGadget(#Btn_Ed_Crop, 10, H - BottomBarH + 10, BottomBtnW, 40)
		ResizeGadget(#Btn_Ed_Replace, 20 + BottomBtnW, H - BottomBarH + 10, BottomBtnW, 40)

		UpdateEditorLayout()
	EndIf
EndProcedure
Procedure UpdateEditorLayout()
	If Not IsImage(CurrentImage) : ProcedureReturn : EndIf

	Protected CanW = GadgetWidth(#Can_Editor)
	Protected CanH = GadgetHeight(#Can_Editor)
	Protected ImgW = ImageWidth(CurrentImage)
	Protected ImgH = ImageHeight(CurrentImage)

	Protected RatioCan.f = CanW / CanH
	Protected RatioImg.f = ImgW / ImgH

	If RatioImg > RatioCan
		ImgDrawW = CanW
		ImgDrawH = CanW / RatioImg
		ImgDrawX = 0
		ImgDrawY = (CanH - ImgDrawH) / 2
	Else
		ImgDrawH = CanH
		ImgDrawW = CanH * RatioImg
		ImgDrawY = 0
		ImgDrawX = (CanW - ImgDrawW) / 2
	EndIf

	Protected TargetRatio.f = AspectRatio
	If RatioImg < 1.0 And TargetRatio > 1.0
		TargetRatio = 1.0 / TargetRatio
	EndIf

	If Abs(RatioImg - TargetRatio) < 0.02
		FrameIsExactMatch = #True
	Else
		FrameIsExactMatch = #False
	EndIf

	If RatioImg > TargetRatio
		FrameH = ImgDrawH
		FrameW = FrameH * TargetRatio
	Else
		FrameW = ImgDrawW
		FrameH = FrameW / TargetRatio
	EndIf

	If FrameX = 0 And FrameY = 0
		FrameX = ImgDrawX + (ImgDrawW - FrameW) / 2
		FrameY = ImgDrawY + (ImgDrawH - FrameH) / 2
	Else
		FrameX = Clamp(FrameX, ImgDrawX, ImgDrawX + ImgDrawW - FrameW)
		FrameY = Clamp(FrameY, ImgDrawY, ImgDrawY + ImgDrawH - FrameH)
	EndIf

	DrawEditor()
EndProcedure
Procedure DrawEditor()
	If StartDrawing(CanvasOutput(#Can_Editor))
		Box(0, 0, OutputWidth(), OutputHeight(), RGB(30, 30, 30))
		If IsImage(CurrentImage)
			DrawImage(ImageID(CurrentImage), ImgDrawX, ImgDrawY, ImgDrawW, ImgDrawH)
			DrawingMode(#PB_2DDrawing_AlphaBlend)
			Protected DimColor = RGBA(0, 0, 0, 160)
			Box(ImgDrawX, ImgDrawY, ImgDrawW, FrameY - ImgDrawY, DimColor) ; Oben
			Box(ImgDrawX, FrameY + FrameH, ImgDrawW, (ImgDrawY + ImgDrawH) - (FrameY + FrameH), DimColor) ; Unten
			Box(ImgDrawX, FrameY, FrameX - ImgDrawX, FrameH, DimColor) ; Links
			Box(FrameX + FrameW, FrameY, (ImgDrawX + ImgDrawW) - (FrameX + FrameW), FrameH, DimColor) ; Rechts
			DrawingMode(#PB_2DDrawing_Outlined)
			If FrameIsExactMatch
				Box(FrameX, FrameY, FrameW, FrameH, RGB(0, 255, 0))
			Else
				Box(FrameX, FrameY, FrameW, FrameH, RGB(255, 255, 255))
			EndIf
		EndIf

		StopDrawing()
	EndIf
EndProcedure
Procedure OnCanvasEvent()
	Protected EvType = EventType()
	Protected MX = GetGadgetAttribute(#Can_Editor, #PB_Canvas_MouseX)
	Protected MY = GetGadgetAttribute(#Can_Editor, #PB_Canvas_MouseY)

	Select EvType
	Case #PB_EventType_LeftButtonDown
		If MX >= FrameX And MX <= (FrameX + FrameW) And MY >= FrameY And MY <= (FrameY + FrameH)
			IsDragging = #True
			DragOffX = MX - FrameX
			DragOffY = MY - FrameY
		EndIf

	Case #PB_EventType_MouseMove
		If IsDragging
			FrameX = MX - DragOffX
			FrameY = MY - DragOffY
			FrameX = Clamp(FrameX, ImgDrawX, ImgDrawX + ImgDrawW - FrameW)
			FrameY = Clamp(FrameY, ImgDrawY, ImgDrawY + ImgDrawH - FrameH)
			DrawEditor()
		EndIf

	Case #PB_EventType_LeftButtonUp, #PB_EventType_MouseLeave
		IsDragging = #False
	EndSelect
EndProcedure
Procedure SwitchToEditor()
	; Demo-Image
	If CurrentImage : FreeImage(CurrentImage) : EndIf
	CurrentImage = CreateImage(#PB_Any, 1200, 900, 24, RGB(100, 150, 200))
	If StartDrawing(ImageOutput(CurrentImage))
		Box(0,0,OutputWidth(),OutputHeight(), RGB(80, 130, 180))
		For i=0 To 199
			LineXY(Random(OutputWidth()),Random(OutputHeight()),Random(OutputWidth()),Random(OutputHeight()),Random(#White))
		Next i
		StopDrawing()
	EndIf

	FrameX = 0 : FrameY = 0 ; Reset Frame Position
	SetGadgetText(#Txt_Ed_Info, "demo_image.jpg")

	ViewMode = 1
	HideGadget(#Cont_Menu, 1)
	HideGadget(#Cont_Editor, 0)
	ResizeGUI()
EndProcedure
Procedure SwitchToMenu()
	ViewMode = 0
	HideGadget(#Cont_Editor, 1)
	HideGadget(#Cont_Menu, 0)
	ResizeGUI()
EndProcedure
Procedure OnBtnCropClick()
	If Not IsImage(CurrentImage) : ProcedureReturn : EndIf

	Protected ScaleX.f = ImageWidth(CurrentImage) / ImgDrawW
	Protected ScaleY.f = ImageHeight(CurrentImage) / ImgDrawH

	Protected CropX = (FrameX - ImgDrawX) * ScaleX
	Protected CropY = (FrameY - ImgDrawY) * ScaleY
	Protected CropW = FrameW * ScaleX
	Protected CropH = FrameH * ScaleY

	If CropX < 0 : CropX = 0 : EndIf
	If CropY < 0 : CropY = 0 : EndIf
	If CropX + CropW > ImageWidth(CurrentImage) : CropW = ImageWidth(CurrentImage) - CropX : EndIf
	If CropY + CropH > ImageHeight(CurrentImage) : CropH = ImageHeight(CurrentImage) - CropY : EndIf

	Protected NewImg = GrabImage(CurrentImage, #PB_Any, CropX, CropY, CropW, CropH)

	If IsImage(NewImg)
		Protected NewFilename$ = "CropImage_" + FormatDate("%Y%M%D_%H%I%S", Date()) + ".jpg"

		ExportImage(NewImg, NewFilename$, #PB_ImagePlugin_JPEG);, 90)
		;If CreateFile(0,NewFilename$,#Null)
			;Encodeimage(...)
			;CloseFile(0)
		;EndIf

		FreeImage(NewImg)
	Else
		;MessageRequester("Error", ":(")
	EndIf

EndProcedure
Procedure OnBtnReplaceClick()
	
	OnBtnCropClick()
	
EndProcedure
Procedure Main()
	If OpenWindow(#Win_Main, 0, 0, 800, 600, "Image Cropper", #PB_Window_Background); #PB_Window_SizeGadget | #PB_Window_MaximizeGadget)

		ContainerGadget(#Cont_Menu, 0, 0, 800, 600, #PB_Container_BorderLess)
		ButtonGadget(#Btn_Menu, 0, 0, 40, 40, "‹")
		TextGadget(#Txt_Title, 50, 0, 750, 40, "Resize Images", #PB_Text_Center)
		ButtonGadget(#Btn_Image, 0, 0, 200, 50, "Resize image")
		ButtonGadget(#Btn_Dir, 0, 0, 200, 50, "Resize directory")
		ButtonGadget(#Btn_Format, 0, 0, 200, 50, "Format (3:2)")
		ButtonGadget(#Btn_Exit, 0, 0, 200, 50, "Exit")
		CloseGadgetList()
		
		ContainerGadget(#Cont_Editor, 0, 0, 800, 600, #PB_Container_BorderLess)
		ButtonGadget(#Btn_Ed_Back, 0, 0, 60, 40, "Back")
		ButtonGadget(#Btn_Ed_Prev, 0, 0, 40, 40, "<")
		TextGadget(#Txt_Ed_Info, 0, 0, 200, 40, "Image.jpg", #PB_Text_Center)
		ButtonGadget(#Btn_Ed_Next, 0, 0, 40, 40, ">")

		CanvasGadget(#Can_Editor, 0, 0, 800, 400, #PB_Canvas_Keyboard)

		ButtonGadget(#Btn_Ed_Crop, 0, 0, 100, 40, "Save as new image")
		ButtonGadget(#Btn_Ed_Replace, 0, 0, 100, 40, "Replace original image")
		CloseGadgetList()

		HideGadget(#Cont_Editor, 1)

		BindGadgetEvent(#Btn_Image, @SwitchToEditor())
		BindGadgetEvent(#Btn_Ed_Back, @SwitchToMenu())
		BindGadgetEvent(#Can_Editor, @OnCanvasEvent())
		BindEvent(#PB_Event_SizeWindow, @ResizeGUI(), #Win_Main)
		BindGadgetEvent(#Btn_Ed_Crop, @OnBtnCropClick())
		BindGadgetEvent(#Btn_Ed_Replace, @OnBtnReplaceClick())

		ResizeGUI()
	EndIf
EndProcedure
Main()