Aktuelle Zeit: 24.08.2019 14:35

Alle Zeiten sind UTC + 1 Stunde [ Sommerzeit ]




Ein neues Thema erstellen Auf das Thema antworten  [ 4 Beiträge ] 
Autor Nachricht
 Betreff des Beitrags: Code für SpiderBasic anpassen ?
BeitragVerfasst: 28.10.2018 10:40 
Offline

Registriert: 27.11.2016 18:13
Wohnort: Erzgebirge
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:
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!


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: Code für SpiderBasic anpassen ?
BeitragVerfasst: 29.10.2018 00:26 
Offline
Benutzeravatar

Registriert: 08.09.2004 08:21
Wohnort: Amphibios 9
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:
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

_________________
"A user interface is like a joke. If you have to explain it, it’s not that good." (Martin Leblanc)


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: Code für SpiderBasic anpassen ?
BeitragVerfasst: 29.10.2018 20:00 
Offline

Registriert: 27.11.2016 18:13
Wohnort: Erzgebirge
Kiffi hat geschrieben:
Legst Du Wert darauf, die Bildbearbeitung selber zu schreiben?


Ja!


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: Code für SpiderBasic anpassen ?
BeitragVerfasst: 29.10.2018 20:27 
Offline
Benutzeravatar

Registriert: 08.09.2004 08:21
Wohnort: Amphibios 9
ccode_new hat geschrieben:
Ja!

gern geschehen.

_________________
"A user interface is like a joke. If you have to explain it, it’s not that good." (Martin Leblanc)


Nach oben
 Profil  
Mit Zitat antworten  
Beiträge der letzten Zeit anzeigen:  Sortiere nach  
Ein neues Thema erstellen Auf das Thema antworten  [ 4 Beiträge ] 

Alle Zeiten sind UTC + 1 Stunde [ Sommerzeit ]


Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast


Sie dürfen keine neuen Themen in diesem Forum erstellen.
Sie dürfen keine Antworten zu Themen in diesem Forum erstellen.
Sie dürfen Ihre Beiträge in diesem Forum nicht ändern.
Sie dürfen Ihre Beiträge in diesem Forum nicht löschen.

Suche nach:
Gehe zu:  

 


Powered by phpBB © 2008 phpBB Group | Deutsche Übersetzung durch phpBB.de
subSilver+ theme by Canver Software, sponsor Sanal Modifiye