Image Processing (Caman JS)

Created a nice software using SpiderBasic ? Post you link here !
User avatar
eddy
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Image Processing (Caman JS)

Post by eddy »

:arrow: doc/Demo : http://camanjs.com/
  • Blends
  • Filters
  • Layers

Code: Select all

Procedure.i StartLayeredDrawing(DrawingOutput, *DrawFunction, *OnRenderEndFunction=0)
  !return Caman(v_DrawingOutput.canvas, function(){ 
  !   v_DrawingOutput.caman=this;
  !   p_DrawFunction(v_DrawingOutput);
  !   this.render(function(){ p_OnRenderEndFunction && p_OnRenderEndFunction.call(this); });
  !});
EndProcedure

Procedure AddDrawingLayer(DrawingOutput, Opacity=100, BlendMode.s="normal", LayerDrawingOutput=0, AppliedFilters.s="")
  !v_DrawingOutput.caman.newLayer(function () {  
  !   if (v_LayerDrawingOutput){
  !     this.imageData = v_LayerDrawingOutput.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
  !     this.pixelData = this.imageData.data;
  !   }
  !   this.setBlendingMode(v_BlendMode);
  !   this.opacity=v_Opacity;
  !});  
EndProcedure 

Procedure DrawingFilter(DrawingOutput,Filter.s,Value)
  !v_DrawingOutput.caman[v_Filter](v_Value);
EndProcedure




CompilerIf #PB_Compiler_IsMainFile
  ; ****************************
  ; EXAMPLE  
  ; ****************************
  
  ;{ Utils
  Procedure UsePlugin(Plugin.s, Path.s, *FunctionUsingPlugin, EnforceDefine=#False)
  !cfg={ enforceDefine: v_EnforceDefine, paths: {} };
  !cfg.paths[v_Plugin]=v_Path;
  !requirejs.config(cfg);
  
  !require([v_Plugin], function(plug) { 
  !   p_FunctionUsingPlugin(plug);  
  !});
EndProcedure
  ;} 
  
  Enumeration
    #WIN=100
    #IMAGE
    #BUTTON
    #CANVAS
  EndEnumeration
  #Drawing_Blend_Normal$="normal"
  #Drawing_Blend_Multiply$="multiply"
  #Drawing_Blend_Screen$="screen"
  #Drawing_Blend_Overlay$="overlay"
  #Drawing_Blend_Difference$="difference"
  #Drawing_Blend_Addition$="addition"
  #Drawing_Blend_Exclusion$="exclusion"
  #Drawing_Blend_SoftLight$="softLight"
  #Drawing_Blend_Lighten$="lighten"
  #Drawing_Blend_Darken$="darken"
  
  Procedure DrawingLayeredImage(DrawingOutput)
    layer1_ImageOutput=ImageOutput(CreateImage(#PB_Any,300,300,32,RGB(0,100,0)))
    If StartDrawing(layer1_ImageOutput)
      Box(50,50,20,20,RGB(255,100,255)) 
      Box(150,110,80,50,RGB(100,0,255)) 
      StopDrawing()
    EndIf
    layer2_ImageOutput=ImageOutput(CreateImage(#PB_Any,300,300,32,RGB(0,100,0)))
    If StartDrawing(layer2_ImageOutput)
      Box(20,250,20,20,RGB(255,100,255)) 
      Box(50,10,70,50,RGB(100,0,255)) 
      StopDrawing()
    EndIf
    
    
    AddDrawingLayer(DrawingOutput, 10, #Drawing_Blend_Exclusion$, layer1_ImageOutput)   
    DrawingFilter(DrawingOutput,"hue",50)
    
    AddDrawingLayer(DrawingOutput, 60, #Drawing_Blend_Addition$, layer2_ImageOutput)   
    DrawingFilter(DrawingOutput,"hue",50)
    

  EndProcedure
  
  Procedure TestCamanAPI()   
    If OpenWindow(#WIN, 0, 0, 640, 480, "Image Processing - CamanJS", #PB_Window_Background)  
      CanvasGadget(#CANVAS,5,30,300,300)
      
      StartDrawing(CanvasOutput(#CANVAS))
      Box(0,0,300,150,RGB(50,100,200))
      Box(0,150,300,150,RGB(150,200,60))
      StopDrawing()
      
      StartLayeredDrawing(CanvasOutput(#CANVAS), @DrawingLayeredImage())            
    EndIf
  EndProcedure
  
  UsePlugin("Caman","//cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min",@TestCamanAPI());
  
CompilerEndIf
User avatar
eddy
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Re: Image Processing (Caman JS)

Post by eddy »

updated
- fix plugin loading
Post Reply