Code für SpiderBasic anpassen ?

Hier könnt ihr alle Fragen zu SpiderBasic austauschen.
ccode_new
Beiträge: 1214
Registriert: 27.11.2016 18:13
Wohnort: Erzgebirge

Code für SpiderBasic anpassen ?

Beitrag von ccode_new »

Hallo Leute,

wie könnte ich diesen Code schön flexibel für SpiderBasic anpassen ?

Das heißt mit Verwendung des SpiderBasic-Canvas und einfacher Übergabe des Bildes.
Am Ende soll ein Base64-String erhalten werden, den man problemlos als "URL" laden kann.
Dieses Base64 Bild sollte dann einfach per ExportImage() speicherbar sein.

Hier ist mein extrem grauenhafter Rohcode:

Code: Alles auswählen

Global bild.s

;Hier kann ein Bildpfad übergeben werden.
Global MeinBild.s = "image.jpg"

Procedure.s GrayImage(picture.s)
  ;! document.write("<main>");
  ! var hpic = v_picture
! document.write("<img id=\"image\" src="+hpic+" style=\"display: none\">");
;! document.write("</main>");

! document.write("<!-- vertex shader -->");
! document.write("<script id=\"vertex-shader\" type=\"x-shader/x-vertex\">");
! document.write("attribute vec2 a_position;");
! document.write("attribute vec2 a_texCoord;");
! document.write("uniform vec2 u_resolution;");
! document.write("varying vec2 v_texCoord;");
! document.write("void main() {");
! document.write("  vec2 clipSpace = (a_position / u_resolution) * 2.0 - 1.0;");
! document.write("  gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);");
! document.write("  v_texCoord = a_texCoord;");
! document.write("}");
! document.write("</script>");

! document.write("<!-- fragment shader -->");
! document.write("<script id=\"fragment-shader\" type=\"x-shader/x-fragment\">");
! document.write("precision mediump float;");
! document.write("uniform sampler2D u_image;");
! document.write("varying vec2 v_texCoord;");
! document.write("void main() {");
! document.write("  vec4 color = texture2D(u_image, v_texCoord);");
! document.write("  float grey = (0.2126 * color.r) + (0.7152 * color.g) + (0.0722 * color.b);");
! document.write("  color.rgb += (grey - color.rgb);");
! document.write("  gl_FragColor = color;");
! document.write("}");
! document.write("</script>");

;Helper function to compile webGL program

! createWebGLProgram = function(ctx, vertexShaderSource, fragmentShaderSource) {
! this.ctx = ctx;
! this.compileShader = function(shaderSource, shaderType) {
!			var shader = this.ctx.createShader(shaderType);
!			this.ctx.shaderSource(shader, shaderSource);
!			this.ctx.compileShader(shader);
!			return shader;
!		};
!		var program = this.ctx.createProgram();
!		this.ctx.attachShader(program, this.compileShader(vertexShaderSource, this.ctx.VERTEX_SHADER));
!		this.ctx.attachShader(program, this.compileShader(fragmentShaderSource, this.ctx.FRAGMENT_SHADER));
!		this.ctx.linkProgram(program);
!		this.ctx.useProgram(program);
!    return program;
! }

! var pic = 0;
! var image = document.getElementById('image');
! if(image.complete){
!		pic = desaturateImage(image);
!	} else {
!		image.onload = function(){
!		pic =	desaturateImage(image);
!		};
!	}
! return pic

! function desaturateImage(image) {
!		var canvas = document.createElement('canvas');
; ! // hide the canvas
; ! canvas.style.display="none";
!		image.parentNode.insertBefore(canvas, image);
!		canvas.width  = image.width;
!		canvas.height = image.height;
!		image.parentNode.removeChild(image);
!		var ctx;
!		try {
!		  ctx = canvas.getContext("webgl", {preserveDrawingBuffer:true})  || canvas.getContext("experimental-webgl", {preserveDrawingBuffer:true});
!		} catch(e) {}
!		if (!ctx) {
!			// You could fallback To 2D methods here
!			alert("Sorry, it seems WebGL is not available.");
!		}
!		var fragmentShaderSource = document.getElementById("fragment-shader").text;
!		var vertexShaderSource = document.getElementById("vertex-shader").text;
!		var program = createWebGLProgram(ctx, vertexShaderSource, fragmentShaderSource);
!		// Expose canvas width And height To shader via u_resolution
!	  var resolutionLocation = ctx.getUniformLocation(program, "u_resolution");
!	  ctx.uniform2f(resolutionLocation, canvas.width, canvas.height);
!		// Position rectangle vertices (2 triangles)
!	  var positionLocation = ctx.getAttribLocation(program, "a_position");
!	  var buffer = ctx.createBuffer();
!	  ctx.bindBuffer(ctx.ARRAY_BUFFER, buffer);
!		ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array([
!	     0, 0,
!	     image.width, 0,
!	     0, image.height,
!	     0, image.height,
!	     image.width, 0,
!	     image.width, image.height]), ctx.STATIC_DRAW);
!		ctx.enableVertexAttribArray(positionLocation);
!	  ctx.vertexAttribPointer(positionLocation, 2, ctx.FLOAT, false, 0, 0);
!		//Position texture
!	  var texCoordLocation = ctx.getAttribLocation(program, "a_texCoord");
!	  var texCoordBuffer = ctx.createBuffer();
!	  ctx.bindBuffer(ctx.ARRAY_BUFFER, texCoordBuffer);
!	  ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array([
!			0.0, 0.0,
!			1.0, 0.0,
!			0.0, 1.0,
!			0.0, 1.0,
!			1.0, 0.0,
!			1.0, 1.0]), ctx.STATIC_DRAW);
!	  ctx.enableVertexAttribArray(texCoordLocation);
!	  ctx.vertexAttribPointer(texCoordLocation, 2, ctx.FLOAT, false, 0, 0);
!	  // Create a texture.
!	  var texture = ctx.createTexture();
!	  ctx.bindTexture(ctx.TEXTURE_2D, texture);
!	  // Set the parameters so we can render any size image.
!	  ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);
!	  ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);
!	  ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.NEAREST);
!	  ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MAG_FILTER, ctx.NEAREST);
!	  // Load the image into the texture.
!	  ctx.texImage2D(ctx.TEXTURE_2D, 0, ctx.RGBA, ctx.RGBA, ctx.UNSIGNED_BYTE, image);
!	  // Draw the rectangle.
!	  ctx.drawArrays(ctx.TRIANGLES, 0, 6);
;!   document.write(canvas.toDataURL("image/jpeg"));
!   return canvas.toDataURL("image/jpeg");
! }
EndProcedure

