Code für SpiderBasic anpassen ?
Verfasst: 28.10.2018 10:40
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:
Danke!
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)