photokit editor demo ifraem URL: https://photokit.com/editor/?lang=auto
lang:auto,en,fr,de,ru,pt,es,ja,ko,zh


<script>


//
window.addEventListener("message", function (event) {

			
			
			if(event.data.type=="photokitsdk" && event.data.name=="editorLoaded"){
				console.log("editor loaded");
				octustudio.contentWindow.postMessage({type: 'photokitsdk',name:'saveimagetype',savetype:'postMessage'},'*'); //"local" or "postMessage"
				/*
					The image save mode "local" and "postMessage", the user clicks the save button or saves through the api:
						In local mode, the image will be saved locally.
						In postMessage mode, the image base64 data is passed to the parent window through possMessage.
				*/
				save_base64_button.disabled = false;
				save_local_button.disabled = false;
				open_image_button.disabled = false;
				place_image_button.disabled = false;
				
				open_images_button.disabled = false;
				get_workbench_button.disabled = false;
			}
			
			// Get saved image (In postMessage mode, monitor the saved image data.) :
			if(event.data.type=="photokitsdk" && event.data.name=="saveimage"){
				console.log(event.data)
				var imagebase64 = event.data.imagedata;
				var imagename = event.data.imagename;
				var historydata = JSON.stringify(event.data.historydata);
				console.log(imagebase64,historydata);
				
				alert("Successfully obtained png image base64 data and eidotr's history data");
			}
			
			// Get saved image (In workbench mode, monitor the workbench's images data.) :
			if(event.data.type=="photokitsdk" && event.data.name=="get_workbench"){
				console.log(event.data.workbench_data)
				//[{ImageName: 'xx.png', base64:'data:image/png;base64,xxx',imageChanged:Boolean},]
				/*
					Returns the list of images in the workbench
					ImageName: https://cdn.pixabay.com/photo/2020/04/20/04/02/brick-5066282_960_720.jpg --> brick-5066282_960_720.jpg
					base64: Base64 value of the image
					imageChanged: Whether the image has been modified by the user. If it has not been modified, it is recommended to reduce network transmission storage.
				*/
				alert("Successfully Workbench All Images");
			}
			
});	

addEventListener('DOMContentLoaded', function(){
	var save_base64_button = document.getElementById("save_base64_button");
	var save_local_button = document.getElementById("save_local_button");
	var open_image_button = document.getElementById("open_image_button");
	var place_image_button = document.getElementById("place_image_button");
	
	var open_images_button = document.getElementById("open_images_button");
	var get_workbench_button = document.getElementById("get_workbench_button");
	
	save_base64_button.addEventListener("click", function(){
		
			octustudio.contentWindow.postMessage({type: 'photokitsdk',name:'saveimagetype',savetype:'postMessage'},'*');  //"local" or "postMessage"
			octustudio.contentWindow.postMessage({type: 'photokitsdk',name:'saveimage'},'*');
	});
	
	save_local_button.addEventListener("click", function(){
			
			octustudio.contentWindow.postMessage({type: 'photokitsdk',name:'saveimagetype',savetype:'local'},'*');  //"local" or "postMessage"
			octustudio.contentWindow.postMessage({type: 'photokitsdk',name:'saveimage'},'*');
	});
	
	open_image_button.addEventListener("click", function(){
			toDataURL('https://cdn.pixabay.com/photo/2020/04/20/04/02/brick-5066282_960_720.jpg',function(dataUrl) {
					octustudio.contentWindow.postMessage({type: 'photokitsdk',name:'openimage',data:dataUrl,opentype:0},'*');
			});
	});
	
	place_image_button.addEventListener("click", function(){
			toDataURL('https://cdn.pixabay.com/photo/2020/03/13/04/06/handmade-4926871_960_720.jpg',function(dataUrl) {
					octustudio.contentWindow.postMessage({type: 'photokitsdk',name:'openimage',data:dataUrl,opentype:1},'*');
			});
	});
	open_images_button.addEventListener("click", async function(){
				
				octustudio.contentWindow.postMessage({type: 'photokitsdk',name:'saveimagetype',savetype:'workbench'},'*');  //"local" or "postMessage" or "workbench"
				//workbench
				//When the user clicks the Save button on the canvas, save to local.
				//When the user clicks the Export button on the workbench, postmessage data.
				let webpage_images = [
					'/demo_images/Detail_1.jpg',
					'/demo_images/Detail_2.jpg',
					'/demo_images/Detail_3.jpg',
					'/demo_images/Detail_4.jpg',
					'/demo_images/Detail_5.jpg',
					'/demo_images/Detail_6.jpg',
					'/demo_images/Detail_7.jpg',
					'/demo_images/Detail_8.jpg',
					'/demo_images/Detail_9.jpg',
					'/demo_images/Detail_10.jpg',
					'/demo_images/Detail_11.jpg',
					'/demo_images/Detail_12.jpg',
					'/demo_images/Detail_13.jpg',
				]
				let webpage_image_files = []
				let webpage_image_loaded = 0
				for(var i=0;i<webpage_images.length;i++){
					let bigimage = webpage_images[i]
					let imagefile = await urltofile(bigimage,0,0);
					//urltofile(bigimage,0,0).then(function(imagefile){
						if(imagefile){
							webpage_image_files.push(imagefile)
						}
						
						webpage_image_loaded = webpage_image_loaded+1
						octustudio.contentWindow.postMessage({type: 'photokitsdk',name:'workbench_images_loading',data:Math.ceil((webpage_image_loaded/webpage_images.length).toFixed(2)*100)+"%"}, '*');
						if(webpage_image_loaded==webpage_images.length){
							octustudio.contentWindow.postMessage({type: 'photokitsdk',name:'workbench_images',data:webpage_image_files}, '*');
							console.log("send images")
							console.log(webpage_image_files)
						}
					//})
					
				}
	});
	
	get_workbench_button.addEventListener("click", function(){
			octustudio.contentWindow.postMessage({type: 'photokitsdk',name:'get_workbench'},'*');
	});
	
});