Procedure CreateCallback(Status, Filename$, File, SizeRead)
  Select Status
    Case #PB_Status_Saved
      ! alert("File saving");
    Case #PB_Status_Error
      ! alert("File saving has failed");
  EndSelect
EndProcedure

Procedure Loaded(Type, Filename$, ObjectId)
  bild = GrayImage(MeinBild)

If CreateFile(1, "Base64_"+MeinBild+".txt", @CreateCallback(), #PB_LocalStorage)
  *dbild = AllocateMemory(Len(bild))
  PokeS(*dbild, 0, bild, -1)
  WriteData(1, *dbild, 0, MemorySize(*dbild))
  ExportFile(1, "text/plain", #PB_LocalFile)
  CloseFile(1)
EndIf
  
EndProcedure

Procedure LoadingError(Type, Filename$, ObjectId)
  Debug Filename$ + ": loading error"
EndProcedure

; Register the loading event before calling any resource load command
BindEvent(#PB_Event_Loading, @Loaded())
BindEvent(#PB_Event_LoadingError, @LoadingError())

LoadImage(0, MeinBild)
Danke!
Betriebssysteme: div. Windows, Linux, Unix - Systeme

no Keyboard, press any key
no mouse, you need a cat
Benutzeravatar
Kiffi
Beiträge: 10621
Registriert: 08.09.2004 08:21
Wohnort: Amphibios 9

Re: Code für SpiderBasic anpassen ?

Beitrag von Kiffi »

Legst Du Wert darauf, die Bildbearbeitung selber zu schreiben?

Ansonsten würde ich die Verwendung einer entsprechenden JS-Library empfehlen.

Hier ein Beispiel für CamanJS:

Code: Alles auswählen

Procedure CreateFileCallback(Status, Filename$, File, SizeRead)
  
  Select Status
    Case #PB_Status_Saved
      Debug "File saved"
    Case #PB_Status_Error
      Debug "File saving has failed"
  EndSelect
  
EndProcedure

Procedure SaveBase64(MeinBild.s, DataUrl.s)
  
  Protected FF
  
  FF = CreateFile(#PB_Any, "Base64_" + MeinBild + ".txt", @CreateFileCallback(), #PB_LocalStorage)
  
  If FF
    WriteString(FF, DataUrl)
    ExportFile(FF, "text/plain", #PB_LocalFile)
    CloseFile(FF)
  Else
    Debug "!CreateFile()"
  EndIf
  
EndProcedure

Procedure Loaded(Type, Filename$, ObjectId)
  
  Protected IID
  Protected DataUrl.s
  
  IID = ImageID(ObjectId)
  
  ! Caman(v_iid, function () {
  !   this.greyscale();
  !   this.render(function() {
  !     v_dataurl = this.canvas.toDataURL();
  
  SaveBase64(Filename$, DataUrl)
  
  !   });
  ! });  
  
EndProcedure

Procedure LoadingError(Type, Filename$, ObjectId)
  Debug Filename$ + ": loading error"
EndProcedure

BindEvent(#PB_Event_Loading, @Loaded())
BindEvent(#PB_Event_LoadingError, @LoadingError())

! require(["https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"], 
!   function() {
LoadImage(0, "test.jpg")
!   }
! );
Grüße ... Peter
Hygge
ccode_new
Beiträge: 1214
Registriert: 27.11.2016 18:13
Wohnort: Erzgebirge

Re: Code für SpiderBasic anpassen ?

Beitrag von ccode_new »

Kiffi hat geschrieben:Legst Du Wert darauf, die Bildbearbeitung selber zu schreiben?
Ja!
Betriebssysteme: div. Windows, Linux, Unix - Systeme

no Keyboard, press any key
no mouse, you need a cat
Benutzeravatar
Kiffi
Beiträge: 10621
Registriert: 08.09.2004 08:21
Wohnort: Amphibios 9

Re: Code für SpiderBasic anpassen ?

Beitrag von Kiffi »

ccode_new hat geschrieben:Ja!
gern geschehen.
Hygge
Antworten