photokit editor demo ifraem URL: https://photokit.com/editor/?lang=fr
lang: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;
			}
			
			// 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");
			}
			
			
});	

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");
	
	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},'*');
			});
	});
});
	
//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>
<br><br>
<iframe id="octustudio" style="width:100%;height:850px;" src="https://photokit.com/editor/?lang=fr" referrerpolicy="no-referrer-when-downgrade" frameborder="no" border="0" scrolling="no" allow="local-fonts; clipboard-read; clipboard-write">