async function urltofile(URI,ww,hh) {
	  return new Promise(function(resolve, reject) {
		if (URI == null) resolve(false);
		var canvas = document.createElement('canvas'),
			context = canvas.getContext('2d'),
			image = new Image();
		image.crossOrigin="anonymous"
		image.addEventListener('error', function() {
			resolve(false);
		}, false);
		image.addEventListener('load', function() {
		  try{
				  if(ww*hh ==0){
					canvas.width = image.width;
					canvas.height = image.height;
				  }else{
					canvas.width = ww;
					canvas.height = hh;
				  }
				  //context.imageSmoothingEnabled = false;
				  context.drawImage(image, 0, 0, canvas.width, canvas.height);
				  image_base64 = canvas.toDataURL("image/png",1);
				  console.log(image_base64)
				  var filename = URI.substring(URI.lastIndexOf('/')+1).replace(/\.[^/.]+$/, "");
				  var newfile = dataURLtoFile(image_base64,filename+".png")
				  var editor_file = {};
				  
				  editor_file.extension = "png";
				  editor_file.mime = "image/png";
				  editor_file.name = filename+".png";
				  editor_file.size = newfile.size;
				  editor_file.native = newfile;
				  resolve(editor_file);
		   }catch(e){
				console.log(e)
				resolve(false);
		   }
		}, false);
		image.src = URI;
	  });
}

function dataURLtoFile(dataurl, filename) {
 
			var arr = dataurl.split(','),
				mime = arr[0].match(/:(.*?);/)[1],
				bstr = atob(arr[1]), 
				n = bstr.length, 
				u8arr = new Uint8Array(n);
				
			while(n--){
				u8arr[n] = bstr.charCodeAt(n);
			}
			
			return new File([u8arr], filename, {type:mime});
}
	
//convert image url to base64 data
function toDataURL(src, callback, outputFormat) {
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function() {
      var canvas = document.createElement('CANVAS');
      var ctx = canvas.getContext('2d');
      var dataURL;
      canvas.height = this.naturalHeight;
      canvas.width = this.naturalWidth;
      ctx.drawImage(this, 0, 0);
      dataURL = canvas.toDataURL(outputFormat);
      callback(dataURL);
    };
    img.src = src;
    if (img.complete || img.complete === undefined) {
      img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
      img.src = src;
    }
}	
			  


</script>
<br>
<button id="save_base64_button" type="button" disabled>save image( Get png image base64)</button>
<button id="save_local_button" type="button" disabled>save image( save to local)</button>
<button id="open_image_button" type="button" disabled>open an image</button>
<button id="place_image_button" type="button" disabled>place an image</button>

<button id="open_images_button" type="button" disabled>open images to workbench</button>
<button id="get_workbench_button" type="button" disabled>get workbench images</button>
<br><br>
<iframe id="octustudio" style="width:100%;height:850px;" src="https://photokit.com/editor/?lang=auto" referrerpolicy="no-referrer-when-downgrade" frameborder="no" border="0" scrolling="no" allow="local-fonts; clipboard-read; clipboard-write